Arden
For the 5th project of the course, The National Wellness Institute wants designers to create an app that helps users track their well-being, which they can use to share information with their wellness coach.
The tool can be focused in any category related to personal well-being, such as (but not limited to): exercise and fitness, eating/diet, meditation, time management, etc.
The only requirement is that it tracks the user’s progress and pushes them to commit to a healthier lifestyle.
The UI should reflect a fresh, updated image.
We were meant to work on this project individually which I was excited about because I would be showing what I have learned throughout the Bootcamp. We also had four weeks, split into two weeks for UX and two weeks for UI to work on the project. I also used Figma as the primary tool for the project.
I have always struggled to track my period, whether it be because the apps don’t give enough or it gives too many different topics to track to it being down-right ugly.
A period indicates the person’s well-being; if someone usually has a cycle of 28–30 days and one month their cycle extends to 37+ days, it can mean a serious health condition. That is why tracking and making sure nothing is out of the ordinary is vital.
Arden is designed to accurately help people track their period/symptoms while answering questions about their bodies in science-supported articles. They can also store their data, found on the profile page, to show their doctors. It is also an app that tries to be as inclusive as possible, constantly updating to keep up with society and allowing the users to communicate with each other to share their stories or problems.
I first started by finding who my competitors were. In this case, they were Flo, Clue, and Ovia.
I used a Feature Comparison chart to analyze the features that users expect in my app and features my competitors lack to distinguish my app from others. I realized that a critical component that was missing was the inclusiveness with the LGBTQIA+ community. I initially did not even think about how vital inclusiveness was regarding period or symptom tracking. On the other hand, a component expected by users is an area with their cycle and symptoms reports.
From there, I jumped into my Brand Comparison. I noticed that they all had a similar range of authority as in period tracking, symptom tracking, and pill reminders. Where they differ, is that they all distinguished themselves when it came to their target audience. Clue targeted menstruating individuals, Flo with menstruating women, and Ovia with women trying to get pregnant.
To add to that, I created a Market Positioning Map, placing my competitors and my current and future brand in a map showcasing where they stand in my target audience’s eyes.
From that research, I came up with an idea of what I wanted to ask my community to gain more knowledge about the topic. I began to fill out the Lean Survey Canvas, which helps ask the right questions in your surveys. I sent it out and originally only received 15 responses, but I decided to leave the survey open for an extra day, and luckily I did because it went from 15 to 26 replies:
40% Female
40% of the respondents use the Flo app
80% also mainly track their symptoms
100% would like a discussion board for users to use.
As a result of the survey, I had more questions that needed more detailed responses. I dived into the interviews. I interviewed five individuals with different backgrounds. I received a ton of crucial guidance, but the top 4 comments that stood out to me were;
“It would be cool to share information with my Doctor.”
-Ilanis
“I mainly only use google when I have any questions or concerns.”
-Helen
“I hate that I have to pay for the features that I actually want to use.”
-Marissa
“I want to be included in a way that’s not being pushed down my throat.”
-Michael
From all of that data I gathered with the interviews and surveys, I did an Affinity Diagram, where you post all the information collected from the surveys and the interviews onto a board and group them by topics. There, I saw what direction I was heading to and a link in the LGBTQIA+ community being dismissed again. Clue is the most inclusive app right now, it is still not seen much in North America because it is based in Europe, which creates a lack of support and inclusiveness for the community here.
With the help of the previous tools, I created my User Persona, Inclusive Izzy. Someone who loves their friends and family. They always make sure nobody feels left out. Izzy also takes great importance in their health/care.
Using Izzy as a primary focus, I was able to ideate a few features and place them on a map by priority using the Moscow Method.
From there I created a user flow, a happy path of what the user would do when first entering the app. It is self-explanatory but it is better seen in the actual prototype.
With the help of the user flow, I started sketching out the screens of the app. Looking over them makes my eyes hurt, but then again that’s the point of sketching them, just a basic overview of what we want our app to look like. From there only up.
I tested the low fidelity sketches with 2 people and received back some feedback. First, they both wanted the profile screens to be more of an open concept and not so many drop-down options. For a more positive comment, they really liked the first screen, when opening the app, they thought the design was cool.
I then went to create my Mid-Fidelity Wireframes. It took longer than expected because I didn’t realize really how many icons I had to design. Luckily though. I had the plugin Iconify and was able to use a few of those for some of the icons. When I had to do the icons for the Sex-Drive section, I struggled to find icons for that topic. I went to YouTube to listen to some music and an ad came up with a very beat-up car, and then it clicked. I decided to use a beat-up car for a low sex drive, a nice clean car for a high sex drive, and from there followed the rest of the theme.
I tested it on 4 people and received A LOT of feedback some important ones being:
“You should make buttons bigger because the small drawings for the days of ovulation or period aren't really visible.”
“The Yes or No doesn’t sound nice. Try different wording.”
“What if I don't remember the last day of my period?”
“What is the chart about?”
“Maybe try using different shapes just in case they are color blind for the graph.”
Based on the insights, I made some changes that will be seen in the never-final prototype.
I then started working on the UI. I chose 4 brand attributes, Acceptance, Comfort, Freedom, Happiness. As a result, I came up with a mood board, which I tested on 4 people. I did get the brand attributes or synonym of them as the responses. I also received some feedback, like changing some of the pictures out for other ones or erasing some altogether.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
With the color palette and ratio done I began collecting information to build my Style Tile. I did some further research for my font and since this would be an app used by many people who speak different languages, I wanted to use a font that also translated well with different characters. That’s why I chose Montserrat. There you could also see a few icons and buttons.
For the logo, I had a bit of a process. I started out with a compass because, technically you're tracking your period, and to track you use a compass. I tried a few designs but didn’t like any of them. Then I tried a drop for the flow but not everyone would be having a period so I wouldn’t be inclusive in that sense. Then I started drawing random patterns with one line and thought of two faces in one. That’s where I came up with the two faces and added a few circles to add more layers and dimension. Then I changed the circles for each color of the color palette and bingo!
With all the fantastic feedback I received from the Mid-Fidelity, I came up with the High-Fidelity prototype. I'm very proud of this project and how it came out.
