Better By Sea

UX/UI product design.

The Project

BACKGROUND

Better By Sea is an interactive quiz for users to discover what cruise is the best match for them. Users answer a series of four questions about their vacation preferences, and their results are then emailed to them. Better By Sea serves as a way for users to get excited for cruising by finding an option that suits their tastes. The quiz also fosters curiosity in cruising and drives users to visit the site and increase engagement.

SETTING

Tripadvisor. Jan 2020 - June 2020.

MY ROLE + TEAM

UX/UI Product Design Co-op. Worked with one other designer on the Flights, Cars, and Cruises design team.

Deliverables

ICONS

My first task was to create icons to be used within the quiz's questions. The icons are simple, color-blocked representations of the respective question choices.

QUIZ DESIGN

We aimed to create a fun and engaging quiz design that would encourage users to interact with the site and gain interest in cruising.

Icons

Icons were used in conjunction with question choices to add visual delight. The Tripadvisor color palette was implemented for the illustrations. The icon set on the left represents destinations, and the set on the right represents travel group sizes.

Quiz Design

HIGH FIDELITY WIREFRAMES

The quiz has a clean and visually pleasing interface. Elements of each screen are arranged in an organized manner. Selected question choices are indicated via a darker border so that the user is aware of their selection before continuing on. The icons, text, and colors work together to create the friendly visual design.

MOBILE INTERACTIONS

Another main task was working on the mobile interactions of the quiz. Question 4 involves a drag and drop to organize vacation features by level of personal importance. Because "most important" often appears on the right of an importance scale, we placed the item of first importance in this position and "least important” on the left. As users complete the scale, the colored icons move from their initial position to a placement on the scale. They can also tap on the icon to have it return to its original position.