Case Study | UI/UX Design

1. Concept

1.1 Nappuccino Concept

What is Nappuccino?

The concept is simple—drink a coffee, then take a 15-25 minute nap. By the time you wake up, the caffeine has kicked in, and you’re hit with an extra-strength jolt of energy.

This sounds so much better than taking herb supplements for an energy boost.

1.2 Project Timeline

2. Research

2.1 Survey Results

Frequency of naps

2.2 Marketing Research

Nap Rescues Performance

2.3 The benefits of a daily nap

2.4 Affinity Map

Some interviewees' views on taking nap and drinking coffee.

2.5 Competitors


Main Features

1. Playing special music helps people fall asleep
2. Music played throughout the night to maintain a stable
sound environment and prevent users from being woken
up by the outside world.
3. Use three-minute audio to wake users up


1. 1. Not focusing on nap
2. There is no guide to let user into a resting state
3. Lack of alarm reminder function


Main Features

1. Play soothing & peaceful alarm sound to help users have a good sleep
2. Sleep time wakes you up gently at the lightest sleep stage
3. Receive sleep score & analysis about duration and sleep cycle


1. No focusing on nap/ sleep process
2. Lack of alarm function

2.6 Mind Map

3. Problem Statement

People are always groggy in the afternoon after a nap.

They feel that the nap does not help them to be full of energy.

4. Persona

4.1 Pesona - Ty Swindle

4.2 Persona User Flow

Task 1: Complete an Nappuccino experience

Users creates new account and completes the first time of Nappuccino.

Task 2: Check reminder list

Users check the reminder list and start today’s nappuccino task.

4.3 App Wireflow

5. User Testing & Improvement

5.1 Before & After

User Testing Feedback

6. Final Work

6.1 User Interface Design

Final design after user testing & improvement

6.2 Homepage

6.2 Nappuccino page

6.2 Nappuccino page

6.2 Reminder page

7. Style Guide

7.1 Logo Sketches

7.2 Final Logo

Clear Space and Style Guide

7.3 Color

7.4 Typography

9. Conclusion

Summary Takeaway

1. Modern people's life and work are very stressful, and they often feel lack of energy in weekday afternoons.
2. Nappuuccino is a health and scientific way to help people have a better nap and a more productive afternoon.
3. I encourage new users who haven't tried Nappuccino to give it a try through the app.
4. Nappuccino also has the Reminder feature, which can remind users to take a nap every day.

How the Project grows

The reason for starting the project is to help users have a more efficient afternoon to work and study through nappuccino. Therefore, the first step at the beginning of the project is to let users who have heard of nappuccino for the first time know what nappuccino is and how to do nappuccino. In the app, I chose to inform the user of the definition of nappuccino at the beginning, and the main task flow of the entire app is to help new users complete nappuccino following the steps. At the same time, it also sets a reminder function to help users form the habit of taking a nap and completing nappuccino every day, so that they are full of energy every day.

What I learned

Through the project of Nappuccino, I feel that if users want to experience a new thing or a new method, it is important for them to understand and want to try. In the process of interview and user testing, many interviewees do not know what nappuccino is. So, I learned that in order to attract users to the APP, it was important to tell the story clearly.