Ephraim Joseph

 

 

The Brief /

NERD ALERT: This is a spec project. In no way is it affiliated with NASA. It is just for fun. Apply a visual design to multiple surfaces. Demonstrate how you can apply a common visual language for a NASA time travel app, which consists of a UI that identifies where in time you are, where in time you want to go, and an actionable affordance to initiate time travel (don’t worry about flows). Provide a screen for both an iOS phone and an Android tablet that are on brand, while also being considerate of native platform design guidelines.

 

Assumptions and Goals

Before jumping into this project I need to wrap my head around the problems I’m attempting to solve. I’ll need to make some assumptions. I'm going to assume that time travel is possible. NASA doesn't usually create consumer products or services, they normally work with other government agencies. However, for this project I'll assume that NASA created a subsidiary company to innovate and focus on time travel for consumers. The purpose of launching a new brand is to connect with the general public in a fresh new way while using the "powered by NASA" stamp for credibility.       

When a designer takes on a difficult project such as this one, he or she runs the risk of "losing the forest for the trees," and not seeing the "big picture." The science and implications of time travel can be very confusing for some people (see, for example, the following flowchart which was posted on Tumblr, which attempted to explain time travel in movies). Trying to mitigate such confusion for the end user of the app is a challenging and important problem for the designer of the app to solve.  

 

Goal 01: Unambiguous / Time travel is a complex concept for most people to grasp and it can seem very terrifying. Albert Einstein's special theory of relativity, while impressive, is usually not considered "leisure reading." As if the concept of time travel isn't confusing enough, the lexicon of the Internet and time travel are similar, which can further confuse things. For example, the "back" and "forward" buttons are commonly used on the web, but, in a time travel app, the meaning of "back" and "forward" is ambiguous since the end user may think such words refer to traveling "back" and "forward" in time, rather than navigating through the app. It's important to stop and think, "Does this make sense within this context?" Elements that work well in most places may not work this time. Context can make a world of difference. As designers, we must be empathetic toward the user and make sure every detail is carefully considered. The UX/UI should feel familiar and simple.  

Goal 02: Fun / Although a time travel app doesn't exist today, travel apps do. Unfortunately, people don't like using them. Parents delegate these types of stressful tasks to their kids. In fact, there's an entire industry for people who hate booking flights so much that they'd rather pay someone else to do it for them, such as travel agents and concierges. A time travel app shouldn't be that bad. Actually, it should be fun, exciting, and easy to use. Leaping into your future or past would be exhilarating, magical, and a little scary. The anticipation would be unbearable, but once you take the plunge it'd be an awesome ride. The app should reflect these feelings of anticipation and excitement.   

Goal 03: Slick / In addition to unambiguous and fun, the app should be slick. It’s has to feel polished, innovative, simple, fluid, and easy to use. The visual language should be beautiful and the branding should be meaningful and memorable. It should be an immersive experience that's smooth and technologically advanced. The typography should be big and beautiful, the layout should be clean and organized, and the the hierarchy should be clearly defined so the things you need are front and center. The user's needs should be the number one priority. Content must be easy to digest and icons should be recognizable instantly. People love to use beautiful products that work well.    

 

Research

Visualizing the concept of time:

Humans have measured time in many ways over the course of history. We're obsessed with time because we're slaves to it. Everyone's time on earth is limited so we try to make the most of the time we have. The ability to travel to the future or past would be ground-breaking and life changing. It would give us control like never before.

 

Visualizing the feeling of jumping into the future or past: 

Diving into your past or future would be unbelievable. The anticipation would be intense. Time travel would make for great reality T.V.

 

Visualizing time machines in popular culture:

Time travel is such an interesting concept that it's been weaved through the fabric of our popular culture. We've seen time travel in art, films, and even software. Time travel is usually pretty scary in movies so this app will need to feel safe and fun.     

 


Inspiration

UI inspiration:

I drew inspiration from many different sources. The alarm clock app, Rise, and the music streaming app, SoundCloud, both have clever functionality around their timelines. As you scrub SoundCloud's timeline, the numbers displayed above change in real time which is really intuitive, simple, and fun. I can use something like this for my "set your date and time" functionality. Google Earth is beautiful and easy to use. I think it would work well for my "set your location" functionality. Localeur is a curated community of local insiders who want to help you experience local in their city. This type of social element would be great in my design to help time travelers make the most of their trips. I remember saving up $100.00 to buy the Sega Genesis gaming system when I was a kid. I loved the black futuristic design, the shape of the controllers and how the fit in my hands, and the super realistic games (compared to Nintendo). At the end of the day, it's just a few pieces of plastic that hold the system together but when you invest a little extra thought in the design phase you can make those pieces of plastic special and different... that's when you make a connection with people. There's something contagiously exciting about a countdown, weather it's a countdown to liftoff, New Years, or a buzzer beater in basketball, a good old countdown will get you out of your favorite lazy boy recliner to take notice.                

 

NASA brand inspiration:

 

Music inspiration:

Daft Punk - Giorgio by Moroder

Foo Fighters - Everlong

Daft Punk - Touch

Foo Fighters - Best Of You

These songs and music videos all popped into my head as I was going through my research process. The whole Daft Punk album feels very futuristic but the two songs I referenced helped set the tone while I was working. Foo Fighter's Everlong video has some great dream sequences that play with the concept of bouncing around in time and space. Their other video, Best Of You, showcases some nifty montages of intense moments which reminds me of what time travel might feel like. Being able to jump into the "best" moments that might define ones life would be truly remarkable. 

 


Visual ID

