Take time to reflect.
Medito
A re-design of the mobile app for an excellent mindfulness resource.
Project Type
Redesign, Volunteer Work
End
04/16/2025
Role
UX Designer, UX Researcher
Start
02/24/2025
Medito
~
a redesign
~
Medito ~ a redesign ~
Quick Links
01 Overview
Medito is an excellent free mindfulness resource for everyone around the world to use. Medito is a non-profit organization that provides its services through government funding, grants and donations as their mission is to keep Medito free for free for everyone. What exactly is mindfulness? Well according to Medito, it is being fully aware of whatever is going on in your current experience, with acceptance and without judgement.
Mindfulness does not just mean meditation, it is the process of living in the present moment and not letting the past or future change your mood and outlook on life today. You can practice it while walking or playing a sport or spending time with your friends. Mindfulness in this digital age of hustling in a fast-paced environment is crucial in terms of stress management, mental health and peace. And what better way to improve your life than using a free resource that is available at any time and is in the palm of your hand.
02 The Problem
Though Medito is an excellent free resource, there comes an issue when an app relies on grants and donations. One is the funding side of the equation, which results in less people working on the app due to a lack of funding and resources. Additionally, Medito has made many changes to the visual layout of their app that is has resulted in a lot of confusion for active users. Though some of the innovations and revamps have aided the user experience, there are some changes that hinder the app from achieving its peak performance on a usability, functionality and visually appealing front.
Here are some of the key issues that were currently plaguing Medito users in the mobile app (based on primary and secondary research):
A light and dark mode increases the user experience by incorporating user preference into the design as well as accessibility. Users may want to toggle between the two modes for aesthetics or accessibility issues such as strain on the eye.
A lot of the external links on the mobile app can include pages so all the content is in house. This would increase the trust between users and the product as they are not redirected to unknown URLs all the time.
Following design principles like Gestalt’s principle of proximity and similarity can help users identify elements that serve similar functions and can reduce confusion; especially for new or less tech-savvy users.
03 The Design Solution
The Double Diamond Design Process was used to separate the design process into 4 smaller phases comprised of two main phases: the problem phase and the solution phase.
Discover Phase
Recognize the problems at hand, conduct primary and secondary research, analyze the data from the research, complete a competitive audit
Primary research included exploring the Medito mobile app as well as their website to see if there are any outstanding design problems to be considered for the redesign.
Some of the issues that stuck out include:
UI elements such as the cards in the “Explore” section are inconsistent in size and proportion
Some of the user flows within the app lead to external sites and links
Visual balance and layout can be simplified with an appropriate colour scale and typography (brand identity) to invoke more emotion into the user experience of the app
Secondary research involved conducting a competitive audit on the app and website for Headspace. Headspace is a resource that is a direct competitor to Medito as it allows users to focus on mindfulness and create a more peaceful life throught the act of being mindful.
This is what stood out in Headspace:
Great visual balance and use of negative space
A clear brand identity with visual elements such as typography, iconography and images to invoke emotions
Great features such as suggested daily routine and reminders to keep users engaged
Additionally, some of the secondary research was done by using Apple Store and Google Play reviews of Medito’s mobile app.
Most of the Medito reviews were positive but of the negative ones, the common issues that apparent was to bring back the old and simple UI as it was easier to navigate.
Define Phase
Synthesize insights, add feature priorities and determine the requirements for the design solution
Upon reviewing the research in the Discover Phase, key requirements were given priorities to determine what issues will be tackled first in the redesign and what requirements were more important than others.
The scale consists of:
P0 - high priority, needs to be included in the redesign
P1 - medium priority, important issue that should be incorporated and discussed in the redesign
P2 - low priority, if time permits this feature or requirement would be a bonus and improve the user experience of the redesign
Develop Phase
Conceptualize ideas (vision board, low-fidelity wireframes), explore visual identity (layouts, colours, typography) and start designing
Low-Fidelity Wireframes
〰️
Low-Fidelity Wireframes 〰️
Low-Fidelity Wireframes were made on paper than transferred to digital wireframes to conceptualize the new design of the Medito app
Typography
〰️
Typography 〰️
Note: the typography in these graphics are enlarged to showcase higher quality imagery, the scale of the text size, line height and letter spacing is the same.
For the headings, the typeface Inter was chosen as it was a bold sans serif font that has a font weight to allow users to differentiate between important sections and tabs.
And as for the text, the typeface Josefin Sans was chosen as it was a playful font that pairs well with the emotions of joy and peace to align with Medito’s brand identity.
