The Learning Garden
Components of a Mindfulness Training App
OVERVIEW
The app aims to help clinically depressed college students to feel less depressed, and empower them in taking ownership of their mental health and wellness. For this goal, the app designed a learning system to guide users to take guided meditations, write journals, and record their daily moods.
As my industry design project at Springboard, I got on board to help the client to solve user experience problems and enhance their interface design. I worked together with 2 other team members and communicated closely with the client weekly.
MY ROLE
Research : Affinity Mapping, Persona and Usability Testing of Giving Materials
Design : Brainstorm, HMW Questions, Journal Map, Lightning Demos, Sketches, Storyboard, Mid-Fidelity Wireframes, Prototype, and Final Usability Testing
Project Management
TEAM MEMBER
Ayesha Anand
Gregory Guma
CLIENT
Benten Technologies
MENTOR
Noemi Selisker
PROBLEMS
We have 2 problems to solve:
1. How to improve and develop the existing low-fidelity wireframes to a higher level.
2. How to introduce a new “garden theme” to this app to better engage users and enhance their experiences.
CHALLENGES
It is my first UX project working with real clients. We’ve been asked to develop hi-fi wireframes for 3 user flows as the initial scope. Although the client gave us the existing low-fi wireframes and research findings, there were still challenges:
-
It was hard to understand what the clients wanted. They constantly changed the work scope and asked us to switch design focus midway.
-
No persona was created even though they’ve done interviews.
-
Existing low-fi wireframes are not prototyped and haven’t been tested.
-
Create good quality works within a short period of time.
TIMELINE
Below is the timeline of this 4-week design challenge. We spent 2 weeks on project understanding, organizing existing research findings, creating affinity mapping and personas, conducting usability testing of existing wireframes, and negotiations. Then we decided to conduct a 2-week “low speed” design sprint to develop the garden concept and solve testing issues.
.png)
WEEK 1
AFFINITY MAPPING
Our first step in starting the design process is to understand the target users.
We took notes from the existing interview materials and categorized them into the affinity mapping.
.png)
PERSONA
Analyzing the affinity mapping to build 3 different personas helped us to stay focused on the target group - college students with stress problems coming from various stressors.
WEEK 2
USABILITY TESTING OF EXISTING WIREFRAMES
The existing low-fi wireframes were not linked together, so we spend time organizing the 3 flows from the initial scope and prototyping them. After that, we conducted 5 usability tastings. Below are the 3 critical user experience problems:
01
FINDING
The overall tone was inconsistent and disliked how the sections with a more serious tone clashed with the cartoon helper.
-
Need a unified style guide to keep consistency.
-
To match the helper avatar, the overall tone should be cartoonish and bright.
SUGGESTION
EX. SCREEN EXAMPLE
Required cartoon avatar
VS.
Rigid looking pages: library & exercise screen
02
FINDING
The home screen lacked visual hierarchy, context, and call to action buttons for important app functions
-
Reorganize the information on the Home screen to convey a clear visual hierarchy.
-
CTA buttons should be added so users can easily figure out what to do next.
SUGGESTION
EX. SCREEN EXAMPLE
.png)
03
FINDING
Modules were lengthy and there’s no clear way to come back to finish later.
-
Shorten modules to most critical information.
-
Include clear ways to leave modules and return to them later
SUGGESTION
EX. SCREEN EXAMPLE
Learning module screens example
Scope Negotiation
After hearing our test findings, the clients wanted us to shift focus to designing a new "garden" concept to make the app more fun. This was unexpected as it was already midway through the entire timeframe and they hadn't had any clear concept yet. Even though it was a big surprise, we still wanted to try our best to create a good end project.
To have their understanding, we stated our best abilities and negotiated with them to enhance only one primary user flow to mid-fi level while implementing the garden concept.
WEEK 3
DESIGN FRAMEWORK
To discover a brand new feature, while fixing and developing existing flows, we determined to conduct a 2-week Slow Design Sprint. It allowed our team to explore different initial ideas, collaborate with clients, and deliver the refined product in the end.
JOURNEY MAP
The Journey map helped us to understand the user flow and the potential screens to be designed. The possible journey map is a completion of a learning module. During the module exercise, the user can check in the moods, write journals, and do guided meditations.
Those 3 functions are also stand-alone features. Users can access them without entering a learning session.
HMW QUESTIONS
-
HMW helps users to release stress?
-
HMW helps users to get engaged?
-
HMW creates a safe, welcome, and nurturing atmosphere?
-
HMW makes the garden fun enough so users want to check it frequently?
-
HMW encourages self-exploration and growth?
INITIAL SKETCHES
My initial sketch idea was thinking of the garden as a reward system where some gamification elements could happen. Users earn special tools through their learning which can be used to accelerate the garden growth. This method can easily engage users and make the app more fun.
INITIAL STORYBOARD
My initial storyboard tested ideas of adding garden elements into the full user flow.
After some discussions, we decided not to use the gamification concept as the app already had too many additional features. It is more important to make it concise. But the sketches helped us to discover possibilities.
USER FLOWS
We decided our user flows would be a primary one - completing one learning module, along with 3 secondary flows - meditation, journal, and mood check-in.
1. Complete a module with accompanying journal and meditation [Primary]
.png)
2. User wants to meditate [Secondary]
.png)
3. User wants to journal [Secondary]
.png)
4. User does Mood check in [Secondary]
.png)
WEEK 4
STYLE GUIDE
Typography
Color
.png)
KEY SCREENS
LEARNING MODULE
The learning garden functions as the map of a learning journey. Users can view the different activities' contents by clicking on each module field. They will earn a growing flower after finishing each activity.
First day of learning
Completing a learning activity will see a flower growing in the field
After completing first module, the filed is full of flowers
A dialog showing flower growth animation will pop up once an exercise is completed. This helps users to notice the system's feedback and they will see the garden is growing together with them.
.png)
HOME / DASHBOARD CHANGE
-
Organized the visual hierarchy.
-
Redesigned the "begin journey" card to make it more welcoming.
-
Added a clear CTA button to let users enter the garden to begin learning.
-
Simplified the progress card into a bar. The progress won't be presented by a big percentage number but a linear colored bar. This can help release users' attentions and ease the rigid "textbook" feelings.
-
Incorporated the avatar and mood check-in together. Created an obvious CTA button.
MEDITATION CHANGE
-
Enlarged the pause/play button and added a progress ring clearly showing the status.
-
Changed the background from a real image to a simple floral graphic. This helped unify the overall tone and created a calm and immersive environment for meditation.
-
Combined the avatar together with the rating function.
JOURNAL CHANGE
-
Reorganized information hierarchy of the journal screen.
-
Reduced the calendrer size and added a big CTA button to enter journal.
-
Added a new card to allow users to review their past journals.
-
Add the avatar and cute graphic elements to enhance the visual consistency.
-
Added the "add content" button to solve the issue that my test participants were confused about how to input different types of journaling (text, picture, voice, and drawing).
-
Simplified the journal review page. Adjusted the interface to be clean and fun.
NEXT STEP
We did another round of usability testing for our improved screens. There were much fewer issues than the first time and the testers were less confused.
If I would keep developing this app, I'd like to focus on:
-
Conducting further testing/ research on whether the helper avatar is broadly appealing to college students of different ages and demographics, and further clarify the role of the Avatar throughout the app.
-
Testing if the learning module could eliminate the journal entry and prompt users to journal in a different way. Since our test participants felt 2 writing exercises were a lot of work.
-
Testing whether the dashboard or the garden is the better landing page when users open the app.
SUMMARY
Going into this industrial design project is a great opportunity to hone my design skills. I have done 2 other student UX projects at Springboard and this is my first time working with real clients. This experience gave me the chance to test my learned knowledge, strengthen my logical thinking ability, and improve my business communication skills.
The best thing I gained from this project is teamwork. Creating a good quality design while having trouble getting clear answers from clients is challenging. With my team members, we were able to support each other, and have valid conversations to make design decisions. Along the way, workshop sessions like brainstorming, sketch review, self critics, and scope discussions, etc. all helped us to find the ways to reach the end. I feel very fortunate that I also learned a lot from my teammates.
That's my story.
Thank you so much for reading!