Mindfulness Garden

How utilizing gamification in a mindfulness app increases engagement and decreases overwhelm in students with depression

Role — Product Designer (with mentorship from Michelle Park)

Timeline — 4 weeks

Tools — Figma, Photoshop, Google Sheets

Deliverables — User Interviews,  Competitor Analysis,  Secondary Research∗,  Proto Personas∗,  Affinity Map,  User Flows,  Sketches∗,  Storyboards∗,  Low Fidelity Prototype,  High Fidelity Prototype,  Usability Testing (∗ Not shown in this case study)


Our design team was contracted to spend four weeks working on an app being developed by a design firm based in the Eastern US.

The project was a mindfulness app for college students with clinical depression which merges a mindfulness framework developed by Emory University, meditation, and therapy.

The team was tasked with creating High Fidelity iterations of existing screens, but ended up overhauling the app's visual design after feedback from user tests.

Role — Product Designer, Consultant, Design Lead
(with mentorship from Michelle Park, & Nate Chen)

Timeline — 4 weeks

Tools — Figma, Figjam, Miro

Deliverables — Competitor Analysis, Secondary Research, Personas, User Flows, Sketching, High Fidelity Mockups, Style Guide, UI Animations, Prototyping, User Testing, Next Steps Outline

Process — Design Sprint


Initial goal

Create high fidelity screens based on existing designs

Revised goal

Overhaul the visual design and address usability issues uncovered in testing

End Result

After testing it was clear that many screens would need to be workshopped. Our client decided to change directions and asked if it would be possible to redesign the existing screens in order to increase engagement.

Our team turned the redesign into a 2 week sprint that would test for proof of concept and whether our changes — which included the addition of gamification — would reduce friction, and allow our users to navigate the app’s mental health training successfully.

Testing of the redesign showed that we had accomplished our goal. Participants went from frustrated in the first round of tests to excited in the second round. We found that breaking up the long and complex series of tasks and adding delight in the form of in app rewards helped our participants to complete tasks without becoming frustrated or overwhelmed.


At first our client wanted us to create Hi-fi mockups of existing designs, but when we learned the client's designs hadn't been validated by user testing our strategy shifted

Selling the UX Process

After finding out that existing screens hadn't been tested; the team met with our client to discuss the value of user testing — before jumping into Hi-fi designs

Our team spoke to the client about how much value there was in testing existing designs before iterating into high fidelity. We made sure to explain that testing would give us a better understanding of what was and wasn't working in current screens, and that it would give us with a clear jumping off point for redesigns and improvements.

Once the client understood how much time and resources they could save by testing their designs and more closely following standard UX processes, we got the green light to conduct user testing.

Initial Testing

Our team got to work creating a prototype from the client's screens and recruiting participants; Testing yielded lots of critical feedback — it became clear major revisions would be needed
Initial Testing

Mid-fi Prototype & Test Findings

Friction, frustration, stress, confusion, and anger were the dominant feelings expressed by the first round of test participants

The first round of user testing did not go as well as we had hoped. Test participants overwhelmingly did not enjoy the experience of using the Mindfulness Garden app in its current state and expressed frustration, stress, confusion, and even anger while clicking through the prototype.

Participants felt lost, didn't understand what was happening or why, and commented that the prototype was making them feel more anxious than they already did which is the opposite of what it is supposed to do.

Participants were also confused and frustrated by the app's 'avatars' which are supposed to guide users through various mindfulness exercises.

“I don't want the Duolingo owl giving me therapy!”

— User test participant responding to avatars

Changing Directions

Negative feedback made it was clear that we needed to pivot; after discussing test findings with the client, our team was asked to overhaul the visual design of the app
Changing Directions

The 'Garden Theme'

Our client asked us to incorporate one of the main metaphors from the mental health framework of the app into our redesign; That 'your mind is a garden and must be cultivated to become healthy and grow'
Changing Directions

Method Change: Design Sprint

The team needed to get a lot done in a short amount of time; we decided that in order to redesign, address existing issues, and provide proof of concept our best bet was to run a design sprint

