Wireframes & usability testing


The third week’s assignment consisted of building wireframes for a journey planner app. A list of requirements following the MoSCoW method was provided. The most important considerations are that the planner should provide the user different route options and that it should also provide routes for general public transportation, walking, and cycling.

We had the option of building the app either for mobile or for desktop platforms. I chose to do it for mobile because of the “mobile first” philosophy.

The entire process accounted for building initial wireframes, testing them and make improvements based on feedback from other colleagues. Results can be seen below.


I started with hand sketching how the app could look like.

Hand sketched wireframes
Hand sketched wireframes.

Even though the hand drawn sketch was simple it already helped me realize some thing I should and shouldn’t do on the final version:

From the had drawn sketches, I did the initial digital wireframes:

Address selection screen.
Options screen.
Route selection screen.

After doing the digital wireframes, some other things became clear after testing:

The final wireframes can be seen below. Note the different menu navigation and the back button.

Address and options screen. Now it is all in one place.
Showing route A. (click to enlarge)
Showing route B. (click to enlarge)


The tests were conducted by asking colleagues to use the app with a simple instruction: “navigate through the app and choose the quickest route to your destination”.

The clickable wireframe was uploaded to a smartphone using the Adobe Xd app. I didn’t record the tests in any way except for writing down feedback given by my peers. Out of the four people tested, these were the most common usability problems:

After the feedback I adjusted the wireframes and no other test was performed.


It was interesting to do wireframes. With the little experience in interface design that I have, I always thought that wireframes were somewhat too simple to get any valuable feedback. I was proven wrong after asking my colleagues to use my wireframe.

The depth of the insights they provided was sufficient to significantly improve my interface, and although the same could probably be achieved with the high-fidelity prototype, this was probably less time consuming and quicker to adjust functionalities based on feedback.

I must still learn how to balance the complexity of my wireframes, though. I have a constant battle between thinking I am not being detailed enough and thinking I am making things too complex. I feel I will learn how to balance this with time.