Work  >  UX / UI  >  LemonAide

iOS Mobile App Design
Concept: LemonAide

ROLE:
DURATION:
TOOLS:

UX Researcher, UX/UI Designer, Illustrator

3 weeks (September 2020)

Figma, InVision, Miro, G Suite, Zoom, Photoshop, Illustrator, Trello, Otter.Ai

TEAM:

Team of 4 UX/UI Designers

iphone_mockup_lemonaide_2.png
iphone_mockup_lemonaide_3.png
iphone_mockup_lemonaide.png
PROBLEM:

Everyone deals with stress and/or anxiety at some point in their life, but might not know how to cope due to lack of knowledge or resources. Our User Persona, Jillian, is dealing with regular anxiety and needs help managing it.

SOLUTION:

Our goal was to create an iOS mobile design concept that serves as a daily mental health check-in app and commits to normalizing mental health care in a world where it is still stigmatized.

IMPACT:

We hope with regular use, users like Jillian will clearly identify their main stressors and some solutions to combat each of them. Jillian is becoming more comfortable managing her stress levels, anxiety, and regular communication with others.

Challenge

lemonaide_header_1.png
PROBLEM STATEMENT:

During our research we discovered that everyone deals with some sort of stress and/or anxiety at a point in their life, but might not know how to cope due to lack of knowledge or resources. Our User Persona, Jillian, is dealing with anxiety and stress in her daily life and needs help managing it. How might we provide an app that normalizes daily mental healthcare by tracking progress and mood to help users identify their average emotional state and how to best alleviate their stresses and anxieties?

Lo-fi #1.webp
CHECK IN 6.webp
iphone_mockup_lemonaide_2.png

Low-Fidelity, Mid-Fidelity and High-Fidelity Prototypes

Approach

Survey_1.PNG
Survey_2.PNG
Survey_3.PNG

Survey Results

USER RESEARCH:

We conducted 8, 1 on 1 interviews via Zoom and surveyed 119 volunteers regarding their mental health and daily habits. We then gathered all of our findings and sorted them in an affinity map in Miro. This helped us test and compare our existing hypothesis that many folks struggle with mental health concerns as well as discover some key findings that aided us in our definition and ideation phase decisions.

Health Care Project - Affinity Diagram.jpg

Affinity Diagram

Feel Good, Inc. - Empathy Map.jpg
DEFINITION &
SYNTHESIS:

Drawn from our survey and interview findings, we created a contextual empathy map to check on our own assumptions and get into the headspace of our primary target users. Based off of our survey, interview findings and empathy map, we were also able to create our user persona, Jillian Rollins; someone who will always be at the top of our minds to consider when making our improved and iterated design decisions. 

Empathy Map

USER PERSONA: Jillian Rollins

Jillian Rollins has been working as a school counselor in Austin ISD for 4 years. Though she has a passion for helping kids with their mental health and keeping them motivated, it has taken a toll on her own mental health and she seldom finds the time to care for herself. She takes on a great deal of anxiety as the stressors of her daily life add up and, as a frequent user of the app Daylio, is looking for something more than just a journal. She wants to track her mental health progress and receive supplemental help by identifying the major sources of stress in her life that may cause her anxiety in the first place, as well as finding the proper resources to help her overcome them.

Screen Shot 2020-09-23 at 6_51_11 PM.web

Goals:

  • ​Track what leads her to have more positive experiences

  • Identify her anxieties to learn more about her personal stressors

  • Find activities and solutions that can improve her mood when feeling down  

  • Feel more connected to her friends and family 

Frustrations:

  • Therapy is too expensive to attend regularly, and her school's insurance doesn't help with cost 

  • Mental health and mental healthcare still have a stigma surrounding them  

  • Feels overwhelmed with the lack of time she has for self-care

  • Difficulty balancing and maintaining relationships  

STORYBOARD:

From here, we were able to map out a realistic scenario with LemonAide that Jillian would likely go through according to all of our findings and I illustrated the storyboard.  

FeelGoodInc_Storyboard_1 1.webp

Jillian leads a busy life and has a hard time finding time for self-care. She has been to therapists in the past, but found that she hasn't been making the progress she was hoping for. She also couldn't afford to keep spending the money. She is currently experiencing anxiety and stress, but isn't sure why or how to find help.

FeelGoodInc_Storyboard_4 1.webp

After a week Jillian finds the app easy to use and she doesn't forget due to the reminder feature. She sees that taking a few minutes each day to self reflect has resulted in a positive change in her stress/anxiety levels and she has become more self-aware of the root cause of some of her problems.

FeelGoodInc_Storyboard_2 1.webp

While scrolling on instagram she comes across an ad for LemonAide. She is instantly interested in what this platform claims to do, so she clicks on the link and downloads the app.

FeelGoodInc_Storyboard_5 1.webp

A couple weeks later, Jillian has an extremely hard day and finds she needs more than just the usual prompts to get her through it. Due to the AI feature, LemonAide is able to provide suggestions that have been proven to make Jillian feel better. She is prompted to call her friend, Bob, so she does.

