Role
User Research
Product Strategy
UI Design
Interaction Design
Usability Testing
Tools
Figjam
Notion
Maze
Figma
Slack
Timeline
5 weeks
3 team members
The Problem
The primary issue with the original app was that it was a bit too convoluted. The information you were given felt out of order, was a lot to take in, and sometimes it was just non-existent. The cold shower challenge is meant to be easy to find and navigate through, but it is not prominently showcased on the app in an easy to find location. These factors deterred new users from starting or continuing to use the app.
The Solution
To solve this problem we simplified the process through a restructuring of hierarchy and the on-boarding process, added animated elements to engage users visually, and re-framed the user flow. By the end we were able to create a simplified and more engaging experience for new users.
Usability Review
We began by conducting a usability review where we broke down our pain points and wow moments of the challenge process. By the end of the review we found that there was more that we found frustrating about the app than expected.
Business & User frustrations
Based on the results of our usability review, we encountered two primary frustrations.
Primary Frustration
When information is being presented, it is inconsistent and disorderly, making it difficult for the user to follow along and inevitably making the user abandoning the app out of frustration. This results in the loss of potential for future business in other paid feature that the app provides.
Secondary Frustration
When users (new or returning) are interacting with the app, they encounter accessibility issues with the branding due to using a mix of colors that do not follow WCAG guidelines, a lack of visual cues to guide them, and a consistent voice through typographic hierarchy. This can leave users misinterpreting the brand, and for those with vision impairments keeping them from using the app at all.
Competitor Benchmarking
After completing the usability review, we moved onto competitor benchmarking where we compared one indirect and two direct competitors to the Wim Hof app in order to identify anything that may help us resolve our stated frustrations.
Problem Space
By combining the results of the usability review and competitor benchmarking, we were able to define the problem space
Who is affected
New users trying to understand the product.
What is the problem
New users have difficulty finding and navigating through the cold shower challenge
Where does the problem occur
The problem can be found starting on the home page, the challenge home, onboarding, settings, and timer.
Why does the problem occur
The problem occurs due to pages being overloaded with information, no clear direction on how to start the challenge, and no instruction on what the settings do.
Why is the problem important
The problem creates a poor experience for new users, detering them from returning to use the app as a whole due to initial frustrations.
When does the problem occur
The problem occurs as you start the first day of the challenge and as you navigate through the interface
After defining this problem space, we came to one conclusive statement to guide us in our ideation process using a "how might we" statement.
How might we simplify the shower challenge process in order to retain user engagement after the first day?
Ideation
Now that the problem has been defined, we moved into the ideation stage where we created a mind map consisting of items we wanted to improve upon and add. We took those items and selected the ideas we found best matched our solution and each completed a crazy 8's challenge to rapidly visualize these ideas.
We took those items and selected the ideas we found best matched our solution and each completed a crazy 8's challenge to rapidly visualize these ideas.
After visualizing these concepts we narrowed down our ideas further and completed a priority matrix, which helped us prioritize our tasks.
What can we add
We can add animated timers and progress bars to give the user a visual cue regarding their success, as well as including a voice command feature to assist those with disabilities that would inhibit them from doing the challenge otherwise.
What can we improve
We can improve upon the UI to make the colors match the brand voice, to ensure the colors pass WCAG guidelines, and to ensure that imagery and iconography resonates with the real world. Additionally we can restructure the home page to highlight the challenge, allowing users to find it more easily.
User Flows
Before we could dive into sketching out our ideas, we needed to restructure and define the flow of the challenge by creating the current user flow, and refining it to match our goals.
Rapid Prototyping
Once the user flow had been established we moved onto creating our wireframes through rapid prototyping.
Styles
After testing a few tones in Stark, we were able to find the perfect palette.
We chose Inter as our primary typeface to convey a futuristic, modern tone as a reflection on this new age trend.
Components
We used our styles to create a comprehensive set of components to ensure that our prototype would be completely interactive and engaging, and to allow the team to easily replace components within the high-fidelity prototype using assets and iterations. We carefully assigned micro-interactions to each component to create visual cues for the user as they select something or move onto the next stage of the challenge.
High Fidelity Prototype
After creating our design system, we combined that with our wireframes, designed a set of interactions to enhance the user experience, and created the final product that you see below.
Usability Testing
Once we finalized our prototype, we used the program Maze to create a usability test for users to give us detailed feedback on our prototype.
Test outcomes
The best piece of feedback we received was:
"I loved the experience overall. I noted the things that frustrated me, mostly lots of text that I'm not gonna read. Also, you would need to keep in mind that people are gonna end the challenge maybe with wet hands so my recommendation is to have a bigger CTA o maybe even make it round and more prominent especially because the "timer" UI is a bit known to be round.
In the duration of the challenge, there was a play button in the middle, which I don't know what it's for if the challenge is already, it would be more intuitive to have a pause one in the middle."
Three key learnings
The majority of users who tested our prototype had a very positive reaction to the simplicity of the interface.
While voice activation is a great asset for those who can use it, ensuring that our buttons are larger is important to keep the app accessible.
Even with narrowing down the copy from the original onboarding process, it was still too much text on a page for users to read. In the future this should be really chopped down and separated into different sections of the challenge.
Next steps
In the next iteration of this app, we would like to re-structure some components such as the timer control on the timer countdown page to create clarity that the user can pause the timer, as well as creating a larger informational button to indicate that the user can access a voice command panel if they need a reminder of the command words. We would also like to focus more on the onboarding section, cutting down more copy and refining the process so that the information is easier to retain.
