UI Design Exercise

Our startup, 4thDimension, has discovered time travel. Huzzah.

The technology is all in place...all the user has to do is hit our server with their smart-phone in hand and the backend our engineers have developed takes care of the rest. Easy.

The only piece missing is the interface for the user to specify the parameters for their trip. We’d like to do this in the form of a mobile app. After all, we’re not sure if the user will have access to their laptop in whatever time they end up.

Complete high-fidelity designs for the Start Trip, In-“Flight” and Arrival Confirmation screens.

Process work

Watched a few time-travel videos for inspiration
Poked around several travel apps
Lo-fi sketches, brain dump on paper
Set some additional assumptions and constraints
Brand research and framework for style-guide
Built out UI based on customer’s red routes
Linked up prototype
Cleaned up components, tested color contrast ratios
Export, render and present screens
Tools: Figma, Photoshop, InDesign, NounProject, UI8\
Note: prototype was completed in Figma where transitions are limited, would need to finalize in Principle or Framer, but deemed this out of scope after reaching time limitations ~5 hours

Curated trips

In an effort to create engagement with our young, adventurous, and affluent 25-35 year olds, I curated a library of recommendations. This helps elevate popular trips, and reduces the overhead of selecting a time, place, and location.

A user may scroll horizontally on each of the highlighted sections. If a user scrolls down the page they will see a call out to create a custom trip, outlined below.

Once a user taps on a trip, they can view details like average climate, trip duration, reviews, photos and more. A user can favorite a trip to easily revisit in the future.

In flight, a user can see the travel time remaining, connect with an agent for help, cancel the trip, and review flight conditions which are intended to help them feel safe.

Custom trips

If a user has a particular location, date, and time in mind they can specify these parameters and begin their journey. 4thDimension will provide information regarding the point in history in which a user has entered.

On this screen a user may tap to indicate specific parameters of the trip. The button to “Start trip“ is disabled until all fields are satisfied. Additionally, there is an empty state that automatically populates once date, location, and time have b… — On this screen a user may tap to indicate specific parameters of the trip. The button to “Start trip“ is disabled until all fields are satisfied. Additionally, there is an empty state that automatically populates once date, location, and time have been entered. This space is used to inform the user of any details that might be pertinent in their decision to proceed.

Help is easily accessible in the top right in case a user needs to contact support or read through FAQs. The “Start trip” CTA would be fixed at the bottom which is illustrated in my prototype. If a user hits back from here, they will be brought to t… — Help is easily accessible in the top right in case a user needs to contact support or read through FAQs. The “Start trip” CTA would be fixed at the bottom which is illustrated in my prototype. If a user hits back from here, they will be brought to the home screen. I imagine once a user hits start trip there would be a confirmation.

iPad mock up

All screens

Exploration + Mood

Concepts I punted on / did not have time to explore:
- Neon palette: this works well when you can curate all of the images, but the app is heavily photograph based and the consistent neon treatment is lost when incorporating a variety of organic photos from each location
- 3D icons: the mixture of photography and 3D elements were at odds, additionally the 3D graphics work better at a larger scale but the non-photography graphics are not the star of the show here
- Travel status/rank: are you the Queen of Pangaea, or a Time Travel Wizard? Did not want feature bloat to get in the way
- Unique button: Press and hold VR style button or lever style button

Some assumptions set in place:
- Lodging is managed upon arrival if at all
- Departure and return are on demand, not scheduled
- User can only travel into the past, but future is beta