A mobile app for the most interesting city in the world.
As part of my UX Design course at General Assembly, my partner and I explored an opportunity for the New-York Historical Society based on a shared interest in history and self-education. We designed a mobile application in two weeks.
Imagine if people could walk around NYC and transform the city’s rich history into an outdoor museum. We developed a mobile app where upon walking past a landmark, users would collect informative cards that help them dive deeper into the history of the landmark.
Since this was a two-person team, each UX role was split rather evenly. Thus, my partner and I each had a heavy hand within ideation, user research, wireframes, and prototyping.
Project Planning and UX Methods:
Since the project was limited to two weeks, it was a challenge to prioritize UX activities with the goal of delivering a prototype. While we definitely took a guerilla approach to the design process, it was also important to us to stay disciplined to a schedule.
Our team engaged in a competitive analysis to determine what other apps existed that were similar to our concept and then measured the usability of each of these apps. We paid particular attention to how able these apps were to meeting our primary objective of teaching the user about the history of their surroundings. Below is a flow of a competitor app, Field Trip.
I documented our competitive research, and this allowed my partner and I to communicate about possible pains and pleasures for users. It narrowed our focus to ask better questions in our next phase, user research. Below are some of our conclusions from competitive research:
- Apps often provided non-historical notifications to stores and restaurants, most likely as a way to generate revenue for themselves. We wanted to avoid this and felt that our app would have a more narrow (and enjoyable) scope for users.
- Apps often scraped information from too many third party sources. Thus, users might get five different summaries of the history of one location.
Discovering the problem:
As we gained information from competitive analysis, our momentum shifted towards discovering how to build a flow to maximize the learning experience. When we conducted our first set of surveys and interviews we were focused on trying to understand users preferences for learning about novel environments.
Of particular note, my partner and I were fascinated by a recent New Yorker article highlighting William Helmreich, a professor who walked every NYC street block and documented his story in his book The New York Nobody Knows. We were able to get the professor on the phone to pick his brain about discovering NYC. Our conversation with him emphasized how the incredible diversity of NYC can provide differing and uniting historical contexts.
After finishing our interviews and analyzing survey results, we created a features prioritization list. This helped us prioritize our initial designs.
- People overwhelmingly want to learn more about the history of the buildings, events, and people from the past.
- People enjoy a gamified experience, but it shouldn't be excessive (i.e., cheesy, childish, or corny).
- People are sensitive to notifications, and they want to be able to modify the frequency and timing of receiving notifications.
Defining the problem:
I crafted three personas to paint a picture of typical users. These personas were created based on our surveys and interviews. They allowed my partner and I to have a common language when discussing our users; they made our users live in our conversations. The persona represented here is "Lisa', an incoming graduate student at Columbia University. She is new to New York and desires to learn more about the city before making the decision of living in New York after graduating.
User Journey Map
I developed a user journey map for Lisa to describe how she would integrate the app into her daily activities. In this journey map, Lisa receives the most amount of pleasure when she is not looking at her phone screen. Instead, her most joyful moments of the day are when she's interacting with others and her environment. She does, though, receive satisfaction when learning about her environment or sharing moments with her friend through this app.
We also explored the our technical limitations and possibilities, especially augmented reality. We were inspired by Yelp's Monocle feature, where users can explore different businesses by using the camera feature on their smartphones (along with passively using geolocation services). This interested us enough to develop a feature unique to our competitors, our Viewport. To the right is a final template for that feature.
Designing towards a solution:
We developed user flows to demonstrate how someone might learn more about a historical site either manually through the app or when they received notifications. It was important that there were multiple pathways to receive information and that they were all shallow in navigation.
Ideation and Sketching
We conducted design studios to draw out low fidelity sketches. We were able to align on feature prioritization such as being able to favorite and share landmarks. It also provided us a platform to discuss how to allow users to control their notifications frequency.
Medium Fidelity WIre Flow:
Medium fidelity wireframes are produced quickly after gaining insight from paper sketches. The sequence below represents three routes a user can take to learn more about a historical site: through batch notifications, through a map view, and through an augmented reality view.
High Fidelity Mockups:
These high fidelity wireframes express a solution to our initial design challenge. These were developed after multiple rounds of usability testing. A prototype was created and presented using InVision (see link below). Users stated that the flow of the prototype was simple and intuitive. The flow below represents our persona's journey of learning more about the Flatiron Building.
Prototype on InVision:
We developed a research report, annotated wireframes, and a clickable prototype for this project. Click on the image below to open the clickable prototype in InVision.