UX Wireframing: Try to Go from High to Low

The high and low in the title refers to fidelity in the first place. UX design usually starts with a low-fi sketch and eventually evolves into a high-fi, pixel-perfect preview. For the study work at Ironhack, I was given an interesting task to re-engineer a user flow in an existing app and sketch it as a bare black&white wireframe (mid and low-fi). The major points one gets the chance to contemplate about and learn from are: the purpose of wireframe; wireframe UI; wireframe copy; wireframing in Sketch; wire-flow in InVision;

Let the fun begin!

The Task

Pick your favorite app, make min 5 screenshots representing a flow that a user has to undergo to achieve a goal.

I chose the 9292 app, a handy route planner that’s been helping me and many others finding the way by public transport in the Netherlands.

Let’s say a user wants to find a connection between Location A and B. A clear task. As a bonus, I went one more step ahead and had the user want to save that connection within the personal profile in the app. 7 screens.

User flow with subtasks described

Start: High to Low by Hand

Nothing beats the pen and paper, and so I grabbed one and drafted the first sketch. Pretty simple as the task was to follow the layout of the app (no styling) and simplify it to its bare functional representation.

I had to ask myself though. Is what I came up with the simplest visual representation? For example, isn’t positioning the logo half its height lower more a visual design decision that should come later on during the development? The same goes for the input form framed and centered within the body. Is the arrow inside the button the simplest choice, isn’t it too distractive? Should I include the background image which is visible on the home screen? And further on, are the icon placeholders giving a clear message? And what about the copy? Should I keep the text as it is (“Where to?” vs “Title”) or come up with something that has less chance of distracting from the main idea?

This made me review the main characteristics of a wireframe.

1. Wireframe to quickly sketch a user flow. Making changes is easy at this point. Hence using the icon placeholders is fine as it allows for fast non-detailed sketching. Fail fast is what we want at this point because it’s cheap. Rather re-do a simple sketch than a detailed piece of art.
2. A wireframe initiates a conversation with the stakeholders. It is vital not to distract them with lots of unimportant details. My first sketch is fine for my low-fi design process, but the stakeholders should be presented with a mid-fi version, I guess.
3. A wireframe shows prioritized content. Hence the answer to my question about the position of the input form. It’s fine to have it centered as it gives the information a certain priority.
4. A wireframe focuses on functionality and behavior. This touches the copy as well. Omit unimportant text by replacing it with lines for example. For the important text figure out if its appearance contributes to the understanding of the functionality and user flow (e.g. leave “show earlier options”). Change to general meaning if necessary (e.g. “Amsterdam” to “Location 1”).

High to Mid by Hand

Simple hand-drawn UI guide for consistency

In the second iteration, I focused on a hand-drawn mid-fi version. For that purpose, I sketched a simple UI guide.

Eventually, I ended up with hand-drawn low and mid-fi wireframes.

Low and mid-fi hand-drawn wireframe

High to Mid in Sketch

The next step involved drawing the black&white wireframe in Sketch. For this part, I stripped the original hi-fi styling down to 1 font, 2 typefaces (bold, regular), 4 font sizes, 2 buttons, set of icons and simplified app UI (keyboard, date/time picker).

Wireframe Consistency

The simplified UI elements defined in the Sketch surely make the wireframe consistent through-out the views. Furthermore, the spacing between elements does matter as well. For that part, I created document guides and used the 8pt-rule overall.

Mid-Fi version made in the Sketch app.

Wire-Flow

In the final step, I made a functional wire-flow prototype in InVision. See below.

Click here to view the project `9292 Wireframe`

Final word

I am happy with the results.

Making a wireframe is like building with lego. The choice of blocks may be limited but that’s why one can very fast put up a great structure.

Sketch and InVision were an invaluable help in the process. I was astonished by all the handy features they offer (the more in combination with Craft).

I have used InVision’s Freehand feature during the iteration process. Feel free to check it out here.