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

Retreavel.com

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
Retreavel.com

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

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                                       

Retreavel.com

                                      Contextual Inquiry                                     

Retreavel.com

Retreavel Homepage 

Retreavel.com

Search Results page

Retreavel.com

Selected Retreat page

Retreavel.com

Booking Confirmation page

Retreavel.com

Account Login page

                                        Usability Testing                                       

0/5 users completed
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
Retreavel.com

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.

Retreavel.com

"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.

Retreavel.com
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. 

Retreavel.com

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. 

Retreavel.com

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: 



Retreavel.com

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
Retreavel.com

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.com

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.

Retreavel.com

All Retreats page (scroll on image)

Key Design Decisions:

  1. while the artist fills out the track forum, they can see the track they uploaded earlier loading in the background

  2. 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.

Retreavel.com

Selected Retreat page (scroll on image)

Key Design Decisions:

  1. 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

  2. a clear and in-depth description was added to each section to make customers feel confident in the information given 

Retreavel.com

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.

Retreavel.com

Booking Confirmation page (scroll on image)

Key Design Decisions:

  1. all cost and expenses of the retreat were broken down to show our users price transparency

  2. 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:

  1. On the 'Selected Retreat' page, a detailed description of the "print itinerary" button was added so that users knew what the button meant

  2. 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 

  3. 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


Hi-Fidelity prototype

5/5 users completed
the task to book with Retreavel
Final Thoughts
Retreavel.com

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.