Making City Breaks Easier

A UX design project that followed design thinking principles, from problem discovery, to UI design, through to user testing and iteration.

Summary

Empathise
Secondary Research
User Interviews
User Personas
Empathy Mapping
Ideate
Problem Statement
Ideation
Storyboarding
User Flow
Wireframes
Mid-fi Prototype
User Testing
UI Design
User Test
Hi-fi Prototype
Usability Testing
Affinity Mapping
Priority Revisions

Background

There has been a shift in the average user of travel. The rise of the easyJet generation: millennials booking city-breaks on a whim, has left a lot of the traditional travel industry struggling to keep up.

Problem

Due to the time-restricted nature of city-breaks, users want to make the most of it. But, this often requires a lot of planning and organisation, something which is easier said than done.

Solution

Vamos was developed to not only help users find things to do on their city break, but to help organise and plan when to do them, so users can leave a city feeling like they've really "done" it.

Empathise

Travel is an incredibly broad field, so was important to gain a good grounding in current trends and themes in the travel industry, in order to help inform and target conversation in user interviews. Articles and tourism reports from various organisations were examined to analyse who goes on city breaks, current industry trends, and to break down a city-break into components such as research, booking and being at the destination. The key findings from the secondary research were interesting, showing that travel is in the midst of a seismic shift in trends:

Secondary Research Summary

The main trends to appear from research was the increase in the frequency of holidays taken by users, but also the decrease in length of holidays - with a marked rise in the number of short stay breaks increasing. Additionally, with an ever-developing experience economy, travellers are increasingly searching for unique, exclusive experiences that create lasting memories. Part of this trend is an interest in authentic experiences in non-traditional destinations where travellers can live like a local.

The full secondary research document is available here

With an idea of the trends impacting the industry, and the type of user to take a city-break, user interviews were conducted. Interviews were conducted in two phases, the first phase covering a broad range of topics related to city breaks. 5 users were interviewed, and the key theme to emerge from this phase was users' frustrations around organising and planning things to do in the city they are visiting.

"It's next to impossible trying to organise things to do when everyone wants something different from their trip" 

The second phase of interviews involved 6 user interviews. Conversations were focused on exploring users' experiences when planning and organising things to do, with the aim of better developing my empathy with the users and their needs, pains and goals. Users were heavily reliant on review sites to find things to do, such as TripAdvisor, but found this only showed them the top touristy places and users struggled to discern whether the user who gave the review had the same preferences as them. Through this method of finding out things to do, users were also left feeling short when they were looking for local, authentic experiences.

"I go abroad to see and do things I can't do in my own country, so I really want to make the most of it"
"The last city break I went on, I only found out about something amazing on the last day, by then it was too late"

Besides struggling to find things to do that met theirs and their groups preferences, users also expressed frustration at organising and planning these activities. Users had a myriad of ways to note down things to do, ranging from using their notes app on their phone through to having a word document with a list of things to do. Because users lacked an all-in-one planner and organiser, things they had on their list often got missed off or forgotten about - resulting in the user feeling like they missed out.

With a clear direction and some great information uncovered in user research, user personas and a customer journey map were created to summarise the findings and provide a solid base of information for ideation.

With some interesting in formation uncovered in user research, user personas and empathy maps were created to summarise the findings and provide a springboard for ideation.

With some interesting in formation uncovered in user research, user personas and empathy maps were created to summarise the findings and provide a springboard for ideation.

Primary User Persona - James

James, aged 25, is the primary user persona. James works in an office in the city as a sound engineer, and loves to travel, he tries to get away 3 or 4 times a year to different European cities. He travels with his girlfriend or with a group of 4 friends he's known since primary school.

James is quite spontaneous and has no issues booking on a whim, and has based a lot of his previous decisions on where to go on where the cheap flights are going. He does the bulk of his research on a place after he arrives, but sometimes has a quick look at what there is to do before he flies. James can sometimes come a bit unstuck when he's trying to factor in what everyone wants to do on a trip.

Customer Journey Map for James

James' customer journey map shows his process of finding and organising things to do on a city-break. He is happiest when he's in the moment exploring, but is often frustrated or annoyed when he has to try work out things to do that are going to please everyone in his group, then piece together a route that doesn't have them traipsing across the city all day. James personally hates going to the tourist hotspots, and finds the best way to see a city is through a locals eyes, although he's still not worked out a concrete way to do this, despite being a frequent city-breaker.

Ideate

With deep empathy now established with James and the issues facing him, the next step was to find a solution. This started with the formulation of some problem statements in the form of "How might we...?" questions, which aimed to create a point of view and to provide focus to ideation exercises afterwards. The following problem statements were taken into ideation:

How might we help users find things to do that match all of their preferences?
How might we make it easier for groups to share their notes of things to do?
How might we help the user have an authentic, local experience?

The next step was some rapid idea generation, using the crazy 8's exercise. The exercise was repeated 5 times until 40 different ideas were generated. Once complete, the best 3 ideas were taken and used to storyboard. Like crazy 8's, the storyboarding was also time-limited to encourage quick refinement of ideas.

Storyboard Outputs

