One A Day
App Design
TOOL: Figma
ROLE: UX designer, designing the app and it's product website from conception to delivery
DURATION:
January 2022 -March 2022
Project Vision
The product: One a Day is a positivity journaling platform for people dealing with mental health issues.
One a Day's goal is to create a social platform where you can share various daily objectives with your friends.
Challenge
According to surveys such as the survey of Mental Health and Wellbeing in England, only about one in every eight adults with a mental health problem is currently receiving treatment. However, research shows that social connection improves mental and emotional well-being. Because of that, I want to help people who are struggling with mental health by designing a social journaling platform where people can form communities and focus on the positive things that happen every day.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Getting Started
I started by asking myself some initial key questions:
"What is the product and who is it for?"
"Who do I see as our biggest competitors?"
"What do our primary users need the most?"
Then, I conducted users interviews. The feedback from the interviews revealed that people who are struggling with mental health or are interested in mental health would be open and willing to work towards building a mental health support community if they had access to an easy-to-use tool to help guide them. The feedback also helped me better understand the users I'm designing for and their needs.
Meet the users
Persona: Sam Lee
Problem statement: Sam is a divorced caregiver who needs to find people who understand his issues because he is experiencing a lot of anxiety and loneliness in his daily life and wants to improve his mental health.
Persona: Veronica Williams
Problem statement: Veronica is a university student who needs to practise gratitude and share it with the community in order to maintain consistency because she wants to improve her mental health while waiting for therapy sessions.
Wireflow
To begin the design process, I drew paper wireframes, and after ideation, I created the initial digital designs for the One a Day app. Then, in preparation for usability testing, I created the low-fidelity prototype.
.png)
First usability study
The first usability study was an unmoderated usability study with 7 participants. One session lasted about 30 minutes and was divided into three sections: closed-ended, general questions, open-ended questions, and a system usability scale. The research questions were created to determine whether or not:
There parts of user flow where users get stuck.
There more features that users would like to experience in the app.
Users think the app is easy or difficult to use.
After analysing and and organising the findings into themes, I made changes to the digital wireframes and based on them, created a high-fidelity version of the app with the following changes:
Reminders
While reminders are an important feature of the app, the study revealed that users struggled to find them. They specifically searched for the reminders in the calendar, so in addition to putting them in the hamburger menu, I added a banner in the calendar that directs users to set up reminders.
Before
After
Menu/ Search
The study also revealed that some users had a difficulty in finding the menu from which they could access the app's settings or their profile, and that there was no way to find other users. To make the app easier to use, a search feature was added to help users find other users, and the profile icon was replaced with a hamburger menu to emphasise that there is a menu at the top of the feed.
Before
After
Second usability study
Despite the fact that there were few changes in the low-fidelity phase of the design process, I decided to conduct a second usability study on the high-fidelity mockups and test the app's visual design to determine whether or not it resonates with the community I am designing for. This study was also an unmoderated usability study but with 10 participants. One session lasted about 20 minutes and was divided into two sections: closed-ended, general questions and open-ended questions.
After the study when turning observations into insights, I was assured that the app is user-friendly, easy to learn, and user tasks can be completed quickly. Nonetheless, I identified two issues that needed to be addressed.
Feed
The study revealed that for some users:
1. The top green bar of the feed did not feel finished.
2. The app lacks a strong brand identity.
As a result, I came up with a method for solving two problems with a single solution. So the top bar looks finished, I placed the 'OAD' logo in the centre of the green feed bar. It also addressed the issue of brand visibility. Now, users see the logo every time they visit the feed, which can help them with remembering the brand. Furthermore, this logo has an additional feature. By tapping it, users can return to the top of the feed after scrolling down.
Before
After
Following the second usability study adjustments, the project was completed. It was then handed over to a developer, who is currently working on it. You can access the hi-fi prototype by clicking the button below.
Website design
After the app designs were completed, I started working on designing a responsive website. Initially, the One a Day website has two goals. To display the One a Day app and its features, as well as to introduce the team and the reason for the One a Day app's creation.
To begin the process, I created a sitemap to ensure a cohesive and consistent experience across devices and to guide the organisational structure of each screen's design.
.png)
Following that, I created both paper and digital wireframes. After they were completed, I continued developing the website and began the high-fidelity designs. The designs for screen size variation included mobile and desktop in order to meet specific user needs of each device and screen size.
