Elixir App Case Study

Project Overview

Problem: Most platforms today regarding wellness alternatives are crowd-sourced, making it difficult to trust the ‘facts’ and opinions provided. Young adults need a way to search for and save verified, expert-supported information on wellness alternatives.

Solution: An app that acts as an interactive informational index of herbs and supplements sourced from experts, allowing users to search, filter, and save important herbs and supplements.

Impact: A trustworthy and resourceful platform for users to turn to when in need of information on herbs and supplements.

Background: In the UT at Austin UX/UI Bootcamp, this was the first group project that groups had to present for our class. We were tasked with creating an app on any objective our team deemed there was a need.

My Role: UX/UI Researcher & Designer

Timeline: June 26, 2023-July 13, 2023

Competitor Analysis

Direct Competitors

About Herbs

Strengths

  • Reputable sources

  • Large database

Weaknesses

  • No way to filter

  • UX/UI is outdated & hard to use

  • Not many supplements are included

HerbList

Strengths

  • Science-backed research

  • Well organized

Weaknesses

  • Very limited herb selection

  • No search feature

  • Text-heavy & tedious to scroll

Indirect Competitors

iHerb

Strengths

  • Provides great detail

  • Filterable by need & lifestyle

Weaknesses

  • Not backed up by credible sources

  • All reviews are customer-based, not science-based

Thorne

Strengths

  • Products are based on their own research

  • High-quality ingredients and testing

Weaknesses

  • The high price point for supplements

Proto Persona

As a group, we decided what our ideal user would be like when creating our proto persona. Our proto persona, Holistic Hannah, is interested, curious, and open-minded about holistic and alternative preventative medicine. She wants a platform that she can trust and learn about natural remedies easily. She often feels overwhelmed with wellness information and finds a lot of information online to be misleading.

Survey & User Interviews

After creating the proto persona, we sent out a survey with 11 questions regarding the user’s current knowledge, opinions, and openness on alternative wellness. We received 75 responses.

Survey Data

92% of survey takers 

had either a positive or neutral opinion on alternative wellness 

65.3% of survey takers 

 have experience using alternative wellness supplements & herbs

73.3% of survey takers 

 rated their knowledge of alternative wellness to be at a 2 or 3 out of 5

94.7% of survey takers  

 marked Google or Internet search as their main form of researching

Based on the responses from our survey, we then conducted 10 user interviews to determine any barriers and pain points users face when researching and using herbs and supplements.

User Interviews

After sorting our user interview data into an affinity diagram, we discovered that users are open to learning more about holistic supplements but are overwhelmed by the amount of information and worry about whether the information is trustworthy.

Affinity Diagram

User Insights

“Anything that I can do that’s more holistic, I definitely prefer.”

“There’s just a lot of information and a lot of contradicting statements. It’s hard to trust.”

User Persona

After user interviews, a user persona was created to represent Elixir’s target audience of users.

Meet Holistic Hannah

  • 24

  • Social Media Marketing

  • Austin, TX

  • Lives an active lifestyle

  • Interested in wellness

Demographics

Hannah is a 24-year-old social media marketer who recently moved to Austin, TX, because of the way of life in Austin. Hannah wants to live a more holistic lifestyle along with staying active, but she finds it overwhelming and confusing to find sources online that will give her dependable information. She wants to be able to find reliable information on herbs and supplements that she is interested in without having to go down a rabbit hole to find trustworthy information, especially while transitioning to a new city.

Biography

  • Easy access to reliable information

  • Information that is verified by experts

  • All the information in one place

  • Ability to compare & contrast different supplements & herbs

  • Needs a way to track their current supplements

  • Needs researching to be less intimidating or overwhelming

Goals & Needs

  • Information is often confusing

  • Information online is heavily opinion based & crowd-sourced, making it difficult to trust

  • The research process can be intimidating

  • She can’t remember or find information again after searching

Pain Points

What would Hannah want?

Separately, our team brainstormed our individual ideas for features that we thought would be beneficial for Elixir. We then got together as a team and starred our favorite ideas that we wanted to sort through and create for our app.

Feature Prioritization Matrix

With the starred ideas, we then sorted them into a Feature Prioritization Matrix to determine which features would be “Quick Wins” for the project that we could implement first, then work our way into more demanding tasks. We decided our 2 key features were going to be an “Index Search” feature that allows users to scroll and search herbs and supplements and a “Collections” feature that allows users to save their favorite herbs and supplements to folders for easy access.

Storyboard

I created a storyboard for Hannah to showcase how she discovered Elixir, how easy it is for her to use, and how it helps her find the herb she needs to solve her issues.

Value Proposition

Elixir is an interactive educational app that helps users interested in holistic herbs and supplements solve the issue of overwhelming and untrustworthy research sources.

We’re better because we offer a cohesive and digestible informative index with the ability to save their findings.

We’re believable because we source information from experts and tailor information to our users’ preferences.

User Flows

Three main user flows were created for Elixir. The first flow is the “Sign-Up/Login” flow, which shows how users will either log into their existing account or sign up for a new account and have the option to fill out the in-app survey for more tailored recommendations. The second flow is the “Index/Glossary” flow, which shows how users will either search, filter, or sort the glossary to find the herb or supplement they are searching for and bookmark it. The third and last flow is the “Collections” flow, which shows how users will view or create a new collection.

Initial App Sketches

We were each tasked with sketching our ideas for Elixir. I sketched the homepage, collections page, glossary page, and herb profile page to review. My homepage and glossary page designs were chosen and iterated for the final app design.

Homepage

Glossary

Herb Profile

Collections

Digital Wireframes

Homepage

Glossary

Herb Profile

Collections

Mid-Fi Usability Testing

We tested 6 users with our digital wireframes. There were 5 tasks to complete to pass the usability test successfully.

  1. Create a Collection Board for Sleep

  2. Go to the Glossary page

  3. Filter search results by "Sleep"

  4. Select Chamomile from filtered search results & access the herb profile

  5. Add Chamomile to the Sleep Collection Board

All of our users successfully completed the tasks we assigned, although a few users had difficulty identifying which tab was for the “Collections.”

High-Fi Iterations

Replaced the “Heart” button with a “Star” button to coincide with the “Collections” tab for easier translation.

Added letter dividers to the glossary and removed the left-side slider but kept the alphabetical slider.

Incorporated an AI feature that creates a “Collections” cover depending on the name of the collection created.

Final Prototype High-Fi App Mockups

Splashscreen

Medical Disclaimer

Homepage

Recipes

Glossary

Glossary - Filtered

Herb Profile

“Sleep” Collection

Conclusion

Elixir was the first group project I completed in the UX Bootcamp. I learned a lot about working with a design group and navigating Figma to create an app design and prototype. I spent about 15 hours on YouTube and Google searching different Figma tutorials to complete this project, which was well worth it because my Figma skills have only improved! This project also made me realize how much I enjoy designing, especially in app form.

After presenting our project, the design was critiqued, and we realized that the ivory icons on the light green background made our tab bar not pass accessibility standards. This helped me realize how important accessibility is, and I have continued to bring accessible design to all of my future projects.