Image of two women, wearing Outrigger Resort uniforms, standing on the beach on a sunny day. They are smiling and looking out onto the beach.
UX/UI DESIGN

a new digital

home for a

legacy brand

MY ROLE

Sr. UX/UI Designer

UX DIRECTOR

Billy Lymm

CLIENT

Outrigger

AGENCY

Swift

OVERVIEW

Outrigger has been an industry-leading hospitality brand for over 70 years. Despite their award-winning services, their website served as a disconnect for their customers. It was outdated, riddled with accessibility issues, and failed to convey Outrigger as a premium brand. To address this issue, Outrigger's leadership tasked our team to redesign their site.

 
Image of the Outrigger homepage after the redesign.

REDESIGN

1 / 2

CHALLENGE

The existing site was challenging to navigate, cluttered, wasn't mobile-optimized, and not accessible to customers with disabilities. Shoppers found the site confusing and typically called the support staff to complete booking their reservations. Addressing these issues meant the redesign needed to provide a streamlined, accessible, best-in-class, and responsive experience. To ensure our redesign efforts would be successful, our team defined the following goals -

1

Drive higher conversion rates

3

Build better brand awareness

2

Decrease overall  bounce rate

4

Attain WCAG site compliancy

 
Image of woman that represents the Outrigger primary audience.

MEET THE PRIMARY AUDIENCE

liz rosevelt

 Age

36-44yrs

Earns $130-165k

Married w/ 1 kid

MOTIVATIONS

She's a busy professional but always plans 2 big vacations per year. She's interested in finding unique experiences that her family can share.

CORE NEEDS

She wants vacations that provide fun activities, leisure, and immersive cultural experiences. Creating memories matters the most to her.

PAIN POINTS

It's difficult to find vacation packages that offer activities that her whole family can enjoy and she doesn't want to spend too much time having to plan a trip.

APPROACH

We began the project with a discovery phase that focused on researching the Web Content Accessibility Guidelines (WCAG), hospitality website best practices, and conducting a competitor analysis. The research yielded an abundance of insights that formed the strategy and timeline for the redesign.

RESEARCH METHODS

Competitor

Analysis

WCAG

Standards

Persona

Development

Information

Architecture

User

Journey

Prototype

Testing

 
Image of Baymard Institute's research study used to gather insights for the redesign.

RESEARCH RESOURCES

To understand guidelines and best practices, I researched articles such as Designing for Web Accessibility, Hotel Website UX Research, and Travel Accommodation UX

Mobile screenshot of the Aqua Aston homepage.
Mobile screenshot of the Marriott homepage.
Mobile screenshot of the Castle Resorts homepage.

COMPETITOR ANALYSIS

To better understand the market, we analyzed 3 competitors: Aqua Aston, Castle Resorts, and Marriott. Insights gained from this research helped identify industry trends and hospitality site best practices, which highlighted areas of opportunity for our redesign efforts.

SITE MAP

Image of the Site Map for the redesigned Outrigger website.

WIREFRAMES

Image of several wireframes for both the desktop and mobile screen sizes of the Outrigger redesign.
Image of a user testing session for the mobile design prototype.

TESTER

USABILITY TESTING

After creating prototypes from the initial designs, we ran usability testing. The remote test included 10 participants who reviewed the prototypes and were tasked to book a reservation. Testers found booking a reservation easy, but some struggled with the global menu hierarchy. Leveraging testing insights, we updated the menu to ease any friction points.

RESULTS

After testing was complete, we began the development phase. Working closely with the dev team, we delivered an online experience that showcases Outrigger as a premium brand, is mobile optimized, and features a streamlined booking flow. The redesign also is compliant with WCAG standards, which means disabled customers now have equal access to Outrigger's vacation services via the new site.

18%

INCREASE IN CONVERSION

32%

DECREASE IN BOUNCE RATE

WCAG

LEVEL AA SITE COMPLIANCY

award

MAGELLAN - GOLD  HOSPITALITY WEBSITE 

award

HSMAI ADRIAN - GOLD WEBSITE CATEGORY

award

TRAVELMOLE - BEST RESORT WEBSITE 

 

OPTIMIZED BOOKING

A majority of Outrigger's booking reservations come from mobile devices. Leveraging that data, we redesigned the booking functionality to be mobile-friendly by designing a simple set of steps that lead shoppers through a streamlined process.

GIF of the mobile booking user flow for the Outrigger redesign.

BOOKING DEMO

UI COMPONENTS

Image of the UI components library for the Outrigger redesign.

DESIGN COMPS

Image of 3 mobile screen mockups of the Outrigger redesign.
Image of Outrigger's homepage desktop redesign.
Image of Outrigger's weddings landing page desktop redesign.
Image of Outrigger's destinations listing page desktop redesign.
Image of Outrigger's destination detail page desktop redesign.
Image of Outrigger's meetings and group listing page desktop redesign.
Image of Outrigger's meetings and group detail page desktop redesign.