OVERVIEW:
Tasked with the goal of creating a mobile-based application that re-imagines the experience of waking up, our team developed Mindful Mornings, an app that seeks to create a less stressful environment through forming better habits.
TIMELINE:
2 weeks
TOOLS:
Figma
TABLE OF CONTENTS:
01 User Research
02 Design
03 Takeaways
01 CONTEXTUAL RESEARCH
USER ISSUES:
Alongside my team of 3 classmates I first approached the question of "how can we re-imagine the experience of waking up?" by conducting research on common issues that general people might have during the process of waking up. Some of the ideas included:
-too many things to check (alarm, weather, calendar, reminders, are all in different apps)
-sleep inertia and abrupt disruption
-time wasted through scrolling
-morning anxiety
SOLUTION IDEATION:
Individually we brainstormed possible solutions that could be integrated into an app and collectively agreed upon prioritizing distraction minimization and home device integration.
COMPETITIVE USABILITY:
Many apps already had features to track habits and control various home devices. We pulled out areas of improvement such as:
-controlling distractions
-comprehensive functions
02 DESIGNING MINDFUL MORNINGS
LO-FI WIREFRAMES:
I worked on the welcome screen and the app-locking function as well as developing the design system and overall user flow.
DEVELOPING A DESIGN SYSTEM
COLORS: calm and natural colors to emulate the sky, minimizing strain on the eyes
FONTS: simple, sans-serif, minimal, easy to look at during early mornings and late nights
HI-FI WIREFRAMES:
We decided upon contrasting interfaces given either night or day mode while highly concentrating on seamless user flow through matching gradient scroll transitions.
03 TAKEAWAYS AND FINAL DESIGN
After receiving feedback from our professor and peers, we focused on strengthening the core functionalities and pages through rearranging various positioning of buttons to create a more intuitive design. With differences in the smallest details such as transitioning the screen from right to left according to the transition pointing right, users get closer to a seamless experience.