Seatfrog

Product Design

Travel Webapp

Dark mode project

The company

Seatfrog works with innovative partners throughout the travel industry to reinvent what travellers can do when they’re on the go. Among plenty of features, their bidding system gives the opportunity to grab a last minute upgrade to business class when it suits you. They work with some of the best talents around the world.

The problem

Apart from Seatfrog app, the company wanted to offer the possibility to London commuters to win an upgrade in less than a minute, without having to download the app on the App Store / Google Play.

Timeline

2 weeks [Design]
2 weeks [Development]

Roles

Product Designer

Tools

Sketch, Guerilla Testing, Abstract, Invision, Principle

Links

N/A

Another kind of app.

The Seatfrog app itself gives the opportunity to commuters to win upgrades for a cheaper price. The startup wanted to focus on the commuters that don’t know Seatfrog and have no time to enter in an auction. We thought about quickly designing a “mini web-app” that would allow the commuters to win an upgrade within less than 2 minutes, with no subscription nor bidding. The only thing we need here is the phone number to be able to send the QR code of the upgrade.

To design such a solution, I had to focus on 3 different things:  

Time

Technology

Navigation

User Flows

Let's map out the steps first.

What could be the best experience for the commuters willing to have a cheap and fast upgrade? Let’s map out each and every step the user would take - from entering in the app right through the SMS with the QR code of the upgrade.

Sketch

Paper, my friend.

As soon as the User Flow was agreed by Iain Griffin - the CEO of Seatfrog - I could finally sketch some ideas. I wanted to keep something clear, simple and that could be improved in future iterations.

Testing

Hey buddy, you mind to try this?

I went to see our incredible Data Team to have some insights on the average of number of upgrades per person. It helped me to know how many seats to display on the screen. I also worked in collaboration with the Developers to know the possibilities when calling our backend. I designed a quick prototype with Low-Fi screens first (screens without any brand identity).

As the product had to be designed quickly, I had no time to organise a proper UX Lab or analysing answers in platforms such as UsabilityHub. I went to see 5 people from other companies working in the building and gave them a quick scenario. They were asked to book 2 upgrades from London King’s Cross station to Leeds at 10.15. I timed the whole process and… it worked! An average of 78 seconds to book an upgrade! I then asked some questions about the navigation. It will help me to improve the experience when designing Hi-Fi screens.

Branding

Let's put some Seatfrog in it.

The current Seatfrog app has been quickly designed and the brand hasn’t had been clearly established yet. It was a good opportunity to borrow different brand codes of the company website and make a more “Seatfrog” product than the actual app. It will be interesting in the Testing phase to ask what do commuters think about the general look & feel of the webapp.

Hi-Fi Designs

Make it simple.

All the research, testing and branding has been done. Let’s take our insights collected during the Testing phase and create 21 simple screens (including error states).

I’m happy with the minimalist design of those mockups. I’m ready to create a prototype for the developers. As the product has to stay simple, I don’t want to make anything complicated. I just want them to understand the interactions and transitions between the screens.

Testing

Go wild in King's Cross.

I wanted to see how people interact with the mini app in real situations. I went twice to King’s Cross Station (London) and asked people to play with the app. A little bit of Guerilla Testing like old times.

The most common errors were:
1. “No routes available
2. One Time Password not working properly

I immediately made a report for my team. The developers quickly improved the One Time Password and we included a note on the advertising saying that we don’t guarantee that routes will be available. People were also really positive about the general look & feel of the app.

What about the outcome?

The product was a huge success : people were upgrades in 1-1.30 min and go smoothly through the different steps (pick destination - time - number of passenger). However, the project was abandoned after a few weeks for marketing and technical reasons. The OTP crashed repetitively and the marketing approach wasn’t ideal. Indeed, we were approaching people in the station with leaflets asking them to navigate through the webapp to get a cheap upgrade, instead of offering free upgrades.

The good news is that the resources spent on this product helped us to have insights for a new brand identity for our app and create another amazing feature for our main Seatfrog app: “Train Swap”. A feature that allows to switch between services at small cost. Train swap technology has won Seatfrog a 'First Of A Kind 2020' award funded by the DfT and supported by Innovate UK.

What I have learnt?

Before saying “yes” to everything, I would first take ownership of the product decisions. Such a project could have been a real success if it was accompanied with an elaborated marketing strategy behind. Also, I would see the developers first and make 100% sure that a technology like the One Time Password is something easy to implement. Otherwise I would see other possibilities and/or adapt the product objectives in consequence. In any case, it was a lot of fun to design and this product helped us to create a new feature for our current app! Positive outcome!

🐸
Thanks for scrolling!

Web & Plugin Design

Cath Sterck

Atomic Design

Seatfrog

Visual Design

Seatfrog

App Design

Seatfrog

CMS Design

Secret Sales

Interaction Design

Secret Sales

UX Research

Inkoko

Web & Plugin Design

Cath Sterck

Atomic Design

Seatfrog

Visual Design

Seatfrog

App Design

Seatfrog

CMS Design

Secret Sales

Interaction Design

Secret Sales

UX Research

Inkoko

Web & Plugin Design

Cath Sterck

Atomic Design

Seatfrog

Visual Design

Seatfrog

App Design

Seatfrog

CMS Design

Secret Sales

Interaction Design

Secret Sales

UX Research

Inkoko