Orion Space Travel Case Study
This was the case study I completed as part of my interview process with Dolittle. It was a fun exercise intended to highlight my design process, design rationale and decision making and, ability to create high-fidelity mockups.
It was timeboxed to eight hours.
Summary
The goal was to produce a high fidelity mockup user flow (not a full application) for a mobile space travel app that lets the user book a trip into outer space. The company, Orion, is a travel agency aggregator that uses metasearches to find the best outer space travel fares.
The customer should be able to:
input travel dates and destination
Select seats or choose not to
Rent a spacesuit for an additional cost in the appropriate size. They could also use their own suit but this must be confirmed in the booking process.
Brand colours, fonts and the logo were provided
Some research was needed
Before getting started, I needed to do some research into both travel agency aggregators and space travel. This research provides a framework for me to start ideating from, and helps keep me centered.
In this case I used Behance for inspiration and reviewed projects on:
travel sites
check out processes
I also looked to the Figma Community. This is such a helpful resource and using many of the free templates available, can accelarate your rate of production.
I found guidance on date pickers here.
I was lucky enough to also use the research from a case study on travel fare aggregators.
And asking the all-important question: How long does it take to fly to Saturn?
At a high level, what are the key experience markers?
Since space travel is full of risk and uncertainty, I wanted to balance those emotions in the user with a booking experience that feels trustworthy and reassuring. Some ways to do that would be to use a familiar flow, consistent messaging and patterns, and offer pricing guarantees.
As an extremely high value product that the customer is booking, it is crucial that the payment process feels trustworthy and professional.
Given that this is likely to be a ‘once in a lifetime’ experience, how do we gain commitment and avoid analysis paralysis?
Can we turn problems into opportunities? Seats near the engines/launchers are likely to be loud and have strong vibrations, instead of pricing these as cheaper, could we rather highlight them to our most adventurous or thrill-seeking customers?
Design the User Flow
Inspiration from Skyscanner
As one of the leading travel fare aggregators, I chose to closely replicate the flow from Skyscanner. It has a clean and simplistic design, and I expected that most users would find it very familar to use.
This screen is an excellent use of space. Over less than half the screen, the user can decide what type of trip, where, when and who will be flying.
This screen suggests some common filters rather than just expecting the user to explore. The top bar allows navigation as well as keeping the booking request available for review.
This screen balances beautiful (and motivating) imagery with the decision-making process. It is a clever way to remind the user visually why it is worth spending!
The summarised information as well as clear labelling and the use of rolled up information blocks is a smart way to balance overloading the user while still making sure they know what information is accessible to them.
Some of the design challenges
At what point should we bring up the need to add a suit? As this carried an additional cost, you want to balance being up front with not distracting from the main booking activity
If the passenger doesn’t have a log in, when do you capture this information? This is a common area for people exiting a flow if it is asked too soon.
A clumsy date picker can be very frustrating. This coupled with the length of travel time, means it has a high chance of error. Can we guide the user by graying out dates that don’t work for the length of travel time?
Would it be better to clearly indicate if something is unavailable or should we rather not offer it at all?
How do we drive familiarity? We used Material Design Components as they are very simple and commonly used
We had to make sure to provide sufficient information at the right time, but also allow users space to explore. For many, this is a new product and there would be learning to be done.
Wireframing
I started off with some low-fidelity wireframes to get the key concepts in place.
You can click on the image below if you want to explore them in more detail in Figma
High Fidelity Mock up Flow
Once I was comfortable with what I wanted to the user to achieve and that the flow made sense, I added the brand colours and fonts and started bringing the flow to life.
Below is a video of all the frames being clicked through. While not fully prototyped, I wanted to share the look and feel that we ended up with.
Again, by clicking on the image below, you can explore the wireframes in a bit more detail in figma.
