From idea to results: a UX design case study

During the past few months I have been studying an interaction design course at the University of California, San Diego by Coursera. Using the process of design thinking I developed an application prototype for people who want to start a new healthy lifestyle and build up a sporty routine. In following, I shortly describe the overall design process.

YOUMOVE — Take the first step for the fitter version of you

Change can be difficult at times. To step out of the comfort zone and try new things require: strength, time, motivation and discipline. How can technology help people change their habits and fulfil their goals? The term change might mean exercising more, eating healthier or helping create a more sustainable environment.

Around this line of thought, I decided to center my capstone project on the design brief “Change” although it also merges slightly into “Time”. The other alternative design brief was about “Glance”.

Needfinding and brainstorming

The first step was to identify a target user and a need, which was a very important part of the design process. On the assumption that, there is no need for apps, that are not developed to fulfil its user’s needs. I focused on people, who want to start a new exercise routine but do not find time and motivation to do it yet.

To better understand my target audience it was particularly important to know the problem space I was operating within. First by myself and later through user interviews. This method enabled me to gather qualitative information directly from those engaged with the problem. During this process it was possible to test assumptions about my users, my hypothesis and my problem statement.

By observing the emotions and thought processes of real people, I could reframe the problem I was trying to solve in the context of target users instead of make-believe problems.

With these information in mind I came up with many ideas on how we could solve the recognised problems and meet the our users’ needs. I started to enforce convergence of those ideas into the design of a single, well-thought-out mobile app.

Storyboarding

To put a face on the collected analytic data I created Storyboards. By using the Storyboard method I easily visualised, predicted, and explored the user’s experience with the interface. It helped me understand how the users would flow through the app, giving me a clear sense of how to create a strong narrative. In this way I was able to walk in the shoes of the users, perceive their daily struggle and find appropriate solutions to their specific needs.

Here’s a short storyboard I came up with:

Paper Prototype & User Tests

My next step was to identify a persona, a problem, and the primary tasks necessary to reach a potential solution. Subsequently I developed a low-fidelity prototype for YOUMOVE, in which I illustrated the most important features.

With the prototype I was than able to explore the “test” phase of the design thinking process. By doing that I learned to measure the usefulness of the product before making modifications based on feedback and observations.

To do this I conducted four in-person user tests. Individual participant had to conclude five task scenarios. Once the tests were conducted, I summarised my findings from all the participants in a usability test report.

This phase was very important to understand and adjust major usability problems. Call to action buttons were changed, icons were labeled and a new information architecture was formed thanks to the feedback from the participants. Here is a glimpse of my paper prototype:

Interactive Prototypes

Following user’s feedback it was time to develop an interactive prototype. The interactive prototype was done with InVision. This is a very nice tool for this kind of work.

Coursera had also partnered with the company UserTesting.com, through which the last step of A/B testing was performed. This phase was very valuable for the final prototype. The test provided insightful feedback and became a very useful tool to test the functionality, design and user experience of the prototype. Participants gave their opinion about the interface and described aloud their thinking process, which incredibly helped me on understand how they interact with the prototype. Furthermore, I got a clear understanding of the differences between my A and B versions, and the users’ preferences about them.

Design rationale and final prototype

Due to the received feedback I decided to develop a simple interface with a straightforward navigation. During the user tests I noticed that some users seemed a little lost in the interface, so I adjusted some of the navigation buttons and call to actions.

I also decided to create a colourful app. Since almost all test users said they would prefer a more lively interface.

Another difference from the previous prototype is at the footer area. Instead of using only icons I decided to label them. By doing so, users won’t be confused by what the icons should mean. With this adjustment the app will be easy and intuitive to navigate.

Final thoughts

I finish the Interaction Design Course with important insights:

1. Start with user experience and then think which technology is more appropriated for your solution.
2. User interviews are the key to understand potential users. At the end of the day you want to build up a product that fits their daily lives and not the other way around.
3. Test your prototype as early as possible. This proved to be very valuable i. e. checking the functionality, the design and the user experience of the product before the final coding.
4. Lastly and the most important: You are not your user!

You can see my prototype here