RSS 5 October 2018

Comfort Shatter App prototype

App prototype

#branding#case-study#english

UI/UX design for mobile app prototype

“Most people live in a restricted circle of potential.”
-William James

Who is the app for?

Our mobile devices have become an indispensable part of our lives: we carry them everywhere we go, so why not use them for a bit of life coaching? Comfort Shatter is for people who want to improve their personal growth and development; the daily challenges create a positive feedback loop that can help with happiness and fulfillment.

Proposal

Comfort Shatter is an app that brings users challenges to break out of their comfort zone. It offers different packages and dares to face social fears, improve self-esteem, and challenge the limits. It allows users to track their own progress, invite friends, and share their daily wins on social networks.

Wireframes

Starting with some sketches. get the ideas out of the head and down on paper.

Picture of a book with handmade sketches
First draft with user flow.

Design inspiration

Looking for some vibrant colors for a modern palette, friendly monsters to represent the challenges, rounded shapes, and brush fonts.

Vibrant colors, friendly monsters.
Mood board of inspiration

Designing the app

Time to work on some high fidelity mockups. Looking for color contrast, adjusting character design and setting the rules for future screenshots.

Screenshots of the mobile app
High fidelity mockups.

Guidelines

Montserrat as the main font for legibility across the site and VTS Supermarket sale for outstanding titles. Using round shapes and circles for a friendly look and feel.

Fonts and color palette.
Design elements and guidelines.

User flow

Sketching the user flow before building the final prototype.

screenshot of mobile app with arrows showing the user flow
User flow sketch.

Final prototype

The final mockup with interactions before getting into development.
Built with InVision Studio and InVision App. Monsters built with Adobe Illustrator.

Comfort Shatter from Mariana Beldi on Vimeo.

Let's stay in touch.

mbeldi@gmail.com