End-to-End Mobile App

Materia Medica

 
 

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.

 
Banner.png
 

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.

 
Banner.png
 

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.

 
Banner.png
 

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.

 
 
 
Banner.png
 

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.

 
 
Banner.png