A habit-forming app to make cold showers your daily routine.
Role
UI/UX Design
Timeline
4 months
Project
Digital Experience Design
Tools
Figma, Miro, Google Forms
What I did
Storyboarding, UI design, UX Research, Wireframing, Participant Recruiting, Usability Testing
Launch
Project Goal
Design an intuitive and engaging interface that encourages users to explore the app's features.
Implement functionalities that help users in building the routine of taking cold showers daily.
Conduct usability testing with a target audience to identify areas for improvement and refine the app based on user feedback.
Implement design iterations based on user feedback to improve the app's usability and effectiveness.
The Problem
Taking daily cold showers has been linked to numerous health benefits, including improved blood circulation, enhanced mood, and increased resilience. However, despite these benefits, many people find it challenging to incorporate this practice into their daily routine due to the initial discomfort which results in lack of motivation to form this habit.
The Solution
Inspired by Nir Eyal's book "Hooked: How to Build Habit-Forming Products", Cold Rush uses a gamified approach to tackle the challenge of building a daily cold shower habit. The app leverages the Hook Model's four elements to create a frictionless and rewarding experience. With level-based challenges and progress tracking, the app keeps the user motivated and engaged.
Scope of Work
Strategy
Ideation
Storyboard
Skeleton
Wireframes
Style Guide
Scope
KANO Model
MoSCoW Method
User Flow
Structure
Surface
UI Design
Usability Testing
Storyboard
Jack wakes up at 8 AM in the morning.
TRIGGER
He receives a motivational daily reminder to take a cold shower.
ACTION
He opens the app on his phone and selects one of the levels he wants to proceed with.
He clicks on the “Start” button to proceed with the session.
He takes a cold shower for a specific time as per the session.
REWARD
On completing the task and 7 days streak, he is rewarded with a meditation guide.
Based on his previous achievement, he is granted access to a new challenge.
INVESTMENT
Jack views his statistics and feels motivated to achieve more.
KANO Model
To ensure the app catered to user needs, I employed the Kano Model during the process. This method helped in identifying the Basic, Performance and Delighter features, ultimately increasing user satisfaction and retention.
MoSCoW
In addition to the Kano Model, I used the MoSCoW technique to prioritize features based on necessity and practicality. This prioritization helped with a strong foundation while leaving room for future improvements based on user feedback and needs.
Must Have
Reminders
Onboarding Q/A
Streaks
Statistics
Meditation Exercises
Benefits
Levels
Should Have
Custom Shower Time
Delayed Timer
Meditation Techniques
Challenges
Could Have
Audio Guides
User Curated Playlist
Mood Tracker
Coaching
Biofeedback Integration
Temp. Recommendation
Community Sharing
Won’t Have
Real-world Rewards
Premium Content
Chat Forum
Custom Avatars
Light and Dark Theme
User Flow
Wireframes
Style Guide
Primary colors
#008080
#0077B6
#FAEBF2
#EDE6FA
Additional colors
#7FDB7F
#7FDFE1
#FF817A
#FFA65D
#FFEA7F
#6ED3FF
#C0AAFF
Grayscale
#06121C
#686868
#E8E8E8
#F2F2F2
#FFFFFF
Nunito
is an ideal choice for a mobile app aimed at habit building due to its clean and straightforward sans-serif style, which provides excellent reading on smaller mobile screens. Nunito's rounded letterforms convey friendliness and approachability.
Regular
Medium
Semibold
Bold
Icons and Buttons
Sign Up
Sign In
UI Design
Onboarding
The onboarding process takes a step further, encouraging user investment through goal reflection. The questions prompt users to define their desired outcomes from cold showers.
Home Page
The UI is intended to be transparent and actionable, encouraging users to easily initiate their cold shower depending on available challenges or levels that meet their needs.
Challenges
A card-based layout with progress indicators and difficulty levels enables users to quickly track their progress and select appropriate challenges to stay motivated and progress in their habit.
Challenge Overview
It provides clear instructions for the challenge, including the cold shower duration and the post-shower exercise with its benefits. This detailed information helps users perform the challenge effectively.
Timer
The app features a three-part timer with a selectable delay and hot shower phases. This approach helps users to track the entire shower routine, by offering precise control on their preferences.
Rewards
The rewards effectively encourages consistent cold showers by highlighting past achievements and reminding users of the valuable exercises they've unlocked.
Statistics
It visually summarizes the users’ progress across multiple metrics. This appeals to the users to maintain or beat their personal records.
User Testing
The overall interface was well accepted by the participants. The clickable elements were clear, and there was no frustration while interacting with the prototype. In general, the platform was considered quite user-friendly and straight-forward for most of the tasks, even as a first time user.
The most important element acknowledged by the participants to be improved upon was the visual hierarchy of the homepage to create a clear and more logical navigation experience for them.
Identifying Participants
The screener survey assisted me in ensuring that the user testing sessions were conducted with the most relevant participants in order to gain more valuable and actionable feedback to refine the app.
22
Surveyed People
Eligibility Criteria
Participants should have existing interest in cold showers.
Participants should express a willingness to try them for potential health benefits.
Participants should be comfortable navigating mobile apps.
Testing Tasks
The user testing tasks covered the app's essential user journey, which included all four Hook Model aspects. This allowed for a complete understanding of how users interacted with the app and engaged with its features.
01
Reading and responding to the notification on the screen.
02
Completing the onboarding process.
03
Choosing a challenge and completing the cold shower challenges.
04
Choosing a level and completing the cold shower challenges.
05
Viewing meditation techniques received in all the levels.
06
Finding instructions on how to perform box breathing.
07
Finding the entire duration of cold shower till date.
05
Interviewed People
35
Completed Tasks
125
Minutes of Conversations
Performance Summary
85.4% tasks were successfully completed by the participants. All 5 participants completed all tasks in the usability testing session.
Participants
Task 1
Task 2
Task 3
Task 4
Task 5
Task 6
Task 7
Avg. Score
P1
P2
P3
P4
P5
Final Score
S
S
S
S
S
S
S
S
S
S
S
S
S
P
S
S
S
S
S
S
S
S
S
S
S
S
S
P
P
P
P
S
S
S
S
100
85
57
85
100
100
60
60
80
100
100
85.4
100
Successful
Partially successful
Task Analysis
Users struggled with the home page and thought "challenges" and "levels" were interconnected activities, despite the fact that they were not.
“On selecting different levels, the challenges on home screen did not update/change, so I got confused if the level got selected or not” - P4
Users did not understand what the "Rush" button is for. They couldn't understand where the button takes the user at first.
“Felt that the "Rush" CTA will allow user to customize time” - P5
User couldn't figure out that the "Start Session" CTA on the previous screen directly starts the timer and do not have to play it manually.
“Why is there a pause button?” - P2
Users felt complex to understand what the delay, hot and cold on the screen is trying to tell.
“I got confused if the slider represents selecting temperature” - P1
Users felt the necessity of having other login providers like google and facebook.
“I would like to see sign up with google option because just adding my email id make it much more easy to access” - P3
Hypothesis and Testable Design Ideas
Hypothesis
The current design of the home page leads users to believe that "challenges" and "levels" are directly related features, causing confusion when they discover they are separate activities.
The label and placement of the "Rush" button are unclear. Users don't intuitively understand the button's function or the destination upon clicking it.
The current display of the delay, hot shower, and cold shower sections on the timer screen is too complex for users to understand intuitively.
The labeling of the "Start Session" button is unclear. Users don't realize that clicking it directly initiates the timer.
Users find it frustrating to create their account during the onboarding process and prefer the convenience associated with existing login methods.
Simplest Change to the Problem
Establishing a connection between challenges and levels by associating each level with a distinct color.
Eliminating the “Rush” button to address user’s confusion will potentially streamline a cleaner interface and improve the user experience.
Changing technical terms like “Delayed Time” to more user-friendly language and complementing it with clear icons.
Changing the label of “Start Session” to “Begin Timer” which directly focusses on the timer functionality.
Integrating login options through external providers like Google and Facebook would improve user experience and account creation.
Proposed UI Changes
Following the user testing session, the SCAMPER method helped identify improvements in the UI. With this problem-solving approach, it was able to iterate the UI to address user feedback.
Home Page
1
Combine
Previously, the separate designs for "challenges" and "levels" on the home page create confusion for users. They mistakenly believe them to be interconnected, leading to frustration when they discover they operate independently.
The proposed solution addresses this problem by combining their visual identities. By assigning a distinct color to each level, users will see that color reflected in the challenges associated with that level.
2
Eliminate
The current "Rush" button presents a usability hurdle. Its unclear label and placement leave users unsure of what it does or where it takes them. Eliminating this element removes the source of the problem and streamlines the interface. This reduces clutter and ensures users are focusing on core functionalities of the app.
Before
After
Challenges Page
3
Modify
In the first iteration of the challenges page, challenges were scattered across different difficulty levels (beginner, intermediate, advanced) with no clear organization. Additionally, colors were assigned randomly, offering no visual cues to the user.
Challenges are now organized by their designated difficulty levels (beginner, intermediate, advanced). This creates a clear progression, allowing users to easily identify challenges that match their experience and comfort level. Additionally, each difficulty level is assigned a specific color, which is used consistently throughout the page. This visual cue reinforces the difficulty progression and makes it even easier for users to navigate.
Before
After
Activity Page
4
Substitute
The previous "Start Session" CTA suffers from a clarity issue. While it might suggest initiating the cold shower experience, it doesn't explicitly convey the timer aspect. Due to a lack of clear communication, users feel they must take extra steps (such as manually beginning the timer) after choosing "Start Session".
This problem is tackled by substituting the "Start Session" label with something more specific, such as "Begin Timer". This clearly explains the button's primary function, which starts the countdown for the cold shower experience. It eliminates the doubt about needing additional steps after clicking the button.
Before
After
Timer
5
Substitute
The previous timer screen utilizes technical term - "Delay" for the initial preparation period before the cold shower. This kind of language, while accurate, is confusing for some users, especially those new to the app.
This problem is addressed by changing the technical term to more user-friendly language - “Preparation Time”. Additionally, the slider feature in the previous iteration has been replaced by icons alongside the new labels. This additional visual cue will be useful for those users who process information visually or who may struggle to understand text.
Before
After
Onboarding
6
Adapt
The account creation process acts as a roadblock during onboarding, hindering user experience. Users find it frustrating and time-consuming, to sign-up their details and setting a password. This frustration can lead to abandon the app before even exploring its features.
This problem can be tackled by adapting login options through external providers like Google and Facebook. Users can simply sign in with their existing credentials, making the app experience smoother and more inviting.
Before
After
Key Takeaways
Applying Nir Eyal’s Hook Model reinforced the importance of triggers, actions, variable rewards, and investment in shaping habits by creating a continuous enagement loop that keeps users engaged.
Understanding how external and internal triggers drive actions, coupled with reward systems and user commitment, helped design a more compelling and habit-forming experience that encourages long-term adoption.
Conducting a screener survey helped select relevant participants from the target user group, ensuring the research gathered genuine pain points, leading to more insightful and actionable findings.
One key learning from the project was the importance of small and incremental achievements such as earning badges, unlocking levels or maintaining streaks. These milestones created a sense of accomplishment, making the habit feel more rewarding and attainable.