Retreavel.com 

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. 

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.

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

IMPLEMENT

IDEATE

SYNTHESIZE

RESEARCH

the UX Design Process

Research & Synthesis

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.

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: 

1

What do you do when

you are going through

a tough time?

We wanted to know what our users' behaviors were like when  it came to going through a tough time, and if booking a retreat was in part. 

2

What does the word 'wellness' mean to you?

We wanted to know what our users' mental models were when it came to 'wellness,' to see if it matched Retreavel's definition and the retreats it offered. 

3

Have you experienced a

time where you felt

a sense of trust when booking a trip?

We wanted to discover what parts in the process of booking a trip gives our users a sense of trustworthiness. 

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.  

1. Heuristic Analysis

Findable

Accesible

Clear

Communicative

Usable

Credibility

Controllable

Valuable

Learnable

Delightful

Minor Problem

 

Minor Problem

Medium Problem

Minor Problem

Major Problem 

some labels are unclear and need to be rephrased or include more context in order to understand

each page should include a title so the user knows where they are at all times

there are labels that lead to empty pages, both spelling and grammatical errors, and features that don't work 

with the low amount of retreats offered, the site doesn't do enough to highlight their value 

does not meet or exceed user expectations due to design choices, errors, and missing information

2. Contextual Inquiry

Homepage

5/5 users were confused
by what some of the
labels meant

5/5 users didn't understand Retreavel's value proposition

4/5 users noticed the navigation bar last 

Search Results Page

5/5 had usability issues
with the filter feature

Selected Retreat Page

5/5 wanted to see more
authentic pictures

5/5 wanted a more in-depth itinerary and information
relevant to their purchase

5/5 wanted a more
in-depth price breakdown 

5/5 wanted specifics and 
more details about what
the price included

Booking Confirmation Page

5/5 users were confused
why the booking confirmation
page was treated as a
shopping cart 

5/5 felt like there wouldn't
be a shopping cart on a site 

Booking Confirmation Page

5/5 users disliked and didn't understand why they had to
have an account to book a
stay at a retreat 

3. Usability Testing

SCENARIO: 

You are having a stressful week and want some time to take care of your body and mind. 

TASK: 

Book a retreat that fits your interest. 

I could go somewhere else and feel better about my purchase. It doesn’t feel like an institution I can trust. A trip is important… I want to feel secure when I make my purchase.

0/5

users fully completed the task to book a retreat on Retreavel

Retreavel Existing Site Test Results

Analyzing and 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.

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.

ATHENA

Age: 29

Job: Web Developer
Income: $50-100k
Location: NYC

If I’m going to spend thousands of dollars on a trip, I want to make sure 
I can trust [the site].

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.

1

Athena wants to go somewhere to replenish her mind and body

when going through a

tough time.

2

Athena compares multiple travel marketplace sites to

get the best deal, while staying on budget.

3

Athena does not trust

third-party websites with her booking information.

 

How might we help Athena trust a retreat marketplace enough to place her booking? 

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. 

Ideation & Implementation

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:

 

Design Quality

Users trust a site that appears to be legitimate and professional. Both the landing-page content and the main navigation should be well organized, and the site should also use an appropriate color scheme and imagery  (www.nngroup.com)

Comprehensive, Current, and Correct Content

Thorough information related to the business exudes expertise and authority. Users appreciate sites that contain a large amount of relevant content because it shows that the organization is well informed and committed to helping its customers (www.nngroup.com)

Upfront Disclosure on Information 

Users appreciate when sites are upfront with all information that relates to the customer experience. This includes details such as prominently displaying contact information, documenting what is included in a base cost, stating any additional fees or charges that may accompany a service, presenting links to the return policy and guarantees, or revealing shipping charges before asking for billing information (www.nngroup.com)

Connection to the Rest of the Web

It is important for business websites to link to third party review sites, social media, or news outlets in order to communicate trust. Business websites who are isolated and do not link to external sources are viewed as having something to hide or not being a fully established, stable company (www.nngroup.com)

For our redesign, communicating trust in web design through 'Connection to the Rest of the Web' was out of our scope, but was still presented to our client as something Retreavel should have.

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. 

 

We created a competitive landscape matrix to identify which of Retreavel's top competitors/comparators we wanted to further analyze.

Content 

Marketplace

Commerce

TRAVELOCITY

GETAWAY

FITNESS

Direct

COMPARE RETREATS;

EAT, PRAY, MOVE

OPRAH MAGAZINE;

PUBLICATIONS TO FIND RETREATS

CANYON RANCH;

ESALEN;
SKYTERRA

Legend

Comparator

Retreavel

Competitor

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: 

Must:

  • Book Online

  • Contact

  • Search Field

  • Newsletter

  • Checkout as Guest option

  • FAQ

Could:

  • Sign Up for an Account

  • Sort by (filter)

  • Book Flights/Accomodations

  • Calendar of Retreats

Should:

  • Social Media Connection API

Won't:

  • Add to Cart

  • "Scroll to top" button

We wanted to get design inspiration for the redesign, so we also conducted a competitive design analysis

Here's what :

  • 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)

 

1/1

Our Redesign Approach

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. 

 

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.

1

the navigation bar was simplified and brought to the top of the page to make it more legible

2

multiple entry points to Retreavel's 'retreats page' were included to make it easier for users to navigate

3

Retreavel's value proposition was put on the landing page and made more clear for users to know what the site was about

4

some labels were rephrased and accompanied by context to make it easier to understand

5

relevancy wise the filter options were improved to make it easier 
for users to find what they are looking for 

5/5

Users thought the flow and navigation of the site was easy to follow.

[The site was] very easy to navigate. It is a very simple website without a lot of bells and whistles.

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.

5/5

Users felt the content was comprehensive and useful.

I think all of the information on here leaves very little room to have any questions - it’s all pretty much there.

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 

1

2

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.

 

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

5/5

Users appreciated the full transparency  of the site, especially price and they were not deterred by any login barriers.   

It is important that I know the complete cost of the trip, especially if flight is not included.

According to the results we gathered during our mi-fidelity wireframe testing, we successfully improved Retreavel's ability to communicate trustworthiness to its customers.

Making Design Iterations to Hi-Fi Usability Testing 

After conducting a usability test on our mid-fidelity wireframes, we made appropriate iterations to help us develop our hi-fidelity wireframes and prototype.

SCENARIO: 

You are having a stressful week and want some time to take care of your body and mind. 

TASK: 

Book a retreat that fits your interest. 

"I trust it and it seems very credible."

5/5

users were able to fully complete the task to book a retreat 

Hi-Fidelity Wireframe Test Results

I trusted [the site] a lot, it has a modern look to it, I have used a lot of travel sites that
look dated."

"I am pretty excited and that was a pleasurable experience."

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.  

Copyright © 2020 Nyesha Viechweg. All rights reserved.