Fitness gamification app design

This project was a group work for a course in "prototype development for mobile applications". This included both user research, sketches, hi-fi prototypes in Adobe XD, as well as a functional prototype programmed in Flutter using Google Maps API. Although it was a group project, the design shown here is the result of me improving the design by myself after the course was finished.

Problem description

Sometimes people tend to get stuck going on the same walk around the block. In addition, many people who walk regularly are not aware of all the great walking trails and routes that are available in their area. This is especially true for people who live in new areas or who have busy schedules. As a result, they may miss out on the opportunity to explore new places and get more out of their walks.

By gamifying the excercising experience and pushing the user to explore the neighbourhood, we can encourage more people to go on new daily walks. Our approach is to suggest a random location (on a road) for the user to "collect".

Process

First, I did a SWOT analysis of competitors similar to my app idea. Then, the project group of 4 people discussed our individual ideas for the app and brainstormed together. Later, we started sketching lo-fi/mid-fi designs in Adobe XD. Below are some of the sketches (in Swedish) that were created before getting into the visual details.

User testing with scenarios

I conducted five user tests on the lo-fi/mid-fi prototypes remotely. In the beginning, I asked a few questions about their walking and excersicing habits. Below are some of the main insights:

• All testusers wanted to "add a friend" to the walk, as their first action, instead of first selecting the walk they were going to do.

• There was some uncertainties regarding the point system and how the points were calculated

• Some users prefer seeing their friends walking score in order to compete with them, while other's feel it could be embarassing and prefer not to show it.

• There were some uncertainties regarding the distance that the user chooses for their walk. User's did not know if it was X km one way or all together X km

• Overall, the user's liked the app idea and could see themselves use the app now and then to explore new roads to walk

Final result

After the user testing, I, together with other group members designed the hi-fi prototypes in Adobe XD. I also designed the logo and app icon. When the design was finished, all group members started implementing the design by programming in Flutter, working in teams of 2.

A while after the course assignment was finished, I continued to work on the design alone in Figma. This included improving the visual design of the main screens to be more proffessional and to use more of the Google Material Design system. I also designed the dashboard, as it was not designed before.