Designing a flight booking app for mobile and adapting it for wearables.
19. April 2021 – 23. May 2021
UI / UX
Low- and mid-fidelity prototypes.
SkySmart is an app that is geared towards making your travel experience easier. You’ll be able to do all your basic travel admin easily through a mobile app while at the same time making most important information easily readable and available on your watch app when you’re in a hurry.
The challenge was to create a simple to use mobile application for busy travellers who prefer to book and manage their travels and flights through their mobile phone. The mobile application should be able to:
- Search and find a suitable one-way flight
- Choose a flight
- Enter personal details for the flight (name, passport number, email address)
- Choose a seat on the plane
- Pay for the flight (enter credit card details).
At the same time the challenge was to adapt the mobile application to a version that would work with a smartwatch. This version wouldn’t have the same capabilities, but the users should still be able to:
- View the flight departure date and time
- Check the flight number
- View the flight departure and destination cities
- See the flight duration
- Monitor the flight status (on time, delayed, cancelled)
- Access the boarding pass.
In order to make it easier to understand who I’d be designing for I created a persona.
Peter just got a call from his co-founder that he needs him in Berlin as soon as possible. Peter knows there are daily flights from Oslo to Berlin so he picks up his phone and starts searching for the next flight on his old application. He finds the process to be overly complicated and gets overwhelmed with choices. This application lets him book hotels and rental cars as well but Peter doesn’t need that. He only wants and needs a one way flight to Berlin today. What would a simple and intuitive flight booking application look like?
To keep the app as simple as possible, I wanted to keep the user flow very limited and straight forward. The app serves only two purposes:
- Book a flight
- Get info about booked flights.
With that in mind I designed a user flow.
With said user flow fresh in mind I set out sketching some lo-fi wireframes on pen and paper.
Screens after you press the big plus sign on the Your Flights screen.
Select ﬂights and seats.
Passenger details and payment screen.
Review of sketches.
After a while of sketching I went over them again with a critical eye and discovered a few inconveniences that I wanted to fix before creating a prototype. One was the passenger detail section when booking a flight. As the user already has entered all their details previously when signing up for the app it shouldn’t be necessary to do it again. I then contemplated on whether an autofill feature would be nice and sure enough. That would work. But what if the person using the app isn’t the one that is traveling? I then added an extra screen with the simple question of “Are you buying this ticket for yourself or someone else?” The user then has the option to select themselves or someone else. If they select themselves the app automatically uses the data already filled out. If the user is buying a ticket for someone else the arrive at a screen where they can fill out the travellers details.
Based on the sketches I jumped straight to my new favourite design tool, Framer and created a mid-fi prototype of the mobile application. You can take a look through it here. It is not perfect by any means but it gives an idea of how I want the application to work.
The next challenge was to adapt the mobile application for the smartwatch. Yes. Yes. I know. That’s ass backwards and you should always start with the smallest screen first. But, I didn’t. The reason for that is that the smartwatch application wouldn’t have all the features and possibilities. I wanted to get the full picture of the scope of this project and then worry about squeezing a square peg through a round hole. Don’t worry. I did just fine.
Smartwatch User Flow
Given that the smartwatch application will have limited features compared to the mobile app the user flow becomes even less complex.
Smartwatch Sketches and Prototype
As the smartwatch app only needs to be able to show a little bit of information as well as having a working boarding pass I thought that I’d only need two screens for the app. One screen for the general info, another for the boarding pass.
Having flown quite a bit I always use my phone when scanning my boarding pass. More often than not I use a QR code to scan it.
I figured this would work pretty well. It has all the info you need, and then some yet it’s still functional. I then jumped back into my favourite design tool, Framer, to create a working prototype of this beauty. Here’s a link to that.
As you can tell I did some minor tweaks to the initial sketches as there simply wasn’t enough vertical room for the flight number to be where it was on the sketch. I therefore moved it up to the date. Three columns also looked quite cramped on a screen this small, so I moved the Flight Status area to the bottom.
I added the ability to swipe cards for when you have multiple flights. Tapping one of the cards will bring up a QR code which works as a boarding pass.