AMLIA

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

THE CHALLENGE

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.

THE SOLUTION

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.


CLIENT

Catherine Crandall - Founder of Amlia

My Role

Interaction Designer and Project Manager
within group of 3 UX Designers

Team Roles

Alexa Barbosa - User Research Lead
Eric Pak - Visual Design Lead

Timeframe

3 Weeks

I UTILIZED SKILLS IN

  • Research Synthesis

  • Design planning

  • Creating Wireframes

  • Rapid prototyping and iterating

  • Usability Testing

  • Team Collaboration

PROGRAMS and Tools

  • Sketch

  • Omnigraffle

  • InVision

  • Google Materials Guidelines


The Design Process

Research

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.

unnamed.jpg

“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.

Persona by Alexa.png

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?

Original Amlia Home Screen.png

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.

MediSafe Application

MediSafe Application

Setmore Appointments Application

Setmore Appointments Application

Mindster Application

Mindster Application

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.

*Design Studio - a timed, 5 minute exercise in sketching. Each teammate aims to sketch 6 ideas for a specific design - ours tackled the reminder feature.

*Design Studio - a timed, 5 minute exercise in sketching. Each teammate aims to sketch 6 ideas for a specific design - ours tackled the reminder feature.

IMG_8170.jpg
IMG_8191.jpg

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’

Home Screen.png
Appointment Description.png

Findings

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

Findings

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.

Ingredient List.png
Magnesium High Level.png
Magnesium High Level (1).png
Magnesium High Level (2).png

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.

Screen Shot 2018-11-15 at 2.46.45 PM.png
IMG_8201.jpg
IMG_8203.jpg
IMG_8205.jpg
Frequency Page Every Day Copy.png

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.

Screen+Shot+2018-11-14+at+4.20.26+PM.jpg
Screen+Shot+2018-11-14+at+4.21.53+PM.jpg
Screen Shot 2018-11-14 at 4.22.04 PM.png

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.

Next steps

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.

Future Considerations

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.