The best idea was a "smart app", which allowed users to create a trip and add their friends to to the trip. Each user could fill in their preferences of things that they wanted to do and the app would produce a custom itinerary of locally-recommended places (as well as the classic tourist 'can't miss' spots). Once a list has been generated, the app would group the things to do by neighbourhoods, which was decided on in-part because it helps the user make the best use of their time by saving them trekking across the city back and forth between places. The app also takes into account weather, so for example should a user want to do outdoor things, the app would suggest that they could do it on a day with good weather.

A clear theme from research was users dependence on reviews, even though they rarely helped users find places that matched their preferences. That's why it was decided that in the app, there would be no reviews. Instead, a focus would be placed on a vibrant UI and great copy, to build a level of trust with the user.

Given that the users interviewed were by-in-large, spontaneous, it was important to strike a balance between giving the user suggestions that they and their group would like, but whilst also giving them a sense of freedom and spontaneity to explore, which can often be the moments that make a city break.

Based on the above ideas, a user flow was designed to follow James and one of his travel companion's "happy path" when using the app.

User Flow

The flow begins with following the path of James, who creates a trip and adds the second user (Lauren) to it. James enters his preferences and receives a list of recommendations for places to visit. Once added, the second user (Lauren) follows the process of manually adding an activity she's heard about from a friend, and viewing her activity. Then, the flow switches back to James who finds more out about a particular neighbourhood, reading the neighbourhood guide to make sure he's fully clued up on the area. James finds a restaurant he likes the look of through this, and decides to book a table.

The flow was designed to showcase the features of the app, and the interconnected involved when multiple users are using and adding activities into the app. This user flow is representative of the personas' "happy path".

The storyboard and user flow were combined and translated into wireframes.

A snippet of some key wireframes

The wireframes were compiled into a mid-fidelity prototype which was tested with six participants. Testing was focused on concept validation, how users interacted with features, and to establish whether the flow was suitable. All users stated they would use the app, and Users found the app helpful and informative, preferring having an all-in-one app instead of switching between lots of different apps. All users completed the tasks / errands with no major errors, with 5/6 participants finishing the tasks in under 5 minutes.

Now that the wireframes were created and tested, it was time to explore the brand identity of the app. Travel is an exciting activity, and the the traveler is immersed in the city they're visiting. For that reason, a vibrant colour scheme was explored - aiming to stimulate the visual interest and vibrance of the different things users see when visiting a new city.

UI Kit for Vamos

A wide-ranging colour scheme was selected, which featured vibrant, strong colours that conveyed energy and excitement, but with a balance of white and simplicity as to not overwhelm the user - this was important given the content would include images, which need to stand out. A light blue acted as the primary colour throughout the design, which contrasted with a clear white background. The illustration aimed to add another element of fun to the design.

The wordmark logo created needed to be easy to understand and indicative that it is a travel app. The location pin represents travel, whilst the lightbulb within represents ideas and the "aha!" moments that the app helps the user to achieve.

The components of Vamos' brand identity were then compiled into a style tile that was applied to the UI.

Final UI Designs

User Test

To test the UI designs, I created a high fidelity prototype of the website and asked 6 users to run through a series of tasks and errands themed by the above, tracking their progress through and noting any observations they had whilst engaged in the task.

The prototype used for these contextual observations was created using InVision and is available here

Usability testing found that all participants completed each task error free. Users liked the look and feel of the app, mentioning that the vibrant colour scheme frequent colour changes kept them interested. Users particularly liked how easy the app made planning and organising with a group, so nobody had the final say or dictated places to go. Users also liked the neighbourhood guides, with all users saying they would use this particular feature.

Interestingly, users still wanted to see some form of reviews, despite stating their difficulties with reviews previously. A reviews feature was added to the activity screen which if clicked, would take the user to an external site such as TripAdvisor or Google.

Users had slight difficulties with some of the information in the app, they wanted to see more of it. For example, users wanted to see the distance to a location when they tapped a location pin on the map screen - so an amendment was made to the design in the following priority revisions below.

With this feedback in mind, an affinity map was created to understand the patterns in user behaviour and to establish priority revisions for the design.

Based on the priority revisions in the above affinity map, changes were made to the design that reflected the users comments and feedback.

Iterations based on the affinity map and user feedback

Reflection

This was the most testing project I've worked on due to the scale and complexity of the designs within a limited timeframe. Regardless of the time constraints, I felt it was important to spend a significant amount of the project time researching - as without the insights I gained from a proper research process, the app wouldn't be what it is now.

It was an incredibly rewarding project to finish, made even better by the user feedback during the final round of testing - which allowed me to make some necessary improvements to further the users experience using the app.

If I was to continue building out the design, I would explore the development of an AR feature which could be added into the maps part of the design. The aim of the feature would be to allow users to explore their neighbourhood and find things to do in real time.

More Projects

Improving the GP Booking Experience

A mobile-first UX design process, from problem discovery through to UI design & hi-fidelity prototype testing.

Read More

Making Spotify Social

A research-focused, end-to-end UX design process to improve the music sharing experience on Spotify.

Read More

Reinventing Online Shopping

The task was to improve the users online shopping experience. This was an end-to-end UX design project to deliver a responsive e-commerce site & logo design for a multi-national clothing retailer.

Read More