Interaction Design Capstone Project: Fitness App
Overview
This 10-week project is part of the Interaction Design Specialisation from University of California, San Diego, on Coursera.
In this post I am summarising the content of the different weekly assignments and the design process followed to develop Motion, the fitness app that will transform your life.
Getting Started
The course provided three different briefs to base the project on:
- Time: Redesign the way we experience or interact with time
- Change: Design an interface that facilitates personal or social behaviour change.
- Glance: Find people and design a personal dashboard tailored to their needs
I selected ‘Change’ which would also integrate ‘Glance’. The project specifically would focus on Changing to a healthier lifestyle by practising physical activity
The reason to choose this design idea, was based on the testimonies of some of my relatives and friends. They share a common characteristic: A wish of improving their sedentary lives, feeling better and being more active. There is another common point though, which is the difficulty of being able to accomplish that life change due to lack of time, motivation or resources, so they end up abandoning this wish as if it was an impossible goal. This frustration lead to the idea of designing a product that would offer an easy and simple way for people to change to an active life.
Design Process
The design process followed to develop the project had six phases, from user research to user testing, that helped guide the project and make design decisions.
User Research
The main purpose of the research was to understand users, find pain points and discover their needs while they practice physical activity. Observations and interviews were conducted with three participants at their sport centre and also at one of the participants home.
The main breakdowns encountered were:
- Lack of information on healthy practices when sitting for long hours in the same position.
- Confusing, slow and complex method to get a personalised workout at the sport centre.
- Rudimentary system of carrying away your workout on a paper.
- Hard or non-existing way to keep record of your progress.
- Lack of interest after some weeks due to practising same generic activities.
- Lack of interest due to not having an sport partner.
Ideation
After analysing the users testimonies and observations a brainstorming phase took place to originate ideas that would solve users frustrations.
Some of the ideas were:
- People subject to demanding jobs (mental or physical), would need a way to know how to take care of their body before it starts aching or their minds begin to stress.
- First time gym users need a way to visualise their exercises to execute them correctly.
- People who want to change their life style need to be able to start practicing exercise easily and straightforwardly to help maintain that change.
- People who want to practise sport and do not know many people to go with, need a secure and reliable way to find other people to practise sport with.
- People who practise sport to look after their health, need to be able to have an adapted workout and to control their body levels.
- People who practise physical activity need to be able to access a unified tool to listen to music, read pulse and see the exercise.
Point of View: ‘Once someone starts a change to a healthier lifestyle, the actual hard part is to make it a regular habit. By having an engaging tool that offers personalised exercises, alternative activities, easy progress graphics and provides a community to contact other members, users will feel motivated to practise their new routines and therefore accomplishing their goals’
Market Research
During Ideation the current market was analysed for both, inspiration and product information. The project had to be different to what was already out and therefore, was important to see what was being offered and to find users needs that were not being covered.
Overall the products and features available were wide but there was still room for creating something new which offered a solution to all the particular needs that were found during the user research.
A simple diagram was made to quickly visualise and highlight pain points and the possible solutions that the app would offer to the users.
Storyboards and Paper Prototypes
Storyboards help to easily visualise a problem in a specific context, and describe in a simple way a complete story about how the product is going to make positive changes in the user’s lives.
Once the product was defined, two storyboards were created to describe different scenarios where users were having a problem or experimenting frustrating situations to which this product would provide a solution.
The initial paper prototype was a series of screens that showed the main ideas of the app and had enough features so it could be tested.
Heuristic Evaluation
Jakob Nielsen’s 10 general principles for interaction design were used for the evaluation with three different people, one of them in-person and the other two remotely. This was one of the most important parts to detect errors early in the process. The feedback received was really valuable and it helped to fix visibility, support and consistency issues.
Planning
A plan was designed to organise the different tasks that needed to be finished during the upcoming weeks, including an interactive prototype, A/B testing on different platforms and visual design.
Hi-Fi Prototyping
The next design evolved into a high-fidelity interactive prototype and it was developed using Figma and InVision.
New screens were created and some functions and features were redesigned based on the heuristic evaluation.
User Testing
At this stage the prototype was evaluated to test its usability and detect type of errors. The hope was that the app would be intuitive, easy to use, and would offer useful features to achieve users goals.
The users were 2 people (one male and one female) within 40 to 50 years old, who currently practise some kind of physical activity in order to change their sedentary lifestyle. Both of them frequent users of mobile apps.
Overall both participants gave positive opinions regarding the ease of use of the app and found it to be a useful tool for encouraging people to practise physical activity.
Participant 1 highlighted that having personalised workouts with clear videos to start exercising straightway would meet his personal needs.
Participant 2 felt that being able to see activities close to her location on the map was a great tool that would facilitate joining activities without much planning ahead.
In terms of usability there were some issues found. The most frustrating part was the small text in some areas, the lack of clarity of some buttons and not having a wider option to create new goals. All of these would be addressed on the next design iteration.
A/B Testing
To measure user behaviour on the prototype an A/B test was run in two very distinct but complementary platforms, usertesting.com and analyticsgoogle.com.
Since playing the video workouts is a key feature of the app which should encourage users to practise them, the focused of the tests was finding out which design had a higher click rate.
Usertesting provided quality insights from four users who recorded their interaction while using the app and practising the ‘think aloud method so apart from getting the number of clicks, all their comments could be heard.
Changes based on user evaluation:
- Change the name ‘agenda’ to ‘calendar’, as this is how users were referring to the agenda page.
- Change the name ‘forum’ to ‘community’, Participant 2 said: “forum sounds a bit old school, and community feels like people like you”
- Two users mentioned that the words ‘cancel’ and ‘discard’ to cancel an activity created confusion. Another user said ‘I’m going to cancel zumba’ and clicked on ‘discard’, so it was clear that this word needs to be changed to avoid errors.
- Create a separate page for goals, which are now inside the profile page. Participant 2 mentioned: “I would not expect to see the goals under the profile page..”
In terms of click rate, Design B had a higher number of clicks and was more noticeable, therefore was chosen for the next iteration.
On the other side, the test in google analytics measured data from 22 people, and it showed specific metrics, such as page views, session length, unique visitors or demographics.
7 out of 10 users from design A clicked the play button, while in design B the result was 8 out of 12. The chi-squared test was also calculated, which results were not conclusive, so more testing with a higher number of user should be run in the future to determine if the difference is significant.
Final Product
After all these iterations, the next step was the fit and finish details, where the visual aspect of the design were decided. Colour palette, images, icons or typography merged into a cohesive look. Material design guidelines were followed in order to create a consistent interface.
Regarding the name, several options were considered such as Activify, Switch or Active Spot. But after some more brainstorming and analysis, Motion would be the selected one for its clear meaning and its direct relation with the core feature of the app: To set people in motion.
The final result is Motion, an app that facilitates the change to an active and healthier lifestyle.
With Motion, users can exercise at home with personalised workouts that best fit their needs, find activities based on their interest and location, talk to a virtual trainer to receive healthy tips and assistance or meet with other members of the community, among other relevant features. All this is ready in the users hands.
Thank you for reading and please leave your comments.
Eva
Link to prototype:
Thank you Professor Scott Klemmer, Professor Elizabeth Gerber, Professor Jacob Wobbrock, and all the coursera peers who evaluated my assignments and helped me with their valuable feedback.
Resources: Images of people and device mockups from Wordpress and Wix free catalogue. Splash screen background from superdevresources.com