The scope of our project was officially changed and a design sprint would help us to quickly come up with a new direction for the app without overcommitting to an untested idea.

We needed to do a lot of problem solving and iterating during this sprint in order to address the client's needs and make their project successful.

Key Sprint Goals
  1. Visual design overhaul
  2. Proof of concept for new visual design
  3. Address issues uncovered in testing
  4. Increase engagement

The Design Sprint

Our team decided that I would be the one to facilitate the design sprint which meant I had a lot of organizing to do
Design Sprint

Distilling personas

The first thing I did was to distill down relevant parts of the company's research for reference during our sprint; This included condensing a document with nine personas into a more manageable three

While the first two personas were useful for making our design decisions, the third, "Thomas Fatherson" slowly became a secondary persona.

The farther into the sprint we got, and the more we spoke with our client, it became increasingly evident that their intended audience was younger college and high school students; and not the broad "all college and grad students" that they had initially described.

Design Sprint

Facilitating with Figjam

To facilitate our team's sprint I set up a Figjam file which laid out brainstorming and design activities from the book "Sprint" where we organized our goals and set a clear direction

Figjam ended up being a great tool for facilitating these activities. I was able to leverage its collaborative tools and built in timer to keep the team moving along.

Sprint Focus
  • Proof of concept by testing the 'Garden Theme'
  • Add light gamification features to increase engagement
  • Scope is to improve the home screen & Module 1
    (leaving onboarding for its own sprint)
Project Goals
  • Help people with depression
  • Reduce overwhelm and friction
  • Make Mindfulness Garden more trustworthy
Design Sprint

Lightning Demos

The findings from initial tests led us to the conclusion that we had an information overload problem; Duolingo was a major inspiration due to well thought out progressive disclosure, and information architecture

Our team sought out apps that were tackling similar problems, or which were direct competitors as inspiration for our coming ideation sessions.


I presented Duolingo which became a major inspiration due to well thought out progressive disclosure, and information architecture. Learning a language is very difficult — requiring a lot of steps and information. Duolingo breaks a daunting process down into bite-size chunks, making it manageable for users instead of overwhelming.

We realized that a big challenge we were facing was an information overload and overwhelm problem - so finding better ways to break up lessons and activities was going to be key.


Another app we explored was Lake, which was presented by one of my teammates. Something we liked was how clear and easy the mood check-in was. One of our client's main challenges was defining how Mindfulness Garden's mood check-ins would look and work, fortunately, Lake gave us great inspiration for how to move forward.

Design Sprint

Solution Sketches

After running ideation sessions and discussions our team presented several potential design directions to our client; the client ultimately chose to go with the 'Isometric Garden' design

The team presented a lot of really great ideas to the client, who was very happy with all of the potential directions they could choose from. The client decided to go with the 'Isometric Garden' design since it is scalable, presents the users with constant feedback and rewards, and was most closely aligned with their vision for the project.

While I was happy that one of my design ideas was chosen, it presented us with a big challenge. We didn't actually know how to create isometric design elements! This challenge ultimately led to me learning how to create isometric designs and showing the team a few great Figma plugins that were extremely helpful.

One of my personal favorites was one of my teammate's gamified garden design that worked almost like a mobile game. Her design included trading points from activities for supplies like water and plant food, which would be used on the daily maintenance of users' flowers.

Design Sprint

Starting a Design System

Setting up the beginnings of a design system was crucial to keeping the team's designs consistent; especially as an asynchronous team

I was worried that our team would have trouble keeping our designs consistent during our limited timeframe so I suggested we create the beginnings of a design system.

We agreed to spend time creating and organizing components, especially since not having this kind of documentation had been a major pain point of ours while working with the initial designs.

This documentation also served another purpose — as it would help future teams of designers that will work on this project — making future iteration and testing much easier.

Overall, the basic design system we created was extremely helpful for keeping our designs organized and consistent which resulted in a much more cohesive final product.

Design Sprint

High Fidelity & Test Findings

The second round of testing was a huge success; Our team's redesign had addressed a majority of the pain points and frustrations uncovered in initial testing

