Sleep Tracker

Helping users keep track of their sleep and sleepiness throughout the day.

3 screens of the BabySteps app, from left to right: how-to nursing videos, home screen, and the baby selection screen.

Role

UX Designer &
Front-End Developer

Partner

Christian Martinez

Duration

March - March 2024
(2 weeks)

Skills

Interaction Design
Visual Design
Front-End Development

Tools

Figma
Angular
Ionic

Project goals are to log sleep and sleepiness, as well as store and view data. Key constraints are making a mobile application, utilizing the standford sleepiness scale, and assuming the user only logs sleep once, while logging sleepiness whenever they want.

Getting To Work

Logging Sleep

Keeping in mind that we needed to keep track of different dates and times on the backend, 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 lead to typos or differences in format— we used date and time pickers, ensuring a proper format.

Animation showing the use of date time buttons to select when a user woke up and went to 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: one that represented feeling awake and another to represent feeling sleepy. I then utilized a range slider so users could easily pick how they were feeling.

Animation showing the use of a slider tool, ranging from awake to super sleepy.

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

Viewing the Data

Viewing Sleep

The main goal here is to make viewing sleep user friendly and intuitive.

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.

Viewing Sleepiness

The main goal here is to minimize the clutter of viewing sleepiness.

I did not want to overwhelm the user with information every time they try 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 their average logged sleepiness for that day.

Animation showing a user logging their sleepiness level, navigating to the sleep history tab, and picking a certain date to view the data for.

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 lo-fi and hi-fi mockups for.

High fidelity mockups of initial screen designs: including splash page, log-in, landing page, statistics, and history.

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 of the home and sleep history page.

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.

Animation showing a pop up modal that comes up whenever the user tries to save sleep or sleepiness.

Next Steps

If I continued this project, I would love to include more features that could improve its 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 & 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 stands out amongst competitors and is intuitive and enjoyable to use.

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