End-to-End Mobile App
Materia Medica
Project Overview
Challenge
How to help users feel safe using herbs to improve their health
In recent years, herbalism and traditional medicinal practices have inspired people to begin taking charge of their health in a more natural way.
Research suggests there is a concern as to how to properly apply these powerful plants in a safe and effective manner that can improve one’s health.
Developing a modern end-to-end mobile app about herbal medicine could help educate users on its application and naturally broaden their medicinal choices.
Objectives
Designing an End-to-End Mobile App
Create an MVP (minimal viable product)
Educate users on herbal applications
Scope
End-to-End Mobile design, Branding
Role
UX / UI Designer (Research, Visual Design, Interaction Design, User Testing)
Tools
Figma, Procreate, Adobe Photoshop, Whimsical
Duration
2 weeks (80 Hours)
Design Process
Empathize
Research Goals
Methodologies
Empathy Map
User Persona
Define
POV Statements + HMW Questions
Brainstorming
Business + User Goals
Ideate
Product Roadmap
Site Map
UI Requirements
Task + User Flows
Low Fidelity Sketches
Mid Fidelity Wireframes
Branding
High Fidelity Wireframes
Prototype
Mid Fidelity Prototype (mobile)
Test
Usability Testing
Affinity Map
Priority Revisions
Empathize
Understanding what users know about Herbal Medicine
Herbal medicine is not new by any means. It presents itself in many forms that people fail to recognize as plant medicine. Whether it’s through tea consumption, natural supplements, a plant-based diet, or even beauty products, herbs have subtly integrated themselves into everyday lives.
I wanted to find out how users are experiencing herbs and what kind of relationship they have with them, as well as with modern medicine.
Research Goals
Gather information about herbalism and the alt medicine field
Identify strengths and weaknesses of similar app competitors
Determine the target audience
Learn why users have used herbal medicine
Learn how users have applied herbal medicine into their lives
Understand what concerns users have with herbal medicine
Understand where users source their herbal information from
Methodologies
Secondary Research (Market Research & Competitive Analysis)
Primary Research (Personal 1:1 Interviews)
Awareness of Herbal Medicine in the Market
Soaring awareness among people about the benefits of herbal medicines has boosted the global market in recent years, including growth in natural skincare products and dietary supplements.
Some driving factors:
Consumers use herbal medicines in combination with prescription and nonprescription drugs
People with chronic diseases are more likely to use herbal medicines than others
Demonstrates independence in managing their health problems
WHO estimates 80% of the world's population currently uses herbal medicine
Demographics
71% are women
30-69 years
Predominantly White individuals in the US
Education greater than high school
Scoping out the Competition
As someone who personally practices herbal medicine, it was no surprise to find very few modern apps that cater to this subject. I was determined to find out where the general user is extracting their information from and what brands are bringing awareness to this practice in a credible way.
Connecting with Herbal Medicine Users
After conducting about 20 minute 1:1 interviews with 5 participants, I was able to obtain valuable insights into users experience with herbal medicine.
About half of users during recruitment did not recognize they were using herbs for their health
Participants were expressive and the most engaging I’ve encountered, noting this to be an incredibly connected and intimate topic for users.
Number of Interviews: 5
Participants:
Ages: 30-65
Have used herbal medicine
Finding Patterns in User Experiences
After compiling an empathy map, a few patterns emerged amongst users experiences with herbal medicine. However, 4 main insights stood out that provided a foundation for what kind of features should be implemented into the design.
Getting to know Rosemary
A delightful herb and name to apply to this research, this persona defines who the main user group is.
Rosemary has turned to herbal medicine to gain control over symptoms she has experienced that modern pharmaceuticals have had difficulty addressing. It’s important she can dose herbs appropriate to her conditions and can learn of their specific effects when using other medications.
Define
How might we help Rosemary?
Taking the insights gathered from research, I want to think about strategizing solutions for Rosemary. How might we (HMW) help Rosemary benefit from using this app?
Brainstorming Begins
Mapping out ideas quickly generates new ways to improve the persona’s experience with the app. I sat down and began compiling ideas to further expand on the insights provided. A full individual brainstorming map can be viewed here.
Linking Goals
With the solutions from brainstorming, I can start selecting features and considerations that will address the problems defined in research. A Venn diagram helps to compare business goals and user goals with technical considerations to identify overarching project goals.
Ideate
Prioritizing Features
Based on research, a feature roadmap shows what would be worth considering in order for users to successfully navigate and interact with the app. Below is a visual of features compiled, listed from most to least important.
Constructing an Intuitive Layout
A site map could then be constructed, which helped to sort the information architecture and define the navigational hierarchy of all screens and highlight some features the app would offer.
Knowing what to Build
A user interface requirements document details the high-level requirements needed for each of the screens to be built.
Based on features identified in the Products Roadmap and Site Map, specific flows could be crafted that Rosemary would navigate to learn how to use and acquire the herbs she is seeking more effectively. The full document can be read here.
User Tasks:
Rosemary wants to find an herb by searching symptoms
Rosemary needs to review precautions & dosing of the herb
Rosemary wants to find where to locate the herb nearby
Screens to be designed:
Home
Symptom search results
Herb profile
Herb warnings modal window
Herb dosing modal window
Herb locator
Map
Rosemary on a Mission
To make better sense of what was to be designed, task flows were created to show how Rosemary would navigate from each screen.
In total, there are 3 main flows that will allow Rosemary to seek the information she needs about the herbs she wants. All task flows can be viewed here.
The Full Journey
Building on the task flow, the user flow shows how all tasks connect and what decisions Rosemary would make through those specified scenarios. These flows would then be implemented and tested in the prototype.
Sketching a Herbaceous Concept
One of my favorite parts of designing is sketching. I had to keep in mind the main user group uses Android, so it was important to investigate the specs and layouts of the device when coming up with a design. Here I’ve utilized Procreate to digitally draw up some low fidelity wireframes and layout design concepts.
Elevating the Design
With the sketches as a reference, mid-fidelity wireframes could then be constructed in Figma to visualize a more comprehensive design. Utilizing greyscale helped me see where I would want to apply color later and find a balance of all elements being used.
Prototype
Making Connections
Once all mid-fidelity screens were built, I was then able to prototype the design and connect the pathways each user would take based on the task flows developed for Rosemary. This will assist in user testing in the next phase.
Testing
Putting it to the Test
Six users were then asked to perform the task flows identified and perform them in the prototype. Conversations of all user tests were gathered and insights provided possible suggestions to improve the usability of the app. A full outline of the testing plan can be viewed here.
Participants
6 participants
Ages 30-70
Mobile app users
Methodology
Evaluative Research
Method
Think Aloud Testing
Overall
Completion rate average: 99%
Total errors: 1 mistake
Tasks
Task 1 - Find an herb by searching symptoms
6/6 were able to successfully find an herb by searching for symptoms - one initially performed an error
1% Error-rate
Task 2 - Review precautions & dosing of herb
6/6 easily found how to read precautions and dosing instructions
0% Error-rate
Task 3 - Find where to locate herb nearby
6/6 were able to locate an herb nearby but did result in some confusion
0% Error-rate
Gathering Insights & Solutions
From the usability testing, an affinity map was then comprised. The affinity map serves to document all observations from user testing and identify specific insights to improve usability. A few concerns arose and suggestions were made to help mediate user frustrations.
Prioritizing Improvements
Considering time is limited, a priority matrix then helped me determine the importance of suggestions made according to the impact and overall effort that would be needed to complete the proposed updates.
Ideate
Building the Brand
As organic, plant-related matter is usually associated with green and lush visuals, I wanted to approach the style from an old-world apothecary perspective, with illustrated botanical imagery and some darker tones to balance the green.
Multiple inspirations were then gathered in a mood board and attributes were identified for the brand:
Organic
Herbaceous
Pastoral
Minimal
Comforting
Style Guide & User Interface Kit
Once I decided to move forward with those elements, the name “Materia Medica” was adopted to represent the app.
Many ancient herbalists compiled a materia medica to document their plant discoveries, how they experienced them and what they were best used for. This felt like a very fitting name for the brand. A simple sprig logo was also used to highlight the name.
Let there be Life
Based on the mid-fidelity wireframes and design elements chosen, high-fidelity concepts were then composited to show a more realistic version of the appearance of the app.
Refinements
After considering my initial choices and receiving feedback, I made some necessary revisions that are evident in where the design currently stands.
Reworked the color palette to create a lighter, more airy design
Redesigned footer navigation
Removed stroke around the search bar
Added a subtle background
Added diffused drop shadows and varied opacities to make the design feel more modern and dimensional
Reflections
This is the fourth UX / UI design project I’ve executed solo. Herbal medicine is a practice that is very close to me, so I was delighted to have the opportunity to bridge my interests. There was more freedom in the development of this idea which I enjoyed, but it also presented its own challenges.
Having too many ideas in a short amount of time forced me to edit what could be accomplished. This was also my first time ever designing for an Android device so it challenged me to learn a new design system. If given more time, I would love to revamp the branding and find ways to develop the concept as herbalism is a subject that isn’t very well adapted in the app world.
Next Steps
Because the design has only been tested with the mid-fidelity wireframes, another round of usability testing would be in order using the high-fidelity mockups. Once that is complete, handing off deliverables to developers would come shortly after. All files have been compiled using Figma.
The process demonstrated is ongoing. Seeing this is built for Android, it might be worth considering to revisit research and see if users who are using iOS would benefit from the app’s idea as well.
