""

Sleep Tracker

March '24

Project Overview

Role

Role

UX Designer

&

Front-End Developer

UX Designer & Front-End Developer

Methods

Methods

Iterative Design, Front-end Development

Iterative Design, Front-end Development

Deliverable

Deliverable

Working Application

Working Application

The goals of the application are to log sleep, log sleepiness, view data, and use a database. the constraints are that it must be a mobile application, use the standford sleepiness scale, account for the user logging sleep once, and logging sleepiness many times.
The goals of the application are to log sleep, log sleepiness, view data, and use a database. the constraints are that it must be a mobile application, use the standford sleepiness scale, account for the user logging sleep once, and logging sleepiness many times.
The goals of the application are to log sleep, log sleepiness, view data, and use a database. the constraints are that it must be a mobile application, use the standford sleepiness scale, account for the user logging sleep once, and logging sleepiness many times.

Getting to Work

Logging Sleep

Keeping in mind that we needed to keep track of different dates and times on the back-end, I wanted to limit the chance of user error as much as possible. Instead of requiring the user to input their own text—which can led to typos or differences in format—we used date and time pickers, ensuring a proper format.

walking through how a user logs their sleep
walking through how a user logs their sleep
walking through how a user logs their sleep

This not only helps the user understand what is being asked of them, but helps the organization of data on the backend.

Logging Sleepiness

I wanted to ensure that users could see at a glance what they were rating, so I created two different icons:

  1. One that represents feeling awake

  2. One that represents feeling sleepy

My partner and I felt this was the best way forward as it gave them a visual representation of their feeling, rather then just providing them with a numbered scale from 1 to 7.

Viewing the Data

Viewing Sleep

I wanted this app to be as user-friendly and intuitive as possible. To do this, I decided that we should have a useful initial view. This would allow users to log and view their sleep straight from the home screen. Thus, immediately after logging their sleep, they are able to see it.

showcasing that after sleep is logged it displays when they fell asleep, when they woke up, and the duration of sleep
showcasing that after sleep is logged it displays when they fell asleep, when they woke up, and the duration of sleep
showcasing that after sleep is logged it displays when they fell asleep, when they woke up, and the duration of sleep

Viewing Sleepiness

I did not want to overwhelm the user with information every time they tried to view their sleep and sleepiness history. So as to not bombard the user with a lot of information, users are given a quick overview. There, they can see their time slept and average sleepiness.

showcasing the history tab and what it looks like when a card is viewed
showcasing the history tab and what it looks like when a card is viewed
showcasing the history tab and what it looks like when a card is viewed

If they want more information, they are able to click on the card to view each recorded log of their sleep and sleepiness.

Challenges & Adapting

Initially, I had many big ideas, which I had created both low- and high-fidelity mockups for.

high fidelity mockups for the log-in, profile, home screen, sleep data, and sleep history screens
high fidelity mockups for the log-in, profile, home screen, sleep data, and sleep history screens
high fidelity mockups for the log-in, profile, home screen, sleep data, and sleep history screens

But as we moved forward in the project, my partner and I realized that we would not have time to implement everything. So, we had to scrap a few ideas and stick to the essence of the project: logging and viewing sleep and sleepiness data.

high fidelity mockups for the home and sleep history screens
high fidelity mockups for the home and sleep history screens
high fidelity mockups for the home and sleep history screens

We ended up relying on these 4 screens to guide the code for our project.

We also had to remove the editing option for sleep and sleepiness data. Instead, we pivoted to focusing on error prevention by including a pop-up modal where the user could ensure they wanted to follow through with their action.

showcasing the error prevention popup that asks the user if they are sure they wanna save
showcasing the error prevention popup that asks the user if they are sure they wanna save
showcasing the error prevention popup that asks the user if they are sure they wanna save

Next Steps

If I continued this project, I would love to include more features that could improve it's user experience.

Specifically, I would like to:

  1. Revisit my initial designs

  2. Test prototypes with prospective users (not just friends and family)

  3. Allow the user to edit their sleep and sleepiness data

  4. Add profile features

  5. Allow users to mark their sleep goals so they can know how often they've met their goals

Reflection & Takeaways

This project reminded me that it is important to stay focused on the essence of a project, especially when given a short timeline. In this case, specifically, we had to focus on the minimum viable product.

There is a balance that needs to be maintained, where the key essence of the product is delivered while also ensuring that it can stand out amongst competitors, while being intuitive and enjoyable to use.

Overall, it is important to stay creative, yet pragmatic about what is accomplishable within a certain timeframe.

. ݁₊ ⊹ . ݁˖ . ݁ Let's work together ݁. ˖ ݁. ⊹ ₊ ݁.

linkedin

. ݁₊ ⊹ . ݁˖ . ݁ Let's work together ݁. ˖ ݁. ⊹ ₊ ݁.

linkedin