03 – Designing Improvements, Usability Tests on Paper Prototype

by | Dec 16, 2018

In the third blog post, we will show how we applied principles of design thinking, problem-solving, and critical thinking to construct a low fidelity prototype of a solution to address a user needs. We will also present iterations of the prototype up to the final usability test.

Intro

“The only way to high-quality user experience is to start user testing early in the design process and to keep testing every step of the way”

—  Nielsen, 2012

We have started a few weeks ago with testing the original app, the competitors’ apps and finally we are on the stage to re-design a couple of functions of MyFitnessPal and perform the usability tests.

Starting point

We have produced a series of low fidelity prototypes of the two chosen functions. This vertical prototyping phase started with ‘to-be’ tasks and evolved during iterations. Our main goal was to improve the consistency, work on recognition and apply the minimalistic design.

Figure 1 - Tasks TO-BE
Figure 1 – Tasks TO-BE

Crazy 8’s

We used the “crazy 8’s” technique to generate ideas. We produced a number of different ideas regarding the two tasks. My ones were focused on diary screen and followed Jake Knapp 8x60sec advice:

“take a favourite piece from your ideas and ask yourself, what would be another good way to do this.”

— Knapp, 2016

The result is below in Figure 2

Figure 2 - Crazy 8
Figure 2 – Crazy 8

First paper iteration

“By their nature prototypes involve compromises: the intention is to produce something quickly to test an aspect of a product”

— Preece, Rogers, Sharp, 2015 – in Interactive design, prototyping section.

We have worked on the first paper prototype, however, after some time, we’ve realised we have put all our ideas from Crazy 8’s aside and followed well-known solutions. When we looked at our work critically, we had to admit it was a failure, and the work needs to start from the beginning.

Figure 3 - Paper Iteration 1
Figure 3 – Paper Iteration 1

Second paper iteration and Marvel App

We both prepared a paper to Marvel prototypes to explore different ways of tackling the task challenge. My ones were focused on the diary section and solving the problems identified by research and survey.

Figure 4 - Paper to Marvel
Figure 4 – Paper to Marvel

This phase was explored in deep by Bronwyn, she tested different tasks and features with the users.

Figure 5 - Bronwyn Iterations
Figure 5 – Bronwyn Iterations

Findings, pre-test and conclusion

The official International Organization for Standardization (ISO 9241-11) definition of usability is:

“the extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”

— ISO 9241-11:2018 (en)

Based on the problem identification and survey we improved the prototype before the final usability testing. Part of the paper prototype iterations was dropped due to its inadequacy to the ‘to-be’ task models.

  • Primary and secondary functions are not separated/distinguished – we divided the app into 3 main sections and put the secondary information further down in the information architecture.
  • Despite the experience level the users having difficulties adding meals to the diary.
    The lack of visibility status causes confusion – we unified top and bottom menu and the system status become visible for the user
  • The accelerators were forgotten by experienced users and not used by new ones – instead of working on accelerators functionality we decided to build the logical architecture first.
  • The information in the app is against the logical order of the users – we shortened the steps of the tasks and reduced the number of possibilities to complete them (by removing confusing and often forgotten accelerators and building the home screen based on user needs not the business needs)
  • Better exercise tracking – was mentioned in the survey, but we did not include this in the scope as the function is related to other apps synchronisation with MyFitnessPal
  • Visual efficiency regarding calories, reports and nutrition – we re-designed the main screen to improve the legibility and visual absorption of the information

We have also performed a pre-test with one user to double check the prototype and work on our test facilitation procedures. During the pre-test, our user pointed out the difficulties of reading low-fidelity sketched prototype.https://www.youtube.com/embed/wyhvi0ue8mc

Figure 6 Video pre-test

Final user testing

We created a low-fidelity prototype in Balsamiq, set up the recording and got the notepads ready.

Figure 7 - Balsamiq
Figure 7 – Balsamiq
Figure 8 - Marvel Final Prototype
Figure 8 – Marvel Final Prototype

We were finally ready to:

“Observe what the users do, where they succeed, and where they have difficulties with the user interface. Shut up and let the users do the talking.”

—  Nielsen, 2012

The method chosen for conducting the usability test was based on behavioural observation supported by the attitudinal interview on the end.https://www.youtube.com/embed/OtUWbsvCujM

Figure 9 – When to Use Which UX Research Method – Kara Pernice NNGroup 

We asked users to think aloud during the test. We took the notes and video of the tests for further analysis. The Google survey filled by all participants was a final part of testing.https://www.youtube.com/embed/cbzvOHdVNlA

Figure 10 – Final User Testing – User 1https://www.youtube.com/embed/317Jj4jZqxw

Figure 11 – Final User Testing – User 2https://www.youtube.com/embed/2icC94GAEFk

Figure 12 – Final User Testing – User 3

Observations and empathy map

We have swap the roles of interviewer and note taker and then combine all notes into pros, cons and suggestions.

Figure 13 - Notes from the Usability Testing
Figure 13 – Notes from the Usability Testing

Did we meet the 3 interface main outcomes?

Was it easy for our users to become familiar with the interface? Did they reach their objectives? Did they learn after the first task and applied the new knowledge during the next task? The empathy map contains observations from all tests. We can see the main points were achieved.

  1. Users used the ‘me’ button as an intuitive ‘home’ and successfully applied their own logic to interact with the interface
  2. All our users reached the objectives
  3. We observed adding the second item to Breakfast was done quickly and efficiently, also the goal update was not difficult
Figure 14 – Empathy Map
Figure 14 – Empathy Map

Despite the above, some suggestions regarding our prototype would need to be further explored, as the additional confirmation after goal setting and a more unified design of me/home screen.


References

By Sebastian Hartleib