Amlia is a dietary supplement tracker designed to:
help users track their supplement routine
remind users to take supplements
help users be better informed on ingredients and supplement information
Users struggle to add reminders for their supplements within the existing app navigation, and need to rely on other sources for more in-depth ingredient information, causing a sense of distrust and frustration.
By simplifying the existing process of adding supplements, adding a more intuitive reminder feature, and allowing users to access more in depth ingredient information, Amlia users will be empowered to safely and confidently improve their dietary supplement routine.
In the future we will observe fewer navigation errors in the usability of the application, and an increase in Amlia’s user base.
Catherine Crandall - Founder of Amlia
Interaction Designer and Project Manager
within group of 3 UX Designers
Alexa Barbosa - User Research Lead
Eric Pak - Visual Design Lead
I UTILIZED SKILLS IN
Rapid prototyping and iterating
PROGRAMS and Tools
Google Materials Guidelines
The Design Process
UX Research efforts were led by Alexa Barbosa.
Research was gathered through a screener survey to pin-point our target group for in-person interviews.
Alexa performed a competitive analysis on similar medical/supplement tracking applications (Mango, MediSafe, Medica, MyTherapy). She looked at app design, navigation, and usability to gather what worked well for users.
Finally, Alexa gathered user experience data through a task analysis. Users were asked to complete 6 tasks within the current Amlia application. Users completed a System Usability Scale survey to help our team measure the user experience of the application.
Balancing User Goals and Business Goals
After meeting with Amlia CEO, and analyzing Alexa’s User Research information, my team and I needed to balance User goals with Business goals.
Using Affinity Mapping as a tool, our team analyzed Alexa’s research findings, combined with our understanding of Amlia business goals to create a problem statement.
“Amlia users need a simple, more streamlined way to be reminded of when to take their supplements, as well as be informed of ingredient information and interactions. Users struggle with the existing app navigation in adding reminders for their supplements, and need to rely on other sources for more in-depth ingredient information, causing a sense of distrust and frustration.”
Using the problem statement and research findings, Alexa created a persona, Melony, to guide the team’s design. It is important for the team to affirm that each design decision is made to solve the persona’s problem and create a better user experience for the target persona.
My design process - interaction design
Based on user research findings, I knew users struggled to complete tasks aimed at adding supplements to their cabinet, as well as finding more information on their supplements. To begin my Interaction Design process, I needed to see where users were getting caught up.
Immediately, users have an unnecessary extra click to add a supplement to their cabinet, and it was difficult for users to find how to add a supplement to their cabinet. I wondered, why can’t Melony just add a supplement from the home page?
The Amlia home screen posed several issues for our user, Melony. Since our user is frequently on the run and busy, she needs a quick, intuitive, and efficient way to track and remember to take her supplements. It is important for Melony to have reminders to take her supplement throughout the day. It is also important for her to easily snooze reminders, or quickly note that she has taken them.
On the original Amlia app, our user must navigate 2 separate pages in order to mark that she has taken her supplement. I saw this as an area for improvement - make it faster and easier for Melony to snooze or take her supplement. Less clicks, less cognitive load, and less wait time for page loading.
I wanted to find out how other tracking/reminder apps approach home screen designs. I took a look at the apps below.
Because Amlia is a progressive web application, the home screen looks a lot like a web page. I concluded that Amlia’s homepage isn’t immediately as user friendly as other medical/supplement tracking apps are (thanks to competitive and comparative analysis.)
I organized a Design Studio* with my teammates to collaborate on design ideas, and make sure all teammates were on the same page. From the design studio, I would gather ideas to begin creating wireframes.
Initial WIREFRAMES - Home Screen
Addition of plus sign at top right
Move towards a more interactive mobile app appearance
Drop down menu to quickly view appointments in the day
Card sort of word ‘appointment’
After 2 rounds of usability testing with 5 participants - the main issue that needed resolving was resizing the plus sign button at the top right. Users were not immediately seeing the add supplement option, but after resizing the icon, the issue was resolved.
Initial Wireframes - Ingredient Information
Addition of high level view of individual ingredients and interactions
Goal: easily view ingredient information
After 2 rounds of usability testing, these wireframe screens proved to be easy to use and intuitive given the task to find more information on “magnesium”. For visual design, we noted to make sure each ingredient looked ‘clickable’ as this was the only comment from users during testing.
Melony, our user, needs the ingredient information list because she relies heavily on ingredient information and scientific facts to make her decisions on which supplements to take. For future business goals, this feature will eventually help Melony keep track of how much magnesium she is taking overall.
Initial Wireframes - setting up a reminder and days of the week selection
The original Amlia design of appointment set up was found to be a high cognitive load for users during initial task analysis research. Our user, Melony needs a more simple, easy to add function.
My initial design further confused users. During usability testing, users wanted to see each step all at once, instead of having to click “next” each time. Many users did not even click next because they expected the next step to pop up automatically for them.
On the original Amlia application, days of the week are pre-selected, and user is supposed to un-select the days that they DO NOT take medications. Every single user failed to complete this task during the task analysis.
The CEO was adamant about keeping the days of the week selected, so I tried adding a check mark to signify that the days were selected. Users still failed at the task. It proved more intuitive to select days to take supplements, rather than un-select.
Final Wireframes - setting up a reminder and days of the week selection
I made all selections of setting up an appointment on the same page - this helps Melony understand her progress and how many more fields she needs to fill in.
The next button was removed from each page and replaced with a ‘save’ button at the final step.
Days of the week were made to be selected by the user. This proved much more intuitive.
Transition to Visual design
Usability testing results and final wireframes were discussed with the team. I communicated my designs to our Visual Designer - Eric.
Eric updated the current Amlia style guide to keep designs consistent. He referenced Google Materials io to guide his visual design. By referencing the consistent style guide, Google Materials Guidelines, inclusive design and User Research our team was able to translate our evidence based results to the CEO.
What i learned
A challenge that we ran into based on Alexas research, users were running into far more issues early on in the app that were hindering users from even getting to the tasks we asked of them. We had to balance time frame, user needs, business goals, and validate every change with users. We created a task priority list and prioritized necessary changes with “nice to have” changes and balanced those with work load and time.
I learned how important initial research is for the entire team. Since the CEO came with very specifics asks, our team constantly had to be confident in the research, and always refer back to the user persona, and our specific research.
I learned the importance of communicating often and clearly with your team. Having everyone on the same page at all steps is imperative for smooth designs and usability testing.
We will want to explore how we might adapt our new design to the web since this is a progressive web app.
Consider altering standards to increase accessibility for users with poor vision - it was mentioned in usability testing of the color comps that the call to action button looked “muted”, so it looked like it was not interactive. We would further test for color blindness and accessibility issues.
Add ingredient monitoring of all supplements. This will help to keep users informed about supplement limits, and whether the supplements they’ve added to their cabinet exceed the recommended values.
We found that in our competitive analysis, many apps had a feature that allowed you to track your supplement supply, which will tie into the existing feature that sends you to external purchase links. This was also mentioned as a business goal at the beginning of the project.