A UX and UI project, exploring responsive design by creating a web app for mobile
and desktop. This web app, called SleepSmart, focuses on sleep health.
and desktop. This web app, called SleepSmart, focuses on sleep health.
SleepSmart is designed for individuals who struggle to get enough sleep and would like to get into a regular sleep pattern. The web app provides users with a personalised sleep or bedtime plan to meet their unique needs and goals. Unlike other sleep apps which provide one-off sleep help, SleepSmart creates a long-term plan which gradually eases users into changing their sleep routine so they can reach their goal, using exercises and activities they have selected.
Walkthrough of SleepSmart features shown on desktop
Features of SleepSmart
There are three main pathways through the SleepSmart web app, which are all accessible straight from the home page. Users are able to select from the three different pathways – start a sleep plan, start a bedtime plan and take a sleep quiz. Both the sleep plan and bedtime plan options guide users through a variety of steps to identify the specific issue they are experiencing, select some appropriate methods to try and then personalise the structure of their plan before generating their personal plan. The third option to take the SleepSmart quiz is for users who are unsure on which plan is best for them. After answering a series of questions, users are shown which plan is most suitable for them.
The main features of SleepSmart shown on a mobile device
User interviews and testing
User interviews highlighted a range of different sleep struggles experienced by different individual
and although each were unique, there was a common theme, the lack of structure to the user's sleep and bedtime experiences. Whilst many people know about methods to improve their sleep, few implement them on a regular basic or use them more than once. As a result, a key goal for SleepSmart is to help ease people into different sleep help methods and keep them using the methods over a period of time by having a personalised schedule plan.
and although each were unique, there was a common theme, the lack of structure to the user's sleep and bedtime experiences. Whilst many people know about methods to improve their sleep, few implement them on a regular basic or use them more than once. As a result, a key goal for SleepSmart is to help ease people into different sleep help methods and keep them using the methods over a period of time by having a personalised schedule plan.
Alongside interviews, user testing was carried out at an early stage in the SleepSmart design process before the web apps branding was applied. By doing so, a mid-fidelity version of SleepSmart could be tested by the users to ensure the main features of the web app were easily understood by the users. Additionally, watching the users navigate the prototype of SleepSmart, was key in identifying the problems and navigational concerns of the design.
To explore the design process of SleepSmart, click through the design report below:
