Overview
Serene is a meditation mobile app that delivers the essential features that their target audience, beginning meditators, will enjoy. Their brand reflects the benefits that meditation is intended to deliver which includes feeling calmer, less anxious and being more productive. I was tasked with developing the look and feel of their mobile app and ensuring that it not only met their goal but also coincided with their brand as well.
Identifying the Problem
The main goal was to get free users to upgrade to their $2 premium version. However though, the problem is that with many free alternatives and competitors in the app stores, there's not much motivation for users to pay for additional benefits and features.
Developing the Solution
The plan was to focus on delivering an enjoyable premium-like user experience through effective design decisions in order to get users to stick with the app and eventually upgrade. To achieve a premium-like experience, a modern design was used with a simple and clean layout, rounded corners and glassmorphism effects.
With the target audience being primarily beginners, it made sense to focus on a simple theme as to not overwhelm them with too many elements. Effective use of color and typographic hierarchy make it easier to navigate throughout the app as well.
To emphasize the brand's message of calming and peacefulness, a soft pastel-like gradient is used as the background on the majority of the screens. This background is also representative of a sunrise and sunset which are heavily associated with calm and relaxing feelings.
With the target audience being primarily beginners, it made sense to focus on a simple theme as to not overwhelm them with too many elements. Effective use of color and typographic hierarchy make it easier to navigate throughout the app as well.
To emphasize the brand's message of calming and peacefulness, a soft pastel-like gradient is used as the background on the majority of the screens. This background is also representative of a sunrise and sunset which are heavily associated with calm and relaxing feelings.
The Process & Final Comps
A style guide for this project was developed with their font (IBM Plex Sans) and orange and purple colors in their brand being the only mandatory elements (supportive colors were added). Sketches (not shown) and wireframes (not all are shown) were then developed to establish the layout and structure of the pages.
Changes to the style guide were also made after each round of revisions. With the structure in place, high-fidelity comps were created and ready for development once they were approved.
Style Guide - Typography & Color Palette
Wireframes
High Fidelity Comps - Onboarding Process
High Fidelity Comps - Homepage, Description & Prayer
High Fidelity Comps - Settings Pages
Phone Mockups - Onboarding Process
Phone Mockups - Homepage, Description & Player
Phone Mockups - Settings Pages
