Habit Tracker App
I created a habit tracking app with the help of two peers based a design challenge for my User Experience Class (Fall 2023).
Design Challenge: You have been hired to create an application, website, tool, etc. that will allow customers to perform the activities most important to them when seeking to fulfill health and wellness needs.
We used the iterative process of Scoping, Research, Ideation, Design, Validation, and Iteration to create a mobile application that makes forming habits interactive and exciting.
We began by conducting a brain dump where we collected topics and concepts that applied to health and wellness. From there, we formed two hypotheses based on trends and common themes we found:
- Unhealthy habits is a problem that we are solving for this audience because it is hard to implement and maintain multiple habits with the obstacles of life.
- Medical access is a problem that we are solving for low income communities because many countries/groups of people do not have access to health care.
We then created an user survey using Google Survey, where we received twenty-three responses to help us understand common wellness habits and priorities.
Based on our findings from the interviews and survey, we identified emerging patterns and behaviors. We used this information to create two user personas:
- Busy Bridgette wants to manage her time better so that she can stop resorting to unhealthy habits to deal with stress.
- The Sleepless Scroller wants to stop looking into social media every night because it is ruining his quality of sleep.
From there we formed “How might we…” questions to understand what problems our application should resolve. We found that many solutions relied on the user changing or implementing a behavior, so we began of thinking of ways to make the experience fun and gratifying.
We then began forming rough sketches to construct the functionality and content of the application, using the research and analysis we conducted prior.
To further develop our application, we created a sitemap to enhance the functionality and features created in our sketch. The sitemap allowed us to make our idea and features more complex, which helped us ensure that all our users needs would be met.
Based on the sitemap, we created the user stories and flows for both of user personas. Busy Bridgette User’s Story became “It’s been a long Day. She received a notification for her daily log in about an hour ago. Since she has some time in between classes, she taps the notification. She already made an account, so she goes straight into the home page. She then goes into journal and creates a new entry. She answers a prompt. Reflecting on her day so far. She hits enter and swipes up on her phone to close the app”. Using her user story, we created the user flow:
The Sleepless Scroller User’s Story was “The Sleepless Scroller opens the app and lands on the login page. He enters his credentials and is directed to the homepage, where he sees his avatar. Curious about his avatar’s status, he navigates to the Avatar page. Noticing that his avatar is hungry, he checks the Fridge page and finds it empty. To address this, he proceeds to the Food section of the store to purchase some items for his avatar”. With his user story in mind, we created this user flow:
We then formed wireframes using Figma to create a prototype of our design. The original homepage is shown below:
We then created a test use case which would test the main features of the application. Our test case was:
- Sign up for the app using email: test1@gmail.com username: user and password: test1
- Select the fox avatar
- Create a new journal entry using one of the “Mental Health Prompts”
- Select “What was relaxing about today” prompt
- Go back to homepage
- Enter your avatar’s house
- Buy your avatar a water
- Go back to homepage
We then used Axure to create an interactive prototype that would allow the users to follow the test case. Our prototype is shown below:
We then asked five people to try our usability test, where we found some confusion when using our application, such as
- Pencil icon for editing username and the plus icon for new journal entries were not clear enough, users thought pencil may create a new journal entry instead of the plus button
- Users did not grasp that avatar was a image of user, suggested we add more context so user was more related to avatar
- Long press to find a prompt on journal entry page was confusing for users, just clicked on it
Based on these factors, we modified our application until new users did not face the same problems as the prior users. It took about four rounds of modifications and test cases to achieve a fully functioning and passing usability test and found no confusion or challenges on our last user.
The iterative process is further shown in a PowerPoint, linked here: https://docs.google.com/presentation/d/1kQsUtLhE3K7koawShRHUD-Tvy4HXMCNfc9CXUeB45-w/edit?usp=sharing