Retreavel Homepage
Retreavel.com
Performing a website redesign to improve the appeal and
sense of trust of a marketplace that provides global wellness
travel escapes and experiences.
Overview
Retreavel is a marketplace website for global wellness travel escapes and experiences with a mission is to help people travel with their health and mental wellness in mind, while enabling them to explore adventures in new places.
This redesign focuses on making Retreavel’s website more appealing to its target audience, while overall creating a sense of trust and quality for its customers.
Methods:
Screener Survey, User Interviews, Affinity Map, Persona, Journey Map, Heuristic Analysis, Competitive Analysis, MoSCow Map, Design Studio, Sketching, Wireframing, Prototyping, Usability Test, Usability Report, Functional Annotations, Spec Doc
Tools:
Miro, Figma, Zeplin, Adobe CS
Team:
Roma Patel, Zarah Ferrari, David Coughlin, and Nyesha Viechweg
My Role
For this redesign, I took part in and contributed to each phase of the UX design process (Research, Synthesis, Ideation, Implementation).
The team trusted my graphic and visual design skills to do research and make lead decisions on aspects of the website such as colors schemes, typography, imagery, and layout.
UX Design Process
Our Goals for Retreavel
As a team of UX Designers, our objective for this project was to redesign Retreavel's website to make it more appealing to their targeted audience.
Retreavel wanted help specifically with their website's color scheme, features, a way of make it clear how affordable their packages are, and more to create a sense of trust and quality for their customers.
Analyzing Retreavel's
Web Design
Web Design
We started the redesign with analyzing Retreavel's existing site's web design. We wanted to get a better understanding of how Retreavel was perceived by its users. The key things that we looked out for was how well Retreavel communicated trust to its customers, and if its site's navigation and functionality was intuitive to users. To do this, we performed a heuristic analysis, a contextual inquiry, and a usability test on Retreavel's existing site.
Heuristic Analysis
Contextual Inquiry
Search Results page
Selected Retreat page
Booking Confirmation page
Account Login page
Usability Testing
0/5 users completed
the task to book with Retreavel
the task to book with Retreavel
Research & Interviews
Conducting User Interviews
Our client was interested in what users had to say about Retreavel outside of her customers, so we created a screener survey to identify potential users to interview.
We conducted 10 user interviews to find out what people's experiences are like when booking a retreat.
Here are key questions we asked:
Understanding Our Data
affinity mapping our research data
Synthesizing Our Research Data
We analyzed and synthesized our research data by using an affinity map to find common trends across all of our users as far as their observations, quotes, and insights when it came to their experiences booking a retreat.
"If I’m going to spend thousands of dollars on a trip, I want to make sure
I can trust [the site]."
Using the research data we synthesized, we developed both a persona and journey map. One represented the needs, pain points, goals, and behaviors of our users, while the other helped us to identify an opportunity and understand our user's mindsets and emotions during their journey of booking a retreat.
Key Research Findings
Focusing on Key Research Findings
In our research, we discovered that our biggest opportunity was during the point in Athena's journey where she decided not to book her retreat on the marketplace site, due to issues revolving around trust.
Problem Statement
People use marketplace sites to do research on retreats but will often book their trip on the direct retreat website. Although Athena values all the information that a marketplace can give her, she does not fully trust the site enough to purchase a retreat through it.
How might we help Athena trust a retreat marketplace enough to place her booking?
Further Research on Trust
Discovering How to Communicate Trust in web Design
Before we decided to analyze and sketch out some redesign ideas for Retreavel's site, we really wanted to ensure we were designing for trust first.
After further research, we found a usability study conducted by the Nielsen Norman Group where they identified four basic factors used to communicate trustworthiness in web design:
Competitive Research Analysis
Conducting a Competitive Analysis
Now that we identified the problem areas in Retreavel's web design, we had a better understanding of what areas we needed to improve on in our redesign.
Before we could sketch out some design solutions, we wanted to get a full understanding of the competitive landscape and Retreavel's position in the marketplace, so we created a competitive landscape matrix.
The competitive landscape matrix helped to identify which of Retreavel's top competitors/comparators we wanted to further analyze in terms of feature prioritization and design inspiration for the redesign.
MoSCoW map
Feature Prioritization
To identify which features were intuitive, met user needs and expectations of a retreat marketplace, and aligned with the basic factors of communicating trust, we conducted a competitive feature analysis.
Here are the features we prioritized:
Design Inspiration
We wanted to get design inspiration for the redesign, so
we also conducted a competitive design analysis of Retreavel's competitors and comparators.
Here's what we looked at:
- They centered their company's logo
- They had large photos of their retreats with titles on top
- They included context on everything that they showed
- They had buttons and text on top fullscreen images
- They included multiple ways to search for their retreats (search field, primary nav, etc)
The Redesign Approach
Conducting Design Studios
Now that we knew the problem areas in Retreavel's web design we needed to improve on, the features we wanted to implement, and the design direction we wanted to take, it was time to start sketching out design solutions.
We started with a design studio which lead us to designing low-mid-hi fidelity wireframes.
Mid-Fidelity Wireframes
Retreavel Homepage (scroll on image)
Improving Retreavel's Trustworthiness
through its Design Quality
We improved Retreavel's ability to communicate trust through its 'Design Quality.' We did made sure it appeared to be legitimate and professional, and its navigation, colors, and imagery are appropriate to its business.
All Retreats page (scroll on image)
Key Design Decisions:
- while the artist fills out the track forum, they can see the track they uploaded earlier loading in the background
- we wanted our users to feel confident about filling out the forum on their own so we included clarity and tips next to each field
Improving Retreavel's Trustworthiness through its Comprehensive, Correct, and Current Content
We improved Retreavel's ability to communicate trust through its 'Comprehensive, Correct, and Current Content.' We made sure it contained a large amount of relevant content to show its organization is well informed and committed to helping its customers.
Selected Retreat page (scroll on image)
Key Design Decisions:
- to fully inform the user about everything involved with the retreat they'd potentially be booking, we provided a clear and complete section breakdown of each content
a clear and in-depth description was added to each section to make customers feel confident in the information given
Selected Retreat page (scroll on image)
Improving Retreavel's Trustworthiness through its Upfront Disclosure on Information
We improved Retreavel's web design by making sure it was upfront with all information that relates to its customer's experience.
Booking Confirmation page (scroll on image)
Key Design Decisions:
- all cost and expenses of the retreat were broken down to show our users price transparency
- a 'checkout as guest' option was added to the 'Booking Confirmation' page so users didn't feel pressured to be a member to book a retreat
Mid-Fidelity Usability Test Findings
According to the results we gathered during our mid-fidelity wireframe testing, we successfully improved Retreavel's ability to communicate trustworthiness to its customers.
Ideations & Implementation
Iterations to Hi-Fidelity Designs
After conducting a usability test on our mid-fidelity wireframes, we made appropriate iterations to help us develop our hi-fidelity wireframes and prototype.
Key Design Iterations:
- On the 'Selected Retreat' page, a detailed description of the "print itinerary" button was added so that users knew what the button meant
- On the 'Selected Retreat' page, under the Price Breakdown section, information about what wasn't included when booking the retreat was added so that users knew what they would not get when booking with Retreavel
- On the 'Booking Confirmation' page, a lock icon was added to the Credit Card Number entry field so that users felt more confident that their payment was secure
5/5 users completed
the task to book with Retreavel
the task to book with Retreavel
Final Thoughts
Key Takeaways and Next Steps
Based on the results we received from our mid-fidelity and hi-fidelity usability tests, we were able to meet our client's goals for Retreavel by not only making it more appealing to its target audience, but really overall creating a sense of trust and quality for its customers through a new visual design approach, fixed usability issues, added features, and the power of good design quality, comprehensive, correct, and current content, and upfront disclosure on information.
The next steps for this redesign will be iteration on the hi-fidelity prototype, and a design studio and testing on other primary navigation pages such as the About, Contact, etc.