Timewarp Mockup - iphoneX@2x.png

Timewarp App Concept

Timewarp

Mobile App | UX/UI Design | Co-founder

 
Timewarp Mockup - iphoneX@2x.png

Urge to Connect With the Past

Time travel has fascinated people for years. People have an urge to connect with the past. They wish they could view their world from another point in time and see who stood exactly where they are now. They feel a sense of nostolgia when viewing old photos of familiar places. By blending old with new photos from the same perspective, people can express that feeling and share it with others. Currently, there is not an easy way to do this.

 

 

The Challenge

Blending a historical photo with a new photo has been accomplished by various artists/photographers using technical photo editing tools, cameras, and a lot of time consuming upfront work. The challenge was to streamline this process and allow users with no technical knowledge to do the same in realtime with a mobile device.

The Solution

The Timewarp App provides people with historic photos from nearby locations and guides them to take a photo of themselves from the same perspective as the historical photo using Timewarp’s camera and alignment tools. Using Timewarp's editing tool people can easily layer and fade between photos, and share their creations through their favorite social media.

girl&bridgev2.gif
 

 

Contextual Inquiries

Creating Context

We hypothesized the concept would be sticky with young adults based on selfie and travel trends. I tested two use cases with young adults to create context and summarized my major insights.

 
Timewarp - Collage2@1x.png

1) Let Me Take A Selfie

User is on a run and takes a selfie with a historical landmark in the background

Mirror Effect

  • Due to the iphone’s selfie mirror effect objects on the left appear on the right. This was disorienting when corresponding a historical photo.

Geo-tagged & Guide

  • Spacial awareness skills are put to the test to find the exact location the historical photo. Directions to the exact geo-tagged historical photo need to be specific.

Correlating Photos

  • It was difficult get a shot with the correct angle. Spent ~3mins swiping back and forth between the historical photo and the camera. Need to view both the historical photo and the photo preview on the same screen.

fairmount-fade.gif

2) Fairmont Tourist Shot

Users are tourists/history buffs and want to recreate a postcard they bought at the Fairmont gift shop

Strong Anchor

  • A strong anchor is needed to correlate the new shot to the historical photo. For example: lining up the pillars in this historical Fairmont postcard.

People Carry Weight

  • Photos with people in the historical photos carry more weight than those of just the landmark. They bring more context to the era the photo was taken and were more interesting.

 

 

User WIREFLOW

Let Me Take a Selfie

Based on the pain points and needs identified from the contextual inquiries, I designed a low fidelity user flow of a user discovering nearby historical photos, selecting a historical photo, and taking a selfie from the same perspective as the historical photo. The flow helped the team visualize a streamlined user journey.

 
 
1-3 wireframes@2x.png
3-6 wireframes@2x.png
 

 
Feature Matrix - Timewarp.JPG
 

Feature Matrix

Complexity vs. Value

We felt the feature with the highest user value was juxtaposing a person's photo with a corresponding old photo; although, getting the new photo to actually match the old photo in realtime to the point it looked "cool," was technically challenging. Also, we were not completely confident of product/market fit to invest in technical competencies. Based on complexity we decided to pivot from our original concept.

 

 

Major Pivot

Selfie into History

We discovered that taking a photo with an iPhone 7 Plus or the (soon to be released) iPhone X in Portrait mode, we could separate a photo's foreground from the background using the TrueDepth technology. With this revelation, we could easily cut people out of a photo using depth data. We thought:

What if Timewarp was actually the app that one uses to "Selfie themselves into history?"

One could take a selfie (anywhere) and could put themselves in some amazing/funny historical events, then share on social media.

 
(Developer, & Co-Founder, Charles Fayal discovering how to use depth data to create cutouts)

(Developer, & Co-Founder, Charles Fayal discovering how to use depth data to create cutouts)

 

 
 

User Feedback

Forbes Conference

We put together some marketing material, a promo video, and pitched our concept at the Forbes 30 Under 30 event in Boston. We received positive feedback from the majority of conference attendees (mostly young adults 24-35 y.o.) regarding the quick cutout feature. 

I like the idea of being able to quickly create and share cutouts of myself with cool backgrounds. 
— Forbes Conference Attendee
 
 
IMG_7686.JPG
 

 

Next STePS

Beginning of "Warp"

Our concept of the app completely shifted. Our original idea was too complex, and feedback validated that users wanted to create quick cutouts.

We decided to focus our MVP on creating "easy cutouts" that could be juxtaposed with photo of a user's choosing, since it was a relatively low complexity and had high user value. Using a slider tool users could "magically" separate the foreground from the background. 

Next steps were to (1) identify and analyze the competition and (2) formalize a user friendly UI.

 

 
Created with iPhone 7 Plus Camera Portrait Mode, TrueDepth data and React.

Created with iPhone 7 Plus Camera Portrait Mode, TrueDepth data and React.