As I began sketching out some branding ideas a also tried to think of a good name for the app (subsidiary company). Spacetime made the most sense to me because you can't really separate the two. For example, if someone only asks you to meet them at 8 AM, you'll ask them, where (space)? If they only ask you to meet them at the bus stop, you'll ask them, what time? This concept kept popping in my head until I decided that time and space should be weaved together since they're inseparable. In fact, this marriage of space and time can be a metaphor that grounds the design decisions for app.    

Advance-Logomark-02.jpg
Advance-Logomark-02.jpg

Since this is it's own company (powered by NASA) I decided to create a bold and unique flavor for Spacetime. One that would excite and delight consumers (especially young ones). I wanted something fresh and new while keeping the forms and typography timeless and modern. The colors and textures feel futuristic but there's a little bit of warmth and nostalgia in there. Blending textures and flat solids creates a slick contrast. The icons are very simple. They each carry three energy balls which represent action and movement. The balls also unify the icon system.  


 UX/UI

 The first screen is a simple login screen. Users can login with facial recognition, a thumb print, or the traditional way. The second screen welcomes the user by name with an invitation to explore. The user can always swipe from right to left to activate the microphone to speak commands. Otherwise, they will select "WHEN?" or "WHERE?" to move on. As I mentioned before, space and time is the metaphor that grounds this design. All we need to know is when and where, super simple. Using an accordion menu design with check marks confirming completed tasks helps simplify the UI by eliminating the need for "back" or "forward" buttons, a progress bar, or a confirmation page. The "WHEN?" panel elegantly slides up revealing the fun timeline UI (screen three). Taking influence from the SoundCloud app, the user can scrub the timeline with their thumb and see the date change in real time. They can also make their selection by simply spinning the month, day, and year to their desired date. They will do the same for "time" by toggling. Next, the user taps "WHERE?" and utilizes Google Earth's functionality to select their destination. Their current location will be default.        

The first screen is a simple login screen. Users can login with facial recognition, a thumb print, or the traditional way. The second screen welcomes the user by name with an invitation to explore. The user can always swipe from right to left to activate the microphone to speak commands. Otherwise, they will select "WHEN?" or "WHERE?" to move on. As I mentioned before, space and time is the metaphor that grounds this design. All we need to know is when and where, super simple. Using an accordion menu design with check marks confirming completed tasks helps simplify the UI by eliminating the need for "back" or "forward" buttons, a progress bar, or a confirmation page. The "WHEN?" panel elegantly slides up revealing the fun timeline UI (screen three). Taking influence from the SoundCloud app, the user can scrub the timeline with their thumb and see the date change in real time. They can also make their selection by simply spinning the month, day, and year to their desired date. They will do the same for "time" by toggling. Next, the user taps "WHERE?" and utilizes Google Earth's functionality to select their destination. Their current location will be default.        

 Once their date/time and location is confirmed, the launch button will begin to glow and pulsate. The user can confirm the details and then press and hold the launch button for three seconds to launch. The app design is very fluid and seamless except for this intentional point of friction. Since this action is high-risk, we want to make sure the user has made the correct selections before launching. The three seconds hold and the infamous countdown (screen 2) add a little playfulness and anticipation. Screen three welcomes the user to their destination with all the necessary information they might need, like address confirmation, weather, sunrise/sunset, safety, map, food, hotel, natural time vs. current (new) time in the top right corner. It's important to note that natural time (the "actual time" prior to, and unaffected by, any and all time travel) is always located in the top right corner and the user can always swipe from right to left to get back to this screen which is constantly updating based on the users location in space/time. Also, the mic is available on this screen which allows the user to make voice commands. The last screen showcases the slide-out menu which houses many useful features to help you connect with friends, document your travels, and get the local's experience. You can start a new trip from here as well. If you click on your name, under "My Spacetime," you can manage your profile and even see your accurate age (with all that time traveling you may not be able the keep track).        

Once their date/time and location is confirmed, the launch button will begin to glow and pulsate. The user can confirm the details and then press and hold the launch button for three seconds to launch. The app design is very fluid and seamless except for this intentional point of friction. Since this action is high-risk, we want to make sure the user has made the correct selections before launching. The three seconds hold and the infamous countdown (screen 2) add a little playfulness and anticipation. Screen three welcomes the user to their destination with all the necessary information they might need, like address confirmation, weather, sunrise/sunset, safety, map, food, hotel, natural time vs. current (new) time in the top right corner. It's important to note that natural time (the "actual time" prior to, and unaffected by, any and all time travel) is always located in the top right corner and the user can always swipe from right to left to get back to this screen which is constantly updating based on the users location in space/time. Also, the mic is available on this screen which allows the user to make voice commands. The last screen showcases the slide-out menu which houses many useful features to help you connect with friends, document your travels, and get the local's experience. You can start a new trip from here as well. If you click on your name, under "My Spacetime," you can manage your profile and even see your accurate age (with all that time traveling you may not be able the keep track).        

 
 

 

For these high-fidelity mockups I tried to be mindful of their respective native platforms while making sure the Spacetime brand was properly expressed. For the iOS phone, I followed Apple's Human Interface Guidelines by using clean iconography, making the content the focus, applying immersive full-screen imagery, and translucent effects.      

For the Android tablet, I followed Google's Material design principles. I used Spacetime's brand colors and background textures to help the brand shine through. I think both mockups stay true to their brand while supporting the platform they live on.

 


Brand Extended

 

The posters above are fun brand applications that target various audiences. They spark a sense of wonder and imagination.

 

 
NASA.gif