Client
Revive Salt Room & Infrared Sauna
Scope
4 Weeks (160 Hours)
Role
UX/UI Designer
Tools
Figma, Adobe Illustrator
Context
The perfect space to relax, recharge, and revive. Located in historic downtown Cambridge, Wisconsin for a self-care experience to remember. Lounge in the Himalayan Salt Room for a dry salt therapy (halotherapy) treatment with numerous benefits, detox and purify in the infrared sauna with chromotherapy and full-body red light therapy, and book an appointment with their on-site medical aesthetician (Amanda Reed Skin Care) for all your skincare needs.
Challenge
Revise the current website and work on information architecture based on user insights and create a responsive e-commerce site that functions across all different devices
Solution
Develop a functional website for users to book upcoming experiences
These are the high-level goals and objectives:
Who would want to utilize the services of a salt room and infrared sauna spa?
Why would people want to do this treatment?
When they use this service do they book on a website, app, or in-store?
What makes a person feel safe about Revive?
Some challenges or pain points that could arise using Revive?
Research
Secondary research
I ran a competitive analysis and started with searching for direct competitors and noting ones that sparked my attention. I was looking for businesses that fit the concept of what Revive has to offer and what Revive aspires to be. I also thought it would be beneficial to check out non-local businesses that offer the same services as Revive, in addition, I also researched indirect competitors, like spas, hair salons, etc.
Competitive Analysis
What I found:
I was able to identify the strengths and weaknesses in relation to Revive’s competition. I gained the ability to gauge the competitors and refine Revive’s strategy. This defined our design decisions and overall product strategy. I was able to make the following recommendations for Revive:
Revive’s color palette and tone works for them and should continue to use that branding
Include more imagery, it’s beneficial for the customer to see what they are getting into
Add a pricing page
Add accolades if there are any to get a trusted brand for the customers
Keep the educational information easy to digest
Add about section - include team bio and introduction to the Revive experience
Moderated Testing
In addition to preparing a competitor analysis, I visited Revive’s biggest competitor in the area, in person. I tried out their infrared sauna and noted my experience from the beginning of the entire process, to the end. That would include, from the purchasing point to leaving the salt and sauna after my session was completed. I also booked a salt room session with Revive from the beginning of the entire process to the end.
1x1 User Research
To gain direct insights, I set up 1x1 user interviews with select participants. The interviews were conducted over the phone and I used a script to ensure I was getting answers that I needed answered. To help me choose participants, I created an Instagram story on my personal page and asked people to select if they have ever used an infrared sauna or a salt room. This helped me get a diverse group of users that would be able to provide me with information from both points of view.
User interview summary:
4 Participants; Asked about their self-care regimens and online booking experiences
What I learned from users:
The participants all had similar likes and dislikes, with the exception of a few things that were different. Most of them practice their own self-care at home, by either exercising, doing their own skin-care routines, or ‘treating’ themselves. Here are some of the common goals and frustrations of the participants.
The Users
Define
Project goals
Revisit the branding for Revive and develop a style tile and a UI kit.
Design a responsive e-commerce website that’s easy to use and allows users to browse through available sessions and package options
The website should also provide information about how the service works in order for people to understand and trust the company
Key findings include:
Sitemap
After clarifying the project goals, and completing the research phase, I began to work off of the structure of the current website and took my recommendations from the competitor analysis into play. I determined what could improve the current site and what currently hinders it. I then created a sitemap as a key visual to move into the next step.
Ideate
Task Flow and User Flow
By identifying the flow that the user will follow to complete the main task, I created a path to the key screens that would be a part of the major design. This narrows down how many steps would be necessary for a user to complete a specific task. Building on the task flow, I mapped user flows whose scenarios correspond to the established tasks. After completing this, I discovered what pages I needed to incorporate for the site and what I needed to design for users to successfully complete those tasks.
Low-fi Wireframes
Using my sitemap, I started creating sketches to build out the possible directions the website could take. The sketches were taken to the next step by creating wireframes in Figma. Starting with the low-fi wireframes allowed me to outline how I would create a consistent layout across all pages and devices. I was able to focus on establishing placement and not worry about the UI.
Branding
Style Tile and Responsive Design
Using the fonts, colors, and logo treatment that was provided by Revive, I used this to get a sense of what the vibe would be for the site. The style tile provided insights into the type of imagery that would be used on the website. Using the style tile, I built off of the low-fi wireframes and implemented the colors and typography I think will work best.
UI Kit
Using the responsive UI designs, I was able to see what kind of buttons and call-to-actions would be needed throughout the website. For consistency purposes, I developed a UI kit to plan out how the type, colors, and buttons would be treated on the website.
Desktop Prototype
Using my high-fi wireframes, I built out more website pages that would be necessary in a user completing a usability test. Each screen was developed using the UI kit and the style tile. Once the prototype was ready, I developed a list of test objectives.
Tasks to complete
You want to book a single session in an infrared sauna, how would you do that?
You want to learn more about halotherapy, how would you do that?
You would like to do price comparisons, where would you locate the pricing?
Testing
Usability Testing
Conducting the testing:
My main goal was to gain insights on the user’s pain points, frustrations, and positive moments using the Revive site.
During the usability testing I learned:
User patterns: Users start either at the navigation, scrolling the whole site, or navigating to the footer
Potential solutions: Making some section moves, adjusting type thickness
Confusions:
Some of users were confused about the wording of sections and buttons
Learnings and next steps
Learnings:
During the secondary research phase, I learned the most. I learned mostly how to go about organizing the user interface of Revive’s website. I found it to be very insightful about the different ways these services can be broken down. I’m grateful for the user insights to help steer this project in the right direction. Another assumption I had was that most people know what these services entail, but they do not. A lot of people think that they know, and they have particular assumptions. I found this to be very helpful when including how to address what information would be displayed on the homepage and within each service that is offered to the users on Revive’s website.
Next steps:
If Revive decides to use the website that has been created for them, I would ask how they would like the information handed off, if it is to a developer - I will hand off using Figma. I plan to share all of my research and user insights with Revive so they will have all of the information that was uncovered throughout this entire process.