Suelta
Mobile App
UX // UI design case study
Project Overview
Suelta mobile app is a sauna booking app that enables users to prioritize their health and well-being whilst connecting with the local community. The purpose behind Suelta is to teach people about the health benefits associated with hot and cold therapy and in particular, Finnish-style saunas. The app allows users to browse services and pre-book their own sauna sessions.
​
Purpose
This case study was part to start creating the first designs of the mobile app, and responsive website for a mobile sauna business launched by myself and my partner this year. The idea derived from a trip to the coast of Ireland in 2022. As the business is just starting out, the App is an MVP. As the business grows and develops we will continue to test and optimize the app.
​
NantoSuelta,
Pronunciation; [Nanto - Swelta]
Meaning; the Celtic goddess of nature fire and fertility
​
Skills
Wireframing
Prototyping
User Research
UX Design
Visual Design
Usability Testing
Tools
Figma
Miro
G Suite
Role
UX Designer/Researcher
​
Problem statement
Suelta app users need a way to browse sauna services, and pre-book and pay for their sauna sessions in an efficient and easy way. Users also want to understand how, why, and when you should sauna.
​
The goal
Suelta Sauna app will give users the opportunity to enjoy an activity that benefits their health and well-being whilst spending time with loved ones or meeting other members of the community.
​
Business needs
Suelta mobile app needs to provide users with an effective user-friendly way of booking a sauna or ice bath session, in order to keep up with their competitors. They also need to include a way to generate more revenue without compromising the customer experience, as the Sauna can only hold a certain amount of people. Suelta Sauna hopes to achieve this by promoting memberships and packages to drive a more consistent stream of revenue.
Double Diamond design approach
The design framework that was chosen for this case study was the Double Diamond. What makes the Double Diamond approach the perfect framework for understanding customers, is it's emphasis on divergent and convergent thinking.
​
-
Divergent thinking -- Think broadly, with an open mind, and consider anything
​
-
Convergent thinking -- Think narrowly, bring back focus, and identify one or two key problems and solutions
To allow innovative problem-solving, ideas, and solutions are created and refined twice in this model. At the beginning to confirm the problem definition, and then a second time to create the solution.
Discovery Phase
In order to better understand the user and create insight into the problems, I conducted a variety of exercises as part of the discovery phase of the Double Diamond approach.
Discover
User research
Competitive Audits
Define
Personas
User Journey Maps
Problem Statements
Personas
By summarising the common goals, behaviors, motivations, and frustrations observed from my research, I created two primary user personas with different requirements, from completed different backgrounds.
.png)
Journey Mapping
I mapped out what I imagined both my person's journey would look like when trying to book a local sauna session via an app/website.
​
This gave me some real insight into what pain points could appear for each persona/user of my app. This also gave me an understanding of what features could be key for a positive user journey to ensure all users are considered.
.png)
Insights and Questions
"How might my users want to pay for their sauna, would there be a cash payment option?"
"How would my users share their booking with a friend to invite them?"
​
"How would users interact with the app in a way that makes them feel at ease?"
​
"How would my users locate the sauna with ease?"
"How would my users book instantly on the run"
"How could I make first-time users feel comfortable and prepared?"
Competative Audit
A Competitive Audit was conducted with other similar offerings in the market. This helped me learn more about the competition, and understand their product offering in more detail. This also helped me identify potential opportunities
where Suelta could outperform them with a more unique or appealing service offering.
​​
Insights and Key takeaways
​​
"How might we offer a competitive price offering to present as an accessible service?"
"How can we clearly present the health benefits of saunas in an easily digestible way?"
​
"How can we provide a streamlined booking and payment experience?"
"How can we make it simple and quick for revising users to book instantly"
"Can we leverage strong visuals to set a reassuring tone of the brand by giving the user an idea of what to expect?"
Develop & Design Phase
I used brainstorming activities such as 'How Might We' and sketching techniques to generate ideas that help define design problems.
Ideate
Sketches
"How Might We"
Low-fidelity Prototypes
Sketching Initial ideas...
Keeping in mind the opportunity uncovered in the competitive analysis, I leveraged the Crazy 8's method to quickly come up with potential design ideas.​ Sketching is a quick and efficient way to brainstorm layout ideas​
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
For the home screen, I prioritised a book now button to help users complete a booking user flow quickly, this also helps to increase booking conversions.
​
​
"How Might We"
How might we statements help highlight potential opportunities. This is a great activity to frame insights and then develop them into tangible outcomes. It also encourages you to think outside the box and explore ideas that you may not have initially considered.
​
-
How might we make it simple for the user to browse packages and individual services?
-
How might we show the user the benefit of our services?
-
How might we make the purchase process super easy for the user?
-
How might we build features into a website that will help generate repeat business, to increase sales?
User Flow
-
The user journey begins with the customer searching the Suelta Sauna app
-
The user interface is clean and neutral
-
The user is able to make an instant booking with a 'book now' CTA on the home page
-
The user is able to easily browse the app and learn more with the hamburger icon in the top left
-
The user feels at ease as the app lists all services available with the drop-down option to add more
-
The user is able to easily progress to checkout and select multiple services or packages
-
The user has the option to log in and use saved credit card details to add a payment easily
-
The user understands she has successfully made payment and confirmation details will follow as the app displays clear prompts to inform the customer of completion and the next steps
![Google UX Design Certificate - User flow [template].png](https://static.wixstatic.com/media/99ab4b_88c511c16620452a9f04034f38dc8d2c~mv2.png/v1/crop/x_9,y_0,w_951,h_540/fill/w_534,h_303,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Google%20UX%20Design%20Certificate%20-%20User%20flow%20%5Btemplate%5D.png)
Wireframing for quick Iteration
Once I had a better idea of how everything would fit together on each screen, I wanted to test my solution with a few users to ensure I was on the right track. So I pulled together some wireframes and got feedback from 3 people who had also participated in the first round of a usability study.
Key pain points identified
-
It was observed that most participants did not like to idea of being asked to log in upfront. They want to browse and learn before handing over credentials
-
It was observed that most participants did not see the point of a bottom navigation bar, it was just taking up room
-
Some participants expressed the need for a 'book now' button on the home screen for frequent users that want to just make booking on the run
Refine the Design
Taking into consideration lessons learned from the research, design iterations, and insights from my usability studies, I was able to land on a final design that met user needs.
Prototype
Mockups
High-Fidelity Prototypes
Test
Usability Testing
High-Fidelity Prototype
The final high-fidelity prototype presents a clear user flow for selecting a sauna service, progressing to checkout, and completing the payment.
Final Design
1
2
3
4
Design features
​​
1) 'More information icons' - These icons show throughout each stage of the booking user journey. When selected they show the user a pop-up window with more information about the service, in case users forget what is included. This will help new or hesitant customers feel reassured they are booking the right service.
2) Large brightly colored CTA buttons - This was used as part of the design to ensure a more accessible design.
​
3) 'Book now button' - This button was included on the home screen to help frequent users, make instant bookings.
Also for busy users trying to book on the run, this helps users book quickly.
4) 'Get Directions' - This design feature was chosen to help new customers find us and feel prepared for their visit once they have booked. This also benefits users booking instantly, so they can head straight to the location once they have made payment.
Usability Testing
After creating UI components, I conducted usability tests and compiled a few key points for improvement on the visual design.I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
​
“It would be better if you can just scroll the date and month to easily select the date you need to book, also maybe include a calender icon so you can do this easily for bookings far in the future"
“I can't tell how long each time slot is, it would be good to include this along with the time”
“I don't know where my booking details will go, this makes me feel a bit nervous, how do I know it's confirmed?"
“I understand you can learn more in the services section, but what about when I am selecting the service I want? I might forget the difference. Would be good to add a 'more info' icon here"
Suelta Sauna brand guidelines