One A Day
App Design
TOOL: Figma
ROLE: UX designer, designing the app and its 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 problems who are looking for a safe space and community while recovering.
Problem definition
Judging from a personal perspective, people recovering from depression and other mental health issues often experience a feeling of loneliness and isolation as they're unable to share their small wins with friends and family, who do not understand the nature of their problems. That is what One a Day can help with: it provides a safe space for people dealing with similar issues to support one another on their path to recovery. It is based on the gratitude practice, which has been shown to be an effective tool in mental health therapy.
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?"
"Who do I see as our biggest competitors?"
"What do our primary users need the most?"
After brainstorming we came to a conclusion that a mobile application would be the best tool to help us resolve the problem because apps, compared to websites, are portable and convenient as people carry their phones everywhere. As a result, when our users need to write something quickly or they are in bed and do not want to forget something they want to share, an app is a great tool to do that. Of course, a mobile website would also meet these requirements, however, we would like to offer additional features, such as reminders, which are only available in native applications.
When I considered our competitors, I discovered that, while we do not have a direct competitor, gratitude journals do exist. Nonetheless, they are either offline or cater to a different, more general audience and would not be appropriate to support vulnerable people.
To answer the third question, I decided to conduct interviews in order to fill the knowledge gap about potential users' needs and whether the product is viable. Thanks to the feedback, I was able to visualise the app's most critical features, which will be presented later, and confirmed that people who are struggling with mental health would like to be supported in their journey to recovery. Furthermore, the interviewees agreed that they would like to use a convenient gratitude tool because they sometimes struggle to maintain a consistent gratitude practice.
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 to collect all of my ideas for potential features that would address users' needs. After some brainstorming, I was able to create the initial digital designs for the One a Day app, with four pivotal features being:
Feed
Feed allows users to see other people's posts and interact with them through hugs and comments. This offers a sense of belonging and community for the users and encourages them to support each other.
Calendar
The calendar is designed to resemble a physical diary. It allows users to view all of their posts, public or private, on the date they choose. This allows users to reflect on the happy moments in their life.
Chat
Chat allows users to communicate with others in a more private setting, directly within the app, eliminating the need for another tool. We hope this would help users build meaningful friendships.
Reminders
As many people mantioned that they struggle to stay consistent with their gratitude practice, we decided to add reminders which can help them stay on track.
Then, in order to determine whether or not users could successfully complete specified tasks within the app, I decided to create a low-fidelity prototype and conduct usability testing on that basis.
.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 organising the findings into themes, I made changes to the digital wireframes and based on them I 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's tasks can be completed quickly. Nonetheless, the study revealed two issues concerning the feed:
Feed
1. The top green bar of the feed did not feel finished.
2. The app lacked 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 identity. Now, users can 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 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 initial app designs were completed, I started working on designing a responsive website. For now, One a Day website has three goals. To display the One a Day's features and to introduce the team along with their reason to create the One a Day app.
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.
Takeways
When starting Ona a Day project I must admit I was overwhelmed with the depth of the problem and the size of the project. However, I learned that breaking down the tasks and tackling the project step by step allowed me to stay focused and deliver a high-quality product. I now feel more confident in my ability to work on projects of all sizes. Furthermore, working with users made me realise how important brand identity is, which led me to believe that having a more in-depth understanding of marketing would be beneficial so I could provide more guidance to the client.
What would you have done differently? Looking back on the project after some time has made me realise:
-
I now believe that the interview questions I asked were unintentionally too suggestive, increasing the likelihood of interviewees answering the questions the way I wanted. If I were to do it again, I would construct the questions differently so that the data is not manipulated.
-
I should have spent more time considering the brand's identity. This would allow me to avoid the visual contradictions in the app and website. After considering what we want our brand to represent, we decided to improve some visuals so that the One a Day app conveys a friendlier rather than elegant brand.
-
I would not use any "lorem ipsum" in the hi-fi prototype because it resulted in some design layouts being too small for the actual content. Furthermore, I believe that using "lorem ipsum" may have hampered the quality of the usability study because it discourages valuable and thoughtful feedback, which I could have used to create a more meaningful user experience.