(Visual and UX Designer)
Float House
My team partnered with Float House Vancouver to evaluate their website and deliver a report that contains results of our user research, heuristic evaluation, prototyping, and user-testing. By identifying key pain points, we provided solutions that Float House would later implement within their own website.
Introduction
(Context)
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. Float House had just undergone an interface revamp of their website, thus we were contracted to examine their user booking experience for first time visitors and the overall first-timer user flow.
(Goal)
This project strives to identify the current issues of the website for new users and implement interventions which create a better user experience through achieving 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
Understanding the Problem Space
(Problem)
The current Float House website usability and accessibility issues make it difficult for a first time user to navigate and properly digest the information they need to understand the company's services.
Process
(Heuristic Evaluation)
To familiarize ourselves with the Float House website, the team did a heuristic evaluation for a first time user. We 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
(Key Findings)
As we finished all the set tasks, we found 4 major issues while using the website.
(Heuristic Recommendations)
Based off these high-severity issues we came across, we determined 3 main heuristic recommendations that would improve the usability of the website.
(Think-Aloud Testing)
To validate our findings, we conducted 7 think aloud test for the original float house website so that we could gain a better understanding of the users thoughts while navigating the website. During the test, participants were asked to explore the services offered as well as the booking and cancellation process to gain more insights on the first-timer user flow.
(Synthesizing the data)
After gathering the data, we identified issues during the User-Testing along with quotes and observations from the think-alouds in an affinity map to identify common themes where the site could improve.
Main Themes/Issues:
Main Themes/Issues:
- Cancellation hard to find
- Account creation
- “Book Now” calendar
- Too many re-directions makes navigation difficult
- Users don’t want to watch the long videos
- Too much scrolling
(Think-Aloud Insights)
From these interviews, we were able to both re-affirm the data we gained from our own heuristic evaluation and also discover new issues that would lead us to these 4 main insights:
Prototyping
(User Flow)
By narrowing down our insights, The purpose of the first-timer button on the current site is to get first-timer users to sign the waiver and book a session. However, this does not align with how first-timers typically interact with sites. So, we decided to change the user flow of this process so it would align with our research.
1. Consolidating information to the services page
Before users decide to book, they look at the service and want to see what it offers.
2. Task for the first time users are completed after they book
The difference between a first-timer and an existing user is that first-timers need to sign a waiver form.
1. Consolidating information to the services page
Before users decide to book, they look at the service and want to see what it offers.
2. Task for the first time users are completed after they book
The difference between a first-timer and an existing user is that first-timers need to sign a waiver form.
(Wireframing)
Once the user flow was properly mapped out, we created low fidelity wireframes, keeping in mind the branding of Float House.
(Breakdown of the Prototype)
Once the user flow For the prototype, we prioritized on improving the navigation to the account details, making detailed information consolidated and accessible on the service pages, and simplified the booking process.
This is achieved by enhancing the contrast of the buttons and text to ensure easy reading. We also reformatted and adjusted the copy of pages that were deemed too long or required lots of scrolling.
This is achieved by enhancing the contrast of the buttons and text to ensure easy reading. We also reformatted and adjusted the copy of pages that were deemed too long or required lots of scrolling.
Before:
After:
Conclusion
(User Testing Results)
After conducting another think-aloud test for the prototype with a new user group, we gathered our data and synthesized again our key takeaways for this new version. From this feedback, we found that users liked our layout of the information and felt well-informed while looking through the services page. Users also found the booking and cancellation processes were straightforward and easy to understand.
(Reflection and Things to Work on)
What I learned:
Effective user-testing 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 I definitely now understand how effective it can be to test and compare different website versions,After conducting another think-aloud test for the prototype with a new user group, we gathered our data and synthesized again our key takeaways for this new version. From this feedback, we found that users liked our layout of the information and felt well-informed while looking through the services page. Users also found the booking and cancellation processes were straightforward and easy to understand.
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 is the usage of pictures. The first-time users who tested the prototype expressed want for more pictures to help them understand the establishment and services better.
Effective user-testing 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 I definitely now understand how effective it can be to test and compare different website versions,After conducting another think-aloud test for the prototype with a new user group, we gathered our data and synthesized again our key takeaways for this new version. From this feedback, we found that users liked our layout of the information and felt well-informed while looking through the services page. Users also found the booking and cancellation processes were straightforward and easy to understand.
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 is the usage of pictures. The first-time users who tested the prototype expressed want for more pictures to help them understand the establishment and services better.
(Next Project)
CaseIt 2022
