Your User Experience Journey| How to Wireframe Like a Pro.

Comfort Mba
5 min readJun 1, 2022

Design is not all about visualizing something in your mind’s eye, snapping your fingers, and boom MAGIC! You need to have it all figured out.

There are a lot of thought processes that go into designing. One important aspect of that process is your user journey map. This is figuring out the roadmap to achieving your desired goals. This process begins with you figuring out what your user journey should be, and then proceeding to make wireframes for your design which will help get your ideas moving.

User journey

A wireframe is the skeleton of a website or mobile User Interface. Put simply, wireframe is a set of diagrams that consist of lines, and various shapes that show the functionality of each specific page in the application design. A wireframe is a low fidelity sketch because it’s the first visual representation of your ideas, but still contains the basic elements of your design. It doesn’t contain colors and it is not clickable. With wireframes, you can test your ideas and see what works and what does not work in the early stage of your design. Wireframes are cheap to make as they are usually hand-drawn making use of sketchbooks and pen, or by making use of digital wireframing tools.

Wireframing in the early stage of your design will save you and your teammates a great deal of time and money, in testing and amending the design in the later phase of the application because, with it, you can easily get feedback from colleagues, clients, and also stakeholders while encouraging collaboration in the early stage.

Before you start wireframing you need to ask yourself what “problem are you trying to solve for your user” and use the answers as a basis for your wireframing.

There are no roadmaps to wireframing, and you definitely don’t need a lot of tools to start, more importantly, you don’t have to be good at drawing, as long as you can draw boxes, lines, triangles, and circles you’re good to go.

Tools For Wireframing: Sketchbook, pens, shading pens as well as markers. But if you’re not comfortable with those you could make use of a whiteboard with some makers, and also digital wireframing tools such as Adobe XD, Figma, and Balsamiq Wireframes, to name a few. You can make your own research to find out which one of those tools you’re more comfortable with. But it’s best practice to make use of a sketchbook and a pen. Just remember this phase is all about getting your ideas down, so it doesn’t have to be fancy or carry some technical jargon along with it. Just keep in mind that in this article we’re going to talk about how to wireframe using just sketchbooks, pens, shading pens, and makers.

With wireframing, you have the opportunity to get a lot of ideas down on paper while not losing important details, and after getting your ideas down you can handpick the sketches you think are close to what you’re trying to achieve, and then comes the polishing part where you can include any more details, making it more colorful as you see fit.

Let’s get sketching!

Step 1: You can start with a plain sheet of paper or your drawing book and draw some mobile screens, you can draw as many screens as you can remember the goal is to get as many ideas down on paper as possible but try not to get too overwhelmed but still enjoy the process.

Step 2: Think about what each screen you’ll draw on the paper would do if you were the user, what do you want a section to do, where do you want it to take you? and how did you visualize it in your head, now pick the element you want to use in representing those sections on your screen. Remember the triangles, squares, circles, and lines we spoke about earlier? now they’ll come in really handy, simply use them anywhere you see fit. As a general rule of thumb, a lot of designers make use of lines for text, patterns, and shading, and squares for buttons, cards, logos, etc.
You could have your header, logo, menu, footer, and as many texts, as you want, some buttons, an image, and many more. It all depends on how detailed you want your sketches to be.

You can make use of capital letters so your text may appear clearer in cases where you want to highlight specific details, in other cases a bolder text would do, highlighters might be helpful to highlight some cool features along the way, although it’s best practice to keep your sketches simple at this stage.

Photo by Amélie Mourichon on Unsplash

Step 3: After drawing the screens, try moving from one screen on your sketches starting from what you consider the first step, is it the signup page, the login page, or the purchase page whatever it is. Now see if the next screen according to how it was arranged would take you to the next task, if the next task is missing then you need to draw a different page for it, repeat this cycle until the whole steps are complete, remember this is an ongoing phase, you constantly make the needed adjustment as you go. If you’re fully satisfied with the number of screens on your display, and you feel they fulfill all the tasks you have planned out then congratulation, you just made your first awesome wireframe.

It’s important to not get disappointed if your wireframes don’t look as polished as you’d want them to be, remember the more you practice the better you get at this.

If you’ve made it this far you should give yourself a pat on the back, remember you need to put your knowledge to good use as practice makes perfect.

In the next article, we would be discussing how we can turn your wireframes into prototypes.

If you’d like to find out how to make good user research, here is an article for you.

Also if you’d like to see more awesome content like this, then you should follow, clap, and share this article with someone who might need it.

--

--