While it was challenging to get the prototype together under the time constraints of a sprint, we were able to quickly build out our flow and all of the screens that came with it (and then some).

We recruited seven participants who were aligned with the client's target audience for this round of testing. Our second round of tests found that we had addressed the bulk of the pain points and frustrations uncovered in initial testing.

A Return Participant

I even sought out the participant from the first round of tests who made the remark about the Duolingo owl to see how she would respond to our redesign. This test was a complete 180 from the first test and she found herself actually enjoying her experience with the prototype.

Design Sprint

High Fidelity Prototype

Clear CTAs and delightful interactions helped make our redesign a big success; try the prototype above!

While I think the design was a success overall it is not without multiple opportunities for improvement. Further iteration and testing will be essential for ironing out the lingering questions of the sprint.

One of the most important questions is whether the Journey/Garden tab should be the landing page of the app or whether the Dashboard is a better option.

There is also the question of whether the garden should be in a tab called "Garden" or "Journey" among many others. Many of these jumping off points and next steps for research and testing were outlined in a four page document that we gave to our client to pass along to the next group of designers that they worked with.



Lessons Learned

Lessons Learned

Importance of user testing early and often

A lot of the issues encountered in the first round of user testing were easy fixes (with some that were much more complex). It became clear that if testing had been carried out earlier in the process a lot of the issues that we uncovered would have been resolved before our team started working on the project.

In the future I will make sure to always advocate for as much user testing as possible!

Rewarding nature of leading a design team

I was really proud of my ability to step into a leadership oriented role on this project. It was the first time I took point on leading a design team and facilitating a sprint with other designers and a client.

It took a lot of work but I was able to successfully coordinate with my team, the client, and keep everyone's bandwidth in mind as we divided up tasks and kept communication flowing.

Most importantly — since the sprint was organized and planned out, it afforded our team the ability to experiment and have fun even under such a tight deadline.

Challenges of working with clients & asynchronous teams

Async Teams
With one designer on the west coast, one designer on the east coast with a 9-5 job separate from this project, a client who kept very strict East coast business hours, and me, keeping communication flowing was a constant challenge.

To overcome scheduling challenges I set up 1 on 1 meetings, planned according to the schedules of my team, and took point in communicating with the client when necessary.

This was also a great opportunity to leverage the asynchronous collaborative features of programs like Figma. Creating narrated video walkthroughs of designs when needed was another great technique I got to experiment with.

Client Challenges
Working with a client on such a small, early stage project was a lot of fun, though it was very challenging. We had to stay light on our feet and adapt on the fly to a changing project scope, sift through information and design files to decode the project and learn its ins and outs, and quickly identify the needs of our users and our client while making design decisions.

Overall I learned that I really enjoyed the 'start up' experience and having to wear multiple hats while working on something that was constantly evolving got me extremely fired up.



Next Steps

Revamped Visual Design

New visual design alleviated the previous design's issues and is a step in the right direction — however the design still requires more iteration and testing before it's production ready.

Created Clear and Scalable Design

While there are some edge cases that will need to be solved in future iterations, the 'Isometric Garden' design provides users with easy to follow steps and can be scaled to accommodate large quantities of additional content.

Created a Design System and Next Steps Document

The design system and next steps document will be invaluable for consistency and jumping off points for future design teams to work on this project. Having clear documentation on the issues that may exist, or areas for improvement will guide future teams, and the client on what steps should be taken to make the Mindfulness Garden a success.


Next Steps

Next Steps

An important deliverable that we handed off to our client was a four page next steps document. The following are a few of the points we outlined.

  • Suggestion - an increased variety of flowers in the garden would be an improvement to visual design
  • To test - Whether the dashboard or the garden is the better landing page when users open the app
  • To Test - Should there be a popup that confirms users want to leave a lesson or activity when they press the 'X' button in the module.
  • Clarification needed - Mood check-ins do not have a specific system of when they should happen or what the app is using check-in results to track. Ironing this out would help clarify when and why check-ins are happening

Work with me

Send an email, connect on Linkedin, or fill out the form.
Always ready to talk design!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.