UX/UI CASE STUDY:
Period tracker and well-being responsive web app
My Role: UX researcher and UX/UI designer
When: Oct 2022 - April 2023
RESEARCH & PLANNING
My whole design process was based on the double-diamond strategy and I began my research to understand the potential problems and try to find solutions.
PROBLEM
Many women worldwide have a problem understanding their bodies, have no knowledge of how their menstrual cycle works, and don't know what to do to feel better in their bodies. Because of that, they can feel all the time unfit mentally and physically.
SOLUTIONS
FitCycle will track women's menstrual cycles and will give correct information about how the menstrual cycle works. With the help of professionals and doctors, FitCycle will provide diet and workout suggestions tailored to the changing hormone levels through their cycles. By inputting the typical cycle length, period duration, and the date of the last period, the app will calculate where the user is in her cycle and give daily, tailored, information on physiology. The app will be very personalized and update automatically when noted menstruation cycle issues occur. Users will have the possibility to see weekly/monthly/yearly raptors and charts to help them to spot relationships and patterns.
The platform will provide women worldwide with education, tools, and support and help them be fit, prioritize, and improve their health and well-being.
COMPETITIVE ANALYSIS
The most straightforward starting point was to take a list of my competitors. I downloaded and conducted an extensive analysis of two various platforms. I used their product personally, and I analyzed their functionalities and constraints, I check the user reviews to try to understand their users, why they are hooked to the app, what works in the app, and what doesn't, and lastly, I conducted SWOT Analysis of my competitors.
USER INTERVIEWS
After that, I conducted four interviews, in-person and remotely, with users (ages 28 - 40) to find out what users look for in period tracking and well-being apps, what motivates them to use those apps, their needs, affordance, and pain points. I used an affinity map to group the feedback that I got and this helped me better understand the challenges users face and allowed me to design solutions that address their specific needs.
AFFINITY MAP
Clear trends began to emerge when I synthesized the data from my interviews.
So my first impressions were that women are interested in those kinds of apps, and need to be free, simple to use, and nice visually. My interviewees didn’t think much about the rules of data security when signing up but they were also not willing to give their personal information so easily, they wanted to be able to personalize the profile(workouts, nutrition).
There was one thing that brought my biggest attention. My interviewees were not as interested in nutrition features as I wanted to be. For them, this feature was a little bit too detailed and too overwhelming, but they still know how important is to have a proper diet that offers appropriate vitamins and minerals needed at various stages of the cycle and in daily training, which helps overall well-being. Because of this, I decided to have a simple recipe feature instead of detailed nutrition lists.
USER PERSONA
The data I collected from my research helped me craft 2 personas embodying 2 different women archetypes in my target user group: Keeva and Laine. I included an explanation of who they are, their motivations, needs, goals, frustrations, etc.
DESIGNING THE SOLUTION
JOURNEY MAP
I created user journey maps to identify all the touch points, pain points, and feelings the customer might have, initially from opening the app - onboarding, signing up, opening their profile, checking the recipes, etc. I also enlisted options on how to solve the problems in the app.
USER & TASK FLOWS
Based on my research, I hypothesized that a few specific tasks and those short, simple user flows would be key in getting users to engage with my responsive web app without getting distracted or overwhelmed along the way.
Task Flow:
Open app
Log last period dates
Set up a Reminder
Task Flow:
Open app
Log in
Locate the Diet feature
Edit diet, allergies, etc.
Choose a dinner recipe
INFORMATION ARCHITECTURE
Before designing my first initial low-fidelity wireframes I created information architecture followed by a digital closed card sorting on OptimalSort. I asked 7 participants and before letting them do the task I explained what the app is about but also I did not give them any ideas of what topic should be placed in which category. I was surprised by some of the answers, but I think most of the topics were placed in original categories, after that, I made some changes to my design.
Phases- I originally placed them in the dashboard, but most of the participants added them to the calendar.
The insights category caught my special attention. Many participants put random cards over there which made me wonder if this word was understood correctly. I decided to change it to Content.
EARLY SKETCHES
WIREFRAMES
I started sketching with pen and paper and I created multiple versions of the FitCycle low-fidelity wireframes for all the necessary screens and then I created mid-fidelity wireframes.
USABILITY TESTING
I conducted a remote usability test with 6 participants from the target audience. I used Affinity Mapping and Rainbow Spreadsheets to gather all the info and to define recurring problems encountered by testers during completing different tasks. In the end, all errors were ranked in order of severity.
Errors:
Finding a reminder feature - testers didn't know where to find this feature and also thought the bell on top was only for notifications. I decided to add a possibility to set up a reminder on Add a Note page or by clicking the day in the calendar, or in User Profile settings.
Errors:
The next high-severity problem was misunderstanding the word Content. A few participants stated that it wasn’t clear to them, and they started the task only because of an intuitive book icon, and they suggested hanging for the world - Articles.
The next problem was the registration of users' allergies. Testers were looking for this option in the user profile so I decided to add it also there.
Vocabulary in filters in the Diet feature was not clear so I decided to change it a little bit.
PREFERENCE TEST
After that, I also conducted a Preference Test of the Home Page through Usability Hub. After 10 responses the preference test result was 50%-50% so I continue testing on more participants and the result changed to 70%-30% (14-6) for a “new” design.
DESIGN LANGUAGE SYSTEM
After implementing all the recommendations after usability testing, and changing the design of my wireframes, I started to create high-fidelity wireframes and transformed them into a clickable prototype. I created a design language system.
ACCESSIBILITY CHECK, TESTING & IMPLEMENTING FEEDBACK
I also conducted an accessibility check, after which I had to make a few necessary changes such as:
Few colors for better ratio contrast
Changed text in placeholders in sign-ups and log-in
Added password strength indicator on the sign-up page
Changed heart icons for better visibility
Size of some fonts
I also asked for feedback from my fellow colleagues from my online school. I asked them to explore the platform on their own. The feedback was informative and I changed:
Progress line to 1/5 indicator in Onboarding pages
Changed the whole Free Trial information page
Added explanation of menstrual cycle diagram
I added an explanation of why exactly those recipes or workouts are suggested to the user on the Diet and Workout pages
Disabled and greyed out some features to show the difference between free and Premium subscription
Changes in a Diet feature:
heart icons
font size
added explanation of search results
color of icons in the bottom navigation
Changes in Sign-up:
text in placeholders in sign-ups and log-in
password strength indicator on the sign-up page
Changes in User Profile/Dashboard:
heart icons
font size
added explanation of menstrual cycle diagram
video progress line
Changes in Free Trial Page:
redesigned the whole page and added the difference between Free and Premium subscription
CONCLUSION
FUTURE IMPROVEMENTS & CHANGES:
Creating a well-functioning platform is an ongoing process and there is always room for improvements, such as:
Add fingerprints/face id recognition to the process of login in so it will be faster and easier. This will make the user feel more relieved of not forgetting the password and also that her data is safer/harder to hack into the account.
Add a “Share your data” feature, which will help users to share their data for example with doctors if they have some issues regarding their wellbeing. The users can decide exactly which data they want to share and send it by email. Quick and easy.
Add more filter variety to the Diet and Workout feature so the users can find exactly what they want and cater to different interests and preferences. This will keep the user more engaged with the app, users will be more likely to discover new suggestions and feel a greater sense of novelty and excitement in their well-being journey.
Add different languages in the settings
Ability to sync with iPhone Health app
Meditation feature
Possibility to set up a workout/diet plan and nutrition and calorie information.