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.
“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.
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.
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
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.
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.
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.”
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.
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.
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.
- Users used the ‘me’ button as an intuitive ‘home’ and successfully applied their own logic to interact with the interface
- All our users reached the objectives
- We observed adding the second item to Breakfast was done quickly and efficiently, also the goal update was not difficult
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.
- Preece, J., Sharp, H., Rogers, Y., (2015). Interaction Design: Beyond Human-Computer Interaction 4th Edition
- Knapp, Zeratsky, Kowitz, (2016). Sprint – how to solve big problems and test new ideas in just five days.
- Usability 101: Introduction to Usability: Article by Jakob Nielsen. (2012, January 4). Retrieved from https://www.nngroup.com/articles/usability-101-introduction-to-usability/
- Making and Breaking UX Best Practices: Article by Brendon Cornwell (2015, January 6). Retrieved from https://www.uxbooth.com/articles/making-and-breaking-ux-best-practices/
- The Magic of Paper Prototyping: Article by Nick Babich. (2018, September 2). Retrieved from https://uxplanet.org/the-magic-of-paper-prototyping-51693eac6bc3
- When to Use Which UX Research Method: Video by Kara Pernice NNGroup (2018) Retrieved from https://youtu.be/OtUWbsvCujM