Float House Design Evaluation & Website Re-Design (2023)
Contribution
User Research, User Testing, Prototyping
Type
User Research
Client
Float House
Team
Sam Newaz, Jasper Precilla, Cherie Nie, Kelly Handy
OVERVIEW
Float House is a Vancouver-based alternative therapy spa and sauna that offers three types of services: hot-cold therapy, float therapy, and infrared sauna. My team was contracted to evaluate their current booking experience for first time visitors and the overall first-timer user flow. Through our user research, heuristic evaluation, and user testing, we were able to identify key pain points while using their website. We then focused on prototyping and testing a new user flow for first time visitors, ultimately, delivering a research report of all of our results which Float House would later implement aspects of within their own website.
This project was completed as a senior-level design evaluation course. I was a UX Researcher in charge of conducting a heuristic evaluation, usability testing, wireframing, and prototyping to analyze the usability of the current website.
OBJECTIVES
This project strives to identify the current issues of the website for new users and implement interventions which create a better user experience through focusing on these usability goals:
Learnability
how easily users can learn the website
Error Prevention
how easily users can recover from errors
User Satisfaction
how pleasant is the interface to use
THE PROBLEM
The current Float House website makes it difficult for a first time visitor to navigate and properly digest the information they need to understand the company's services. Additionally, inaccessible information and features make the booking process clunky; deterring people from making an appointment.
THE SOLUTION
Our final design proposal for Float House's first-timer user flow prioritized improving the navigation to the account details, making detailed information consolidated and accessible on the service pages, and simplifying the booking process. These changes allow users to get the information they need before booking an appointment more seamlessly while also ensuring they have the items and waivers required to go into their appointment.
THE PROCESS
Applying a Heuristic Evaluation
To familiarize ourselves with the Float House website, I conducted a heuristic evaluation as a user visiting the website for the first time based on Jakob Nielsen's 10 interaction design principles. My team outlined a series of tasks and goals for each member to accomplish for an overview of the entire website and listed out pain points along the way.
Heuristic Tasks:
- Learn about the different services Float House has to offer
- Go through the steps to book an appointment for a service
- Prepare for the appointment by watching orientation video and signing the liability waiver
- Cancel the upcoming appointment
From this evaluation, my team and I pinpointed 4 major issues which currently existed on Float House's website:
Based on these high-severity findings, our team identified three of Jakob Nielsen's general principles for interaction design that, if improved, would significantly enhance the website's usability.
A/B Testing
Moving forward, we gathered 2 groups of users who have never used Float House's website or services. Group A tested for the original website while Group B tested the prototype that our team produced to see which site was more seamless to use through think-aloud tests. Additionally, each study was conducted online using a computer through screen and audio recording.
Synthesizing the Data
After the think-aloud tests, I identified issues from the quotes and observations I wrote down and gathered with my team to begin affinity mapping; establishing common themes for areas of improvement.
Main themes/issues:
- cancellation hard to find
- confusing "Book Now" calendar
- couldn't find account creation and info
- too many re-directions makes navigation difficult
- users don't want to watch long videos - want in writing
- excessive amount of scrolling
These interviews re-affirmed my findings from the heuristic evaluation while also discovering new issues that would lead to these 4 main insights:
Beginning to Prototype
Re-defining Art & Design
The loading screen sets the tone for the website by engaging visitors to define what art and design is in relation to the screened films. A load-in animation of images helps spark curiosity in drawing users into the content.
Art vs. Design
Interviews with the creators featured in the films encourage viewers to shift perspectives between art and design. The background context provided about each film helps visitors gain deeper insights, helping them make more informed interpretations.
Seeing Past the Film
Additional creative works from the artists featured in the films allows visitors to deep dive into their influences and sub-culture in order to further reflect on the spectrum of art to design.
Reflecting on the Film
The recap card encourages active participation from visitors to share their thoughts on a specific film and where they place it on a scale from art to design.
User Flow
The insights gained from Group A's testing made me realize the purpose of the first-timer button on the current site is to get first-time users to sign the waiver and book a session. However, this does not align with how first-timers typically interact with sites. So, our team decided to change the user flow of this process so it would align with our research.
- Consolidating information to the services page
Before users decide to book, they look at the service and want to see what it offers.
- Tasks for first timer users are completed after they book
The difference between a first-timer and an existing user is that they need to sign a waiver form.
Wireframing
Once the user flow was properly mapped out, I assisted in creating low fidelity wireframes while maintaining the general layout and branding of the original website. My main focus was to explore different ways we could present the information without straying too far from general interactions users are familiar with in other commonly used website.
With Float House's branding in mind, we kept the bright and lively colours that they are known for while also adjusting the contrast for some colours and sizing of text to ensure all elements on the page are distinguishable against the white background. Buttons and hover states were also established to have all pages of the website remain consistent with each other.
Breakdown of the Prototype
After finalizing the user flow, wireframes, and style guide, I prioritized improving the navigation to the account details, making detailed information consolidated and more legible on the services pages, and simplifying the booking process.
This was achieved by:
- adjusting the content within the pages to reduce the amount of scrolling.
- Clarifying copywriting to give more informative descriptions about the services
- Removing the amount of external links to reduce page jumping while condensing information onto 1 page
REFLECTION
Things to Work on:
While the FAQ page in the services tab allowed users to feel more informed, it also made the users looking at this page wonder if they have already read the questions before. Thus it could use more refining. Another thing that could be improved on is the usage of pictures. The first-time users who tested the prototype expressed a desire for more images to help them understand the establishment and extent of Float House's services.
What I Learned:
From this project, I learned the importance of ensuring user testing is well organized and prepared before going into these sessions. By having pre-test questions, post-test questions, and specific tasks outlined, it provided an easier experience for the user to speak freely with their concerns, while additionally, avoiding confusion. Moreover, I gained the experience of A/B testing and how effective it can be to test and compare different versions of websites or apps in order to evaluate better user experiences.
