Overview
Stillness is a meditation app which is available on Android and iOS. Users have access to a variety of different meditation styles and are rewarded for regularly using the app, as they are continuing to practice self-care.
Objective
I undertook this project as part of the CareerFoundry UI Immersion course to develop my skills as a UX/UI designer. The project brief was to create an app of my choice, but it needed to have both an iOS and Android version. As an advocate for meditation and self-care I decided it would be a great subject for my app. Both versions of the app would need to follow the distinct brand style guides to provide familiarity to the two different user groups.
Details
Role:
UX/UI Designer, Branding
Tools:
Adobe XD, Adobe Illustrator, Adobe Photoshop, Microsoft Word
Duration:
3 Months
Prototype:
My Role
-
Researched both iOS and Android platforms
-
Performed competitor analysis
-
Learned about sound and haptic feedback
-
Demonstrated mobile gestures
-
Produced mid-fidelity and high-fidelity wireframes
-
User tested iOS and Android prototypes
Approach
1. Research Mobile Platforms
To begin with I had to study the design guidelines for both Apple and Android devices, to see how they construct and style mobile apps. I looked at Android’s Material Design Guidelines and the Human Interface Guidelines for iOS. I now know precisely which typefaces, icons, colour palettes and UI elements each operating system currently uses to style their apps and how they implement all these components to create products which always feel familiar to their users. With this, I began to consider what the necessary design differences would be for the two variations of the Stillness app.
2. Competitor Analysis
The most popular meditation apps for both devices are currently Headspace and Calm. Before thinking of features for my own app it was important to look at these competitors to see what they provided users, how easy were they to navigate and was anything missing which my product could offer?
Both apps provided extensive libraries of meditations as well as a range of other services, such as fitness and music features. However, users could only access the large majority of this content if they had a paid subscription. The free to use content was incredibly limited and this was the gap I aimed to fill.
3. User Flow Diagram
Before I began designing the screens for the app I created a user flow diagram to map out which screens need to be included and how users would navigate between them. This diagram would work as an initial blueprint for which features would be available within the app and how many screens I would need to design.
4. Mid-Fidelity Wireframes
Now I had an idea for what I wanted my app to be, and understood the different requirements for iOS and Android, I started creating mid-fidelity wireframes which would demonstrate the basic app layout.
For this particular project this involved downloading the current UI tool kits for Android and iOS so I would be able to properly implement device specific UI elements and patterns, such as keyboards, typefaces and buttons.
For what I wanted to achieve the app would function the same way on Android and iOS, and the only visual difference would be how elements display on the two screen sizes.
5. Mobile Gestures
Once I finished the mid-fidelity wireframes, I labelled the screens with icons which explained how the user would be able to interact with the design. The gestures consisted of standard interactions such as taps, scrolls and swipes. This procedure would be important if I were working on this app with other designers or sending it to developers, so they could easily understand how the product would work.
6. High-Fidelity Wireframes & Prototyping
After looking at Headspace and Calm I knew I wanted my app to have a minimalist design with nature imagery, to give users an environment that felt inviting, safe and easy to navigate. It was very important to provide users with a stress free and intuitive interface.
I experimented with a couple of visual styles before arriving at a simple but calming colour palette, the sans serif font Poppins and vector graphic versions of natural landscapes for the app’s imagery. I created the high-fidelity wireframes in Adobe XD and used Adobe Illustrator and Adobe Photoshop to edit the images.
With these designs I produced working prototypes for both versions of the app - Stillness (iOS) and Stillness (Android)
7. User Testing
I recruited a handful of participants to user test the prototypes. Android users commenting on the Android version and those with iPhones experiencing the iOS version. It was important that the participants had prior experience with the chosen operating system so they could comment on the familiarity of each design.
I asked each of them to explore the app and to let me know what they thought of the navigation, layout and visual design. The feedback I received was overall very positive, many stating they really liked the imagery and colour palette.
8. Logo Design
Although the feedback was predominantly encouraging, there were a couple of areas which needed to be worked on. Primarily, there was no logo for the app anywhere in the design and the app name was only mentioned in the notifications message. The app was originally called Care, but this was deemed a bit generic by some of the user testing participants, so I decided to change the name to Stillness.
After deciding on a new app name, I designed a few possible logo options in Adobe Illustrator, most of which having some relation to the natural world to match the imagery of the app. The chosen logo has a simpler typeface design but still resembles nature. The letters on the second row are transparent, in an attempt to seem like a reflection of the first row, similarly to the way water reflects its surroundings.
Challenges
The biggest challenge for me was deciding on a visual style for the Stillness app. I experimented with a number of different styles but many of them didn’t quite match the content of the app or the environment I wanted to create for the users. I liked the idea of the app having an abstract art design, but the imagery of mountains, lakes and night skies definitely felt more relevant.
Conclusion
When I started this project, I aimed to design a meditation app which was easy to understand and accessible to both Android and iOS users, and the product has achieved these goals. Both versions of the app provide familiarity to users, are easy to navigate and look visually appealing.
Moving forward I will make sure to keep up-to-date with the latest iterations of the iOS and Android design systems so the apps I work on feel modern and utilise all relevant future functionalities.
