Mindfulness Garden
How utilizing gamification in a mindfulness app increases engagement and decreases overwhelm in students with depression
How utilizing gamification in a mindfulness app increases engagement and decreases overwhelm in students with depression
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
Create high fidelity screens based on existing designs
Overhaul the visual design and address usability issues uncovered in testing
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
