city journey cover img - no icon.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

01 / The problem



Having recently moved to Seattle, questions about this city kept crossing my mind every time I wandered out. I got so curious about the stories behind buildings, the legends behind streets, or the history behind blocks. These tales are what makes this city unique.


While browsing the website of interesting places, I experience a feeling of having missed out something - I’d have passed this building yesterday only without having known that it had such a fascinating tale!


It is in 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.

02 / Empathize



The inspiration for this App came from my personal experience and my love for exploration and travel. But to validate the use case of this app, I did a few informal interviews with my classmates. I also spent some time observing behavior of people at tourist spots in order to get a deeper sense of what I should build.

research visulize.png
concept - 4.png

03 / App Structure V1.0



Based on user research, I envisioned two modes - Encounter for getting pop-up notifications based on your location, and Explore for letting the user search on their own

So I naively built the first app structure below.

naive version display.png



After I created the first app structure, I used the prototype built on Adobe XD to carry out a round of user-testing with classmates.
However, I erroneously made the two modes (Encounter and Explore) mutually exclusive, when in fact they should not have been. A user should be parallely able to use Explore with Encounter. The onboarding page confused the users and made them believe that they could use either of the functions, but not both together.

04 / Typical User 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 - 3.png


Having the two scenarios in mind, I drafted the app structure.

05 / App Structure V2.0


06 / Design Decisions




Landing page after unlocking


A confusion that I faced while rebuilding the app was which screen should be the landing page after unlocking the screen - detail, or map? 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, - navigation, and read content on the map screen.  

Task flow based on scenario - 3.png

Notification settings


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


One of the user task flows is to turn off the notifications when they don’t want to get disturbed for some time. Keeping in mind the same, 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.

saved items - 2.png

Saved items


Items here could be single stories, packages, stories and packages in 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.

settings mock up.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 design a gathering of the app’s features.

homepage mock up.png
Display - 3.png

07 / Hi-fi Prototype