Mary Castellanes

Trip Savvy

UI/UX Design

View Project

Trip Savvy mobile view

Trip planning can often be a tedious and time consuming task for travellers. To tackle this problem, I set out to design a mobile app that would assist travellers in curating their vacation experiences by intelligently suggesting attractions based on their budget and interests. This project was done as part of a five-week course on User Experience Design at Brainstation.

Trip Savvy persona Anna Trip Savvy persona Jeff Trip Savvy persona Benita

During the user research phase of the project, I interviewed three individuals and received survey responses from thirteen others. I tried to get a sense of whether there were a range of travel styles that existed by asking questions around users’ accommodation and transportation choices, what types of travel experiences they desired and what resources they rely on to trip plan.

Three distinct personas emerged out of the user research. Despite their demographic differences and range of ideal travel experiences, all of them were motivated by meaningful travel and all desired a trip planning experience tailored towards their unique travel styles and needs.

Trip Savvy user flow 1 Trip Savvy user flow 2

I mapped out two different user flows for two of the personas. The first user flow is for someone like Anna who might be casually browsing the app looking for vacation ideas. While scanning attractions, she stumbles across one that interests her that she decides to add to a new trip. The second user flow is for someone like Jeff who might do his own research outside the app. He discovers an attraction that is lesser known and doesn’t exist on the app that he wants to add to his trip plan.

Trip Savvy Information Architecture

The app can be divided into four main sections. Within the Explore section are hundreds of different destination pages. On each destination page are a list of attractions, each of which would have their own page. Trips is structured very much the same way, except users would select only the destinations and attractions of interest to them. Profile is where you would customize your profile to received a much more tailored experience of the app, while Search is where users can search the entire app for destinations and trips.

Trip Savvy sketches

I sketched out the screens from the user flow, and incorporated some of the crowdsourced features from the user research phase into the designs. I translated these sketches into a clickable wireframe in Figma and gathered feedback from the instructor and peers.

Trip Savvy user interface guidelines

I decided to apply minimal styling to page components to make the photographs of the destinations and attractions stand out. I chose a simple colour scheme of muted greys in contrast with a bright indigo. I used the typeface Rubik from Google Fonts because it was approachable, had a variety of weights and worked well at various sizes.

Trip Savvy user testing

After distilling the user research and design process into an working prototype, I tested the prototype on four different users, asking them each to complete six scenarios, or tasks. One user breezed through all six scenarios with ease, while another user struggled with understanding the scenarios and wasn’t able to complete some of the tasks. Two other users were very confident about their answers, some of which resulted in outcomes I hadn’t considered. After each test, I refined the app based on user feedback, repeating the process of testing and iteration. Perhaps the most beneficial part of user testing was clarifying the labelling of buttons, tabs and call to actions across the app.

Trip Savvy presentation

The end of the five week course culminated in a presentation of our research findings and prototype. I found the user experience process to be invaluable in making evidence-based design decisions. The user research informed what features I chose to include and how I decided to present and structure information, while the user testing both validated and challenged my assumptions around how users would interact with the app.