city journey cover img - 2.png

Class Project

City Journey


Make the city a museum to explore, with your phone in the pocket and your eyes on the real world.


March 2018



Product Designer

3 months

Skills involved

• Design for mobile

• Research

• User testing

• Wireframe and prototype

The city needs a storyteller.

The problem

Urban history is what makes a city unique and interesting. Literature and museums are the traditional methods to record and convey the history of cities. But history happens and lives in the city. The buildings, streets or the coffee shop around the corner have their own stories to tell.


In the digital age, the stories can be better told through a more attractive and accessible way. The city needs a storyteller for not only visitors but also residents to explore and understand the stories that make the city what it is today.

PART 1.png
I have missed out a lot!
PART 2.png

Having recently moved to Seattle, questions about this city kept crossing my mind when I wandered out. What's the history behind the prominent building across the street? Why was there an underground city?


While searching interesting places, I experience a feeling of having missed out something - I just passed this building yesterday only without having known that it had such a fascinating tale!


It is at this particular moment that I wish I could get a notification informing me about the interesting stories, lesser-known facts, and enjoyable trivia of the places nearby. These situations call for a mobile app.


Fan, I love this idea! Looking forward to your presentation!

quote copy.png

— Kat

I spent some time observing the behavior of people at tourist spots in order to get a deeper sense of what I should build. Based on the field study, I came up with the main concept of the app.



What's the better way to tell the stories?

Encounter and listen to the city's secret and fun stories, with your phone in the pocket, eyes on the real world.

App concept


User Interview

To validate the concept and use case of this app, I did a few informal interviews with my classmates.


To Empathize

Extended function

Engage users with a curated and immersive tour with the audio guide.


App structure V1.0

Don't believe intuition. Validate it.

I envisioned two modes - Encounter for getting pop-up notifications based on the user's location; Explore for motive users to go for a tour in the city.


So I built the first app structure.

naive version display 2.png

User Testing


I created a prototype on Adobe XD to carry out a round of user-testing with classmates.


According to user's feedback, I realized that I erroneously made the two modes (Encounter and Explore) mutually exclusive, when in fact they should not have been. A user should be parallelly able to use Explore with Encounter. It confused the users and made them believe that they could use either of the functions, but not both together.

App structure V2.0

Started over with scenarios.

After seeking feedback and guidance, I started over with thinking thorough the two scenarios.


I re-created the scenarios, including under what situation users would open the app and put down the possible inward and forward paths. It helped me to clear my ideas and guided most of my design decisions.

two scenarios 2.png



Having the two scenarios in mind, I drafted the user task flow and the app structure V2.0.

app structure v222.gif


How The Encounter Feature works.


Design Details

Which should be the landing page after unlocking?

landing page 2.gif

According to the scenario description, I thought users would tend to read the story after unlocking the screen.


However, during the user testing, I found that I ignored the possibility that even if users tend to listen to the audio, they might need the map to find where the story is located.


Therefore, I combined the two user needs of navigation, and text reading on the map page.  

Send notifications only when they are welcome.

The basis of this app is to push notifications, which is contrast to how I use the apps on my mobile. I hardly allow apps to send notifications, and for my convenience, I have turned them off forever. I’m sure there are many users who think likewise.  


Keeping it in mind, I created 2 features to cater to these users - Turn off notifications for a chosen duration, and allow only those stories that the user is interested in. Personally, I turn off notifications during the weekdays when I am always in a hurry.

settings mock up.png

Items here could be single stories, packages, a neighborhood, or a category like historical or photography spot.

One feedback from user testing is that users would not like to receive all kinds of stories. They have their own preference. Therefore, allowing only the categories they follow and places they saved manually push notifications is needed.

Stay tuned of the topic you like.

saved items - 2.png

Hands off, Head up

One of the users' pain point is spending too much time looking at their phone. Besides the audio of a single story, the Siri-like audio guide of a tour helps users keep hands free and head up.

siri mode.png

The commercialization of this app is dependent upon the business model that it will follow. How frequently will it provide new stories? How many sponsored places will be shown? If no sponsored stories, would it be necessary to show them in a feed format?


But I decided to keep the business aspect out for now, and made the homepage a gathering of the app’s features.

How to utilize homepage?

homepage mock up.png


Three things I would change.

3 things.png