Type of project
Bootcamp assignment

Length
6 weeks

Role
UX research, UX and UI design

Tools
Figma

Arise, your personal sleep coach app

Design brief for Arise described it as ‘a sleep tracker to help you reach your sleep goal through tracking your sleep and providing content to support your sleep health’. The app was going to cater to young professionals and students, and while interviewing users I’ve discovered that they didn’t want a tracker - they wanted a personalised sleep coach.

When working on this project, I have gone through the whole design process, from the initial research, through the define phase, then ideating and designing the final product, while seeking feedback and testing the product with users at various stages.

Below is my step-by-step design process and one chosen user flow. You can also play with the interactive prototype for this flow: from the home screen all the way to the playlists and the player. Enjoy!

See the prototype

Empathise.

Competitor Analysis

First, I compared different mobile apps, direct and indirect competitors for Arise. I looked not only at quantitative data, like pricing and rating, but also all available features and users’ written feedback, to then summarise it in a SWOT analysis format. This helped me identify a niche in the market.
User Interviews

In parallel with competitor analysis, I conducted detailed user interviews with the representatives of my target audience. I gathered information about their sleep quality, habits, challenges, experiences with other apps or technology, and expectations for a sleep aid or tracker.
User Personas

Information gathered through the user interviews enabled me to create a couple of user personas. It not only summarised my findings, but also highlighted both the similarities as well as some competing needs and priorities from different audiences.
User Journey

I then mapped out a user journey for one of the existing products, a competitor’s app, Calm. It helped me realise what are the potential highlights and pitfalls at different touch points, and allowed me to plan a better experience for my own product.

Define.

User Research Analysis

As I’ve analysed and then mapped out the key themes and findings from User Research, I found out that my users need more than a sleep tracker - they need a holistic app that helps them build better routine supporting their sleep health.
Affinity Mapping

It became clear that the app design should be based on 3 main principles: 1. acting like a sleep coach, 2. be easy to personalise, and 3. be science based. I’ve gathered all the ideas for potential features and started affinity mapping to build a first draft of the information architecture.
User Testing

I have tested my first draft of IA with the users. They have validated most of my ideas, but added some very insightful comments. Their input helped shape the look and feel of the landing page and the tone of voice throughout the whole app.
Information Architecture

The main menu for Arise guides the user through 24h of wakefulness and sleep: starting with the Bedtime Routine, then helps them Relax and fall asleep, to later allow for Gentle Wake Up. After that, they can check their Daily Rhythm, including energy peeks and dips, and access Sleep Health Tracking data.
User Flow

The User Flow I chose to explore next, was the longest one in the whole app. I had to make a decision between smaller number of clicks but more options showed in one screen, or longer flow but cleaner UI. I let the Hick’s Law to guide me here, and chose less options at once, to lower the cognitive load and allow the users to relax better.

Ideate.

Lo-fi Wireframes

When designing each screen, I started with low fidelity wireframes drawn by hand. I would initially challenge myself to come up with 8 ideas in 8 minutes, using the Crazy Eights method, to then pick best design to explore further.
Mid-fidelity Wireframes

Once I had a good idea of what the general layout would look like, I’d start translating my paper wireframes into low to mid fidelity greyscale designs in Figma. This is where I could see elements in scale, especially once I’ve added some copy.
Final Wireframes

I checked the final wireframes for my chosen user flow for consistency before applying any colour and graphics, and made sure the sizes of buttons and spacing were appropriate for accessibility.
Exploring Colours and Typography

In the meantime, I developed the Design System for my UI, including expanding the colour palette using Arise brand colours and setting up the typography.