FeelGoodInc_Storyboard_3 1.webp

Jillian is impressed with the onboarding process and her initial experience. She decides to give it a go, and begins logging her daily experiences and emotions.

FeelGoodInc_Storyboard_6 1.webp

After months of regular use, Jillian clearly identifies her main stressors and some solutions to combat each of them. LemonAide has noted patterns with the help of emotional findings, Jill's journal entries and data analytics. Overall, she is becoming more comfortable managing her stress levels, anxiety, and regular communication with others.

IDEATION:

Next, we used the ‘I Like, I Wish, What If’ method to imagine what would be Jillian’s personal thoughts and opinions on using a mental health app and then solidified our feedback through dot voting.

After extracting the most agreed upon viewpoints, we sorted them in a feature prioritization matrix to focus on the most important features to include for our app.

Feel Good, Inc. - I Like, I Wish, What If.jpg

I Like, I Wish, What If Brainstorming

Feel Good, Inc. - Feature Prioritization Matrix .jpg
WIREFRAMING:

After a thorough review, we confidently moved forward with our user persona Jillian, her journey with LemonAide, and the feature prioritization matrix data. 

We decided on conducting a collaborative card sort to solidify the main features and functions of the app, and began to imagine the information architecture and the ebb and flow of navigation. When we reached a final agreement, we explored potential layout options by individually sketching some low-fidelity wireframes.

Feature Prioritization Matrix

Feel Good, Inc. - Lo-fi #2.jpg
Lo-fi #1.webp
Lo-fi #3.webp

Low-Fidelity Sketches

PROTOTYPING:

Some of our early sketches were quite busy (or not busy enough) and filled with tons of seemingly great ideas for features. Unfortunately we found that all of these options on the homepage came off pretty overwhelming and it made for a chaotic user experience that was quickly scrapped along with some key features we had decided on earlier. We felt confident users would both use and enjoy the LemonAide app as long as it was quick, simple, and calming to use based upon the data we gained in our research and ideation phase, so we started to simplify our product heading into our medium fidelity mock-ups. Enjoy our original, vintage lemon mascot!

Login Screen.png
Home.png

Mid-Fidelity Prototypes

Style Tile.png

Style Guide

Style Tile.png
Frame 68.png
Frame-7.webp
Frame-2.webp
VISUAL DESIGN:

We drew our Visual and UI design inspiration from the feelings one may capture from the fun and excitement of a childhood lemonade stand. The style is meant to give off a light and airy aesthetic while also keeping the app clean, professional and suitable for all ages and audiences. We aimed to create a digital space where users could feel grounded, uplifted and motivated to regularly check-in with their mental state, as well as to break any existing mental health stigma.

Results

Lo-fi #1.webp
CHECK IN 6.webp
iphone_mockup_lemonaide_2.png

Low-Fidelity, Mid-Fidelity and High-Fidelity Prototypes

USER TESTING:

Testing proved to be the most beneficial step in this entire process, as through further testing of our low- and medium-fidelity prototypes we identified a cleaner, more streamlined direction we wanted to go in. This led us to a simple, easy-to-use layout where the focus could be on the user’s feelings and mood which allowed us to put as much positivity as possible front-and-center.

ITERATIONS:

Our main iterations took place on the Gratitude and Goals pages. We felt that the original high-fidelity mock-ups for these two pages were a bit dull, and we decided to play around with the blob feature in Figma (which eventually found its way to several other pages, too). We A/B tested 2 versions of each Gratitude and Goals page, and ultimately decided to keep their designs bright, fun and slightly different from all the other pages to encourage users to regularly utilize them. Additionally, we A/B tested the onboarding experience and found that users preferred to log in after completing onboarding instead of before. The reasoning was because by that point, they were already mentally invested in what the app claims to do.

AB Test 1 (2).png
AB Test 2 (1).png
FINAL THOUGHTS:

As a team, we gained a lot of valuable information from this experience and found that we all feel strongly about placing a much higher value on mental health. Overwhelmingly in our interviews we learned that a majority of people feel that the stigma surrounding just seeking mental health care is still prominent. Any efforts at all that we could make to help people feel more comfortable with checking in on their mental health and asking for help when needed would be a good thing for all of us in the long run. 

Goals Page Iterations

Gratitude Page Iterations

AB Test 1 (1).png
AB Test 2 (2).png
FUTURE OPPORTUNITIES:
  • Additional, captivating UI animations (like drifting clouds, morphing blobs, lemons)

  • Music platform feature:

    • LemonAide could track the music you've listened to on your good days and create a playlist based off findings

    • 'Song of the Day' could be suggested to you on the home screen after you select your mood, and mood could somehow coordinate with tempo

  • Themes for your profile like color and typeface depending on your personal preferences

  • Specific activity suggestions with external links directed to user based off of their entries

  • The blob colors in the background could change according to the seasons

lemonaide_footer.jpg