Ideas & Sketches

This was a design project I did when interviewing with Google. When I received the three design prompts from Google I was super excited that there was a time travel app option! I immediately chose this as my design exercise. I decided to go with this particular project because I think that time travel isn't far off from being readily accessible to anyone and that it would have a massive impact on our entire civilization. And of course, it helped that Back To The Future is probably my all time favorite movie! After I received the test, I immediately watched the entire trilogy and started to brainstorm.

I wanted to create a modern and clean design, so that it could be easily understood, viewed on multiple platforms, and make sense even in different time eras. Making it aesthetically timeless was very important and key to the visual design of this app.

Below are my initial sketches, ideas, and research.

Wireframes

As with any project, I ask a lot of questions to get as much information as I can about the topic I'm designing into. Some of my UX questions were “How can I make the interaction of time travel quick and easy?” and “What tools in the app are absolutely necessary for traveling through different eras and which are not?”. These continued to come up because I wanted to create an app that would be safe for users (time traveling can be dangerous!) and create an overall great experience.

I wanted to make it quick and easy, because in the case of an accidental time travel that put them in harms way, the user would be able to quickly escape danger. This required me to make the UI simple and easy to adjust and use. Being strictly a time travel app, the flow needed to be short and straight forward to give the user a clear path and for them to focus on the task at hand – time traveling.

iOS - iPhone 5S

Android - Nexus 7

Design

Since it’s an app by NASA, I wanted to give a nod to their base color palette, which led me to take inspiration from their insignia logo. I also pulled from a collection of space photos I found at a vintage store here in Philadelphia. I used a subtle dust and scratches pattern, that gave a slight texture to the dark blue background simulating a starry sky.

A mixture of analogues and monochromatic colors created a cool and sleek background. This allowed me to use white and baby blue for contrast, when I wanted to expose actionable items like buttons or editable content.

The typeface is Open Sans. I specifically chose this typeface because it’s modern, yet has a classic feel that relates to a dense san-serif, like Helvetica. It’s a bit on the playful side, along with being futuristic which is done by it having the option for it to be narrow and / or light.

I wanted to design a UI with a great sense of eye direction and could let the user focus on what they are doing – without being intrusive or bothersome.

Sign Up / First Screen

Allows users the ability to connect via Facebook and Google+. Along with being able to manually sign up with your email.

Connecting, especially Google+, would allow for more location tagging, but instead of geolocation it could be something like "temporal location".

Time Traveling Interaction

This UI had to be simple, but provide all of the necessary information. Showing where the user was, interactive items allowing them to edit where they wanted to go, and an initiation button to start time traveling was key.

Under the top nav is an area that will give you a background photo of where you currently are – this is based off the geolocation in the top left. Over the image, it will show the date and time of your current location.

Below that, I chose to add contrast to the editable time travel items. If you tap on one of the items, it will expand over the top image and allow the user to focus directly on entering in a time or date.

At the bottom is a button to begin time traveling. It's a bright color to make it to stand out for the user at the end – so they know exactly what they're doing.

Traveling in Progress

A simple screen at the end of the time travel interaction that reminds you to hold on to your device (you kind of need that), allows you to view the time left until you start to travel, shows you the date and time to where you’re traveling, and an "abort mission" option! Essentially, it’s a confirmation screen – giving you all the details that you've just entered and putting those details into action.

User Profile / Options

I wanted the user to be able to have their own settings, configurations, and security when it came to time traveling. I was playing with other ideas that could be implemented as well. Some of these were options for a device morph, finger print scan, and a portable satellite that the user could carry around and use as a WiFi signal. Allowing for connectivity throughout all eras!.

A slide out menu is used to expose your profile and all of the extra nav items. Making them accessible, but keeping them more organized.

The "Time Traveling" navigation item is purposefully second. It's an extra security feature. My thought behind that was – if someone (like your newborn baby) gets ahold of your phone – you wouldn't want your poor little baby to accidentally get transported into the middle of the Civil War! Same rule applies for when it's in your pocket. Say no to "pocket time-traveling"