Every street has a story to tell.

 

Type

Product Design
Interaction Design

Timeline

8 weeks

Platform

Mobile

I've always been interested in history, the entire world around us is shaped by decisions and events of the past

Obscura started as an idea aiming to reveal some of that history, to better understand its influence on the present.

As odd as it sounds the impetus for this project was the soundtrack to Lin-Manuel Miranda’s Broadway musical Hamilton. Specifically the reference to Admiral Howe landing 32,000 troops in New York City, it sparked my imagination, and got me thinking:

What would 32,000 troops in Kip’s Bay look like?
Turns out it looks something like this Courtesy of: Robert Cleveley

Turns out it looks something like this
Courtesy of: Robert Cleveley

 
 

Researching the Problem

Looking around at the current market, there weren't really any products that met the needs of people who were interested in learning about the history of their neighbourhoods or cities, apart from niche blog posts, or library archives. Before starting I wanted to verify that there was a real desire and interest to learn more about history, since what's the point of building a product the market doesn't want.

I conducted a mixture of surveys and interviews to assess market interest prior to building.

All of these interviews, surveys and observations eventually led me to a tangible How Might We question, which would be the guiding star for the remainder of the Obscura Project.

 

73%

of people prefer exploring on their own while travelling.

 

19/22

People were interested in learning more about the history of their city.

 

90%

of people who wish they knew more about the history of area they lived in.

 
 
 
I think it’s important to learn more about your history, I think there’s a lot you can learn from that.
— Sarah K.
 
I always stop to read the plaque on the building, they’re always so interesting
— Fadi R.
 
 

How Might We:

Help residents and visitors in a city engage with the history of the world around them?

 
 

Who are we designing for?

Based on a mix of interviews and surveys, the next step was to establish user personas. The characteristics of these users would form the basis for future decisions, especially regarding features, preferences and hierarchy.

The research revealed two main archetypes, the Authentic Adventurer who values travel, self-reliance and enjoys learning on his own terms.

The Curious Commuter was more interested in local history and ascribed more value to learning on the fly, she also preferred to view short snippets of text or images rather than long-form articles.

 
 
 
 
 

A walk with Amelia

Creating the experience map meant taking a look at the entire problem space, and stepping into the shoes of Amelia Earhart our Curious Commuter.

The experience map imagines the journey that Amelia would take while on a weekend tour of her hometown of Boston. 

She is aware of the rich history that Boston has to offer, and she is really interested in the history of the American Revolution in particular. This map highlights her journey and exposes some areas where a design intervention could help alleviate some of her frustrations. One of the things that was important to consider for her journey was her mindset leading up to her arrival at her desired location as well as her thoughts about the area that she'd arrived.

 
User Journey.png
 
 

Getting with the flow

With the bulk of the research conducted, and a better understanding of the user and their pain points it was time to map out some preliminary task flows. I decided to focus on the core task of learning more information. The importance of this task flow became obvious while designing Obscura 1.0, during this iteration I opted to leave the brief summary out, which many users requested during interviews.

 
 
 
 
Sketching Image.jpg

Putting pen
to paper

With a clearer picture of the users who might user Obscura as well as their frustrations it was time to move to sketching. By focusing on a core epic, and a task flow I focused on sketching out the scanning experience.

By scanning a building or landmark users would be able to see a timeline of the history and be able to swipe back through time.

 
 

Obscura 1.0

This first iteration was tested with five users, 1.0 suffered from many issues including information hierarchy and readability. Many of these problems stemmed from a desire to create a minimal and gesture based interface. The main challenge was figuring out how to incorporate the timeline function into the app in a way that was easy for users to understand. 

 

Key Takeaways

The SnapChat based design of the camera led to issues, especially when it came to the meaning of icons.

On the scanned image screen, the text hierarchy made the purpose of this screen confusing and having two methods of swiping made no sense to users.

When learning more the massive wall of text was a daunting task that made most users bounce away from the screen almost immediately.

There were also concerns surrounding the related button section found at the bottom of the long form information page.

Obscura 1.0 Wireframe.png
 
 

Obscura 2.0

This version aimed to eliminate issues with the visual hierarchy, and sought to dispel confusion surrounding the timeline function of the app. This iteration saw the testing of the vertical timeline in an attempt to reduce the confusion caused by swiping. This version also saw the introduction of coach marks as well as gestures which would lay the groundwork for later iterations.

 
Obscura 2.0 Wireframes.png

Key Takeaways (Part 2)

Many users were confused about the heart and bookmark icon and what the difference between them was from a functional perspective.

This version also saw the introduction of a vertical scrolling timeline to reduce the confusion when “moving” through time, the idea stemmed from moving deeper into the past.

Double tapping the image revealed a bullet point list of the history a gesture taught via coach mark, however, many users forgot this instruction or skipped the coach mark completely.

Attempting a minimalist design with almost no standard navigation elements made returning to the previous screens very difficult.

 
 

Obscura Today

With all the learnings from previous interactions mixed with guerilla testing as well as formal user testing I finally arrived at a more complete product.

This iteration featured a more fleshed out version of the gallery, which showed users more related images specific to the location and time period. This image focused addition aimed to meet the on the go needs of Amelia Earhart. The audio tour feature was also well received among users, especially those that identified more with Meriwether Lewis. These users valued the fact that while travelling they could easily download information for certain locations and create their own personalized tour.

By reorienting the timeline for horizontal scrolling and indicating that the user had to swipe to the right to view the past, users felt as though they were swiping back in time.

Animating the prototype in Flinto added to the realism and helped orient the user with screens outside the viewfinder.

 
 
 
 

Final Words
(sort of)

When I finally presented Obscura I let out a sigh of relief, my first big project was done.

I had set out to help users connect with the world around them through history, the curtain of time had been pulled back. People were amazed to see the history of the building they were standing in.

History was cool again.

But Obscura is still far from perfect and as they say, design is never done.