UI/UX Design • Product Design • Branding
Problem: Existing products that assist with learning the fundamentals of mindful meditation are either too expensive, poorly developed, or both.
Solution: Design an accessible and delightful mobile application to assist people suffering from stress, anxiety and other emotional struggles.
Tools Used: Figma, Illustrator, Photoshop
Respire focuses on teaching the user mindful breathing techniques guided with audio and visual experiences designed to treat specific emotional imbalances. Respire is designed to create positive thought patterns that promote mindfulness and destroy negative habits.
The most important aspect of meditation is the breath. While experimenting with various meditation related apps, I noticed a lack of products that provide intelligent and reliable help with learning and practicing breathing techniques that make mindful meditation easier and more beneficial.
Having learned the benefits of mindful meditation, I strongly believe that people shouldn’t have to work or pay so much to have access to learning an irreplaceable skill that can help preserve one’s mental and emotional health. That’s when Respire was conceived.
Respire’s branding was designed to illustrate the honest and straightforward approach to solving this problem.
One thing I continue to see fall short in a lot of unsuccessful products is the careful attention to the user’s experience. Even though I am not an expert when it comes to UX, I understand what makes an experience friendly, meaningful and satisfying. I did my best to create a roadmap with the least amount of friction and confusion.
When designing a User Interface, it's great to start with low fidelity wireframes that help get an accurate grasp of layout and hierarchy of elements on every screen the user comes across. This stage also helps ensure user-friendly navigation and determine how minimal and familiar the entire UI should be. For Respire, the main goal was to design the UI so that it complements the linear navigation UX.
When translating mockups into hi fidelity, I realized what elements of the UX needed fine-tuning. Respire’s design system is meant to be cohesive, focus on functionality, and use color to separate different features from each other, making wayfinding a breeze. The bold and simplistic layout of elements not only support the ease of wayfinding, they follow predicted trends of 2018.
Color is definitely one of the most important aspects of this product. Each color and gradient is derived from the branding style guide, but also heavily influenced by the different Chakras of the spiritual body.
Low Fidelity Wireframes
High Fidelity Mockups
At this point, Respire is still a work in progress. As an ongoing side project, tasks like refining the design system, conceptualizing animations, and diving deeper into features and data tracking will be super exciting.
Respire has been such a fun and fulfilling project to work on. For me, there is nothing more satisfying and rewarding than being able to design for something that is meant to have a positive impact on our environment and humanity as a whole.