SAFETY ORIENTATED TRAVEL BOOKING APP

FlySafe

Quick & easy flight booking while providing convenient insurance.

Providing safety conscious people with a travel booking experience that provides them with the information they need for their relevant destinations in order to choose appropriate travel insurance. Flights and insurance in one place.

Project with Ironhack Barcelona’s UX/UI bootcamp.

CONTACT
Where did I start?

Design a new travel booking app to be launched on both Android and iOS

We were provided with initial personas (to use as a starting point) and the focus of this project was thinking about business opportunities within our designs and then executing with a visual identity and ensuring it’s appropriate for both iOS & Android.

Scope

  • Individual
  • 1 week

Tools

  • Pen & paper
  • Mural
  • Figma
  • Principle
  • Marvel

UX Techniques

  • User interviews
  • Benchmarking
  • Business goals
  • Problem statement & scenario
  • Prototyping
  • Animation
  • Translation from Android to iOS
  • Usability testing
  • Information architecture
  • Branding

— COMPETITIVE RESEARCH
What are other travel booking apps doing?

To get an idea of where this product could shine, I looked into how others were already tackling travel booking and noted their user flows of the same task: booking a flight from Barcelona to London.

From here, I began understanding what would be necessary steps in my user flow and where my design might be able to shine out the competition in usability.


— USER PERSONA

Who is FlySafe serving?

3 user interviews

We were provided initial user personas as a starting point for this project (Sofia), the three interviews I did were to flush out this persona’s profile.

Meet Sofia


— FEATURE PRIORITISATION

For the MVP of FlySafe, what would capture the most value?

— USER VALUE
What does the user need from FlySafe?

With Sofia in mind and insights from the user interviews, I used Red Routes to understand what were critical tasks to deliver most value to the user.

— BUSINESS VALUE
Where do the business opportunities lie for FlySafe?

From the Red Routes we understand what’s most valuable to the users. However a product needs to be viable for a business so I compared the perspectives.

OPPORTUNITY 1
Clear & accessible way to book flights

Problem: People are short on time & want to organise trips quickly

KPI: Number of flights booked

OPPORTUNITY 2
Travel insurance provided during the flight booking process

Problem: People feel vulnerable in unfamiliar places

KPI: Insurance booked


— PROBLEM STATEMENT
What was FlySafe trying to achieve?

With an understanding of user needs and business opportunities, it was time to focus the direction of the project with a solid problem in mind.

How might we make booking flights easy and quick while providing convenient insurance?

— SCENARIO

Let’s paint a picture of how Sofia comes to use FlySafe

One of Sofia’s two trips this year is to London. Having seen the news, her mum has told her to take care and be safe while there. As Sofia has always been on the safe side of life, her friend recommended her FlySafe for key info on London and travel insurance while she’s booking her flights.
— PROTOTYPE

Now, let’s see how her experience might pan out

— PROJECT DEVELOPMENT

What the project looked like from afar…

Initial stages:

  • User interviews (3 people)
  • Benchmarking
  • Establishing business goals
  • Paper prototyping

Mid stages:

  • Mid-fi prototypes (2 iterations)
  • Exploring visual design pathways
  • Testing (3 people)

Final stages:

  • Testing (5 people)
  • Hi-fi prototypes (2 iterations)
  • Deciding specifics of UI elements
  • Animation
  • Translation from Android to iOS
— ITERATIONS

Some key highlights along the way

With usability testing on 8 people, here are a few of the changes that were made and why.

As shown here, I tries various approaches for this section of the user flow: splitting up the destination information page from the insurance offerings; trying various visual approaches to communicating the safety rating; prioritising the information the user actually needed rather than sales talk.

User feedback:

  • Which flight is outbound or return?
  • Can I see prices for dates before and after?

Changes made:

  • Include an option to go to the previous/next day
  • Amend hierarchy if type to highlight what’s needed

User feedback:

  • Hesitation on which flight was which

  • Information not clearly differentiated

Changes made:

  • Highlighting the key information and visually grouping connected info more


— ANDROID Vs. iOS
The design was originally considered for Android, how might that translate to iOS?
  • Navigation brought to bottom nav bar in iOS
  • Calendar view made more familiar to iOS users
  • Back button navigation style amended
  • Side drawer (native to Android) changed to the calendar filters appearing from below
— VISUAL DESIGN

As the app was strongly geared towards safety, the visual design had to reflect that in order to authentically communicate what the app stands for. With this in mind I chose blues and golds as the primary colours (reliability and confidence) with the safety/price colours aside in red, yellow & green.

After experimenting with type, colour & design detailing, some UI specifics are collated here:

— ANIMATION

Along with the foundational visual language (colours, typography & layout), I began thinking about how animation could enhance the user’s experience. Animation could highlight specific elements of information to draw the user’s eye, or simply to add a little delight to the design.


— NEXT STEPS
If I were I continue developing this idea, what would I do next?
  1. Explore searching by the ‘safest destination’ as a development
  2. Could the destination information be more specific? e.g. safety of each neighbourhood
  3. Test on more people & iterate further
  4. Look into further opportunities that didn’t make it into the MVP, e.g. customer loyalty
— KEY LEARNINGS
What did I learn from all of this?
  • When content heavy, prioritising what the user really needs to know is key
  • Ensure the tone of voice is in-line with the user’s goals
  • Testing with a wide range of people is really useful

Thank you for reading! If you have any feedback or comment don’t hesitate to contact me on LinkedIn or at soeverard@gmail.com.