Image of the Shanghai city skyline with an iphone app picture in front of it.

The Shanghai Source

A city-related app made to enhance the day-to-day lives of residents.

Project Summary

Project Type


My Role

Sole designer—from research, prototyping and testing to UI design.


6 weeks in 2021


Quinnipiac University
M.S. Interactive Media & Communication

Team Members

Professor Bjorn Akselsen

Project Details is the official municipal website for Shanghai residents, visitors, and businesses. In one of the world's fastest-growing cities, the website plays an essential role in keeping people informed on happenings in their city.

But in a highly-mobile, app-driven society, is only available on web browsers. According to recent data from Statistica, "While mobile app downloads are surging across the world, almost half of the traffic is from China." This surge reveals how every aspect of China's life transpires on local mobile apps like Weixin, DianPing, TaoBao, and Douyin. By meeting users where they already are, Shanghai municipal could drastically improve their outreach. And residents' daily lives would benefit from regular access to the website's valuable content.

To address this disconnection, I applied ux design principles to reimagining the website as a native, downloadable app. The goal was to create an app that would support the daily needs of its residents by providing them everything needed to navigate and enjoy their vibrant and ever-evolving city.

Problem Statement
How can we enhance the day-to-day life of Shanghai citizens by making invaluable, city-related information readily available to them?

Website Audit

I started by conducting a website audit to understand who the audiences are and what type of content the website provides.

Images of the website.

A selection of web pages from the Shanghai Municipal website.

Screenshots from the website.

Left: A screenshot of posts uploaded to the site in one day. Everyday the website is updated with lots of new content for residents.

Right: An analysis of the website revealed that the Shanghai Municipal website provides content for foreigners, residents and businesses.

2 Key Insights


The website caters to three different audiences: foreigners, businesses, and residents. But, the content for foreigners and businesses is static, while the content for residents is dynamic. Each day, several new articles are posted for residents. 


The Shanghai Municipal government provides a ton of valuable content for its residents, including the most up-to-date information on city alerts and how to enjoy the city (including arts, architecture, events, landmarks, fitness paths, and attractions). 

Based on these insights, I decided to focus the app on resident needs since their content would be the most regularly updated and impactful to their daily lives in the city.

Landscape Analysis

Next, I conducted a competitive analysis to familiarize myself with how other cities create apps and content for their residents. My goal was to evaluate the content and usability features of the apps of other cities and identify any gaps and opportunities for the Shanghai app.

Image of a competitive analysis matrix.

I compiled the data into an analysis matrix to compare similarities, differences, and opportunities. I chose large, international cities like Shanghai to understand how the approaches may be similar or different based on location or culture.



Other cites provided information to residents that could also be of value to Shanghai residents, like using public transit, recycling programs, day trips from Shanghai, and a list of libraries and bookstores across the city. There is an opportunity to include additional content in the Shanghai app that can add value to residents. 


Apps provide lots of opportunities to customize and personalize the user experience, which can increase its value for residents and encourage continued use. Enabling filtered searches based on people’s preferences, saving items to customizable lists and quick sharing of information with friends should be considered.


Shanghai people and government both promote a strong sense of community, which opens up an opportunity to include a section solely for community spotlights in the app.

User Stories & Flows

I skimmed through old WeChat conversations and pinged my friends and neighbors to ask what types of tasks they would like to conduct on an app like this. Using the information I gathered from those conversations, I created three user stories and flows that explored how people could accomplish their goals in different areas of the app.

The user story below is for Jane, a young lawyer who works long hours every weekday. As a busy professional, she needs to quickly and easily find things to do in the city so she can enjoy her time off with friends without it taking it becoming a hassle to plan.

Conducting this exercise helped me identify what types of actions a user may want to take at specific points of their journey. For example, while working on Jane's user flow of finding an event, I realized Jane might also want the option to book tickets, share the event with friends or bookmark it.

Card Sorting

Throughout the previous phases, I compiled a list of the existing and potential content for the app. I needed to group and label the content to determine what sections the app would include, so I conducted a card-sorting exercise.

Image of post-its on the wall.
I wrote every content and feature idea on a post-it and tacked it on my white wall.
Image of post-its on the wall.
Then, I began organizing the content by similar themes, and labeled the groups using yellow post-its.

Site Mapping

Using the results from the card sorting exercise, I built the first of many versions of the site map. The first sitemap was an educated guess. Then after user testing and further examination, I revised it.

Image of a sitemap diagram.

After a few iterations, this is the final sitemap for the app. Boxes with a purple outline indicate that clicking on those sections will lead to a new page of content-related links.

Wireframe Sketches

Referring to the sitemap and user flows, I drew rough sketch ideas for the app. The process was fast and fluid as I got all ideas out of my head and onto paper.

Image of sketch ideas for the app.

Above are a few wire sketches I created using a whiteboard app on the iPad.

Paper Prototyping

At this point, I had not received feedback from anyone on the direction of my app. I created a usability testing plan, and used the paper prototyping method to build a quick and affordable version of my idea that I could put in front of users. I developed "screens" for every task flow identified in the usability testing plan. In just one day, I transformed a rough idea into a tangible, interactive prototype.

An image of the usability planning document.

Before testing, I developed a plan, script and tasks in advance of the meetings.

Image of paper prototype.

A few screens that I created for my paper prototype.

Prototype Testing

I conducted the paper prototyping sessions with three people using two different formats—online using the Marvel Pop app, and in-person.

Some of the tasks I asked users to complete included: finding an event based on specific dates, filtering and bookmarking a park in a customized list, and learning more about public transportation.

What's Working

  • Explore, and Events sections are intuitive to use and provide valuable information for users. 
  • The Gallery concept was popular, and its layout was easy to understand. It prevented the need to search images in a different app (like Instagram), which is beneficial in China since Instagram is blocked.
  • Valerie thought having transportation ingrained into the same app used to explore places and events was valuable—especially since she typically finds something to do, then immediately figures out how to get there. Distance and transportation options significantly impact people's ability to do things in a big city.

What's Needs Improvement

  • Some labels are still unclear. Users thought the sections titled "Resident Resources," "Community Center," and "News" were too vague and weren't sure exactly what kind of content they would find in each section.
  • "News" and "Events" need their own sections. The content for these two sections was grouped in the prototype, but that confused users.
  • The filtering menu should be consistent across "map" and "list" views. The location of these filters was in two different places on the screen, giving users the impression they were not the same filter.
  • AQI is not necessary.

Visual Elements

From the traditional shikumen-lane houses, street food vendors, temples, and parks to the high-end shopping malls, boutique cafes, and cocktail lounges, Shanghai is the perfect juxtaposition of old and new, and east and west.

Referencing the city's history, culture, and sites for inspiration, I developed a design system for the app that combined contemporary and traditional elements.

Shanghai is home to one of the richest collections of art deco architecture in the world. A mix of western influences and 'Chinese deco', the city's signature style saw its heyday in the 1930s and gives insight into the cultural movements of the era.
Quote from Lonely Planet
Image of a style tile for the app.

For the visual system, I wanted to include a mix of traditional and modern elements to reflect the character of the city.

Design system of the app.

I built a visual system that included elements such as type, color, components and spacing. I used these defined elements across the app for consistency.

The Final Product

The Shanghai Source is a reliable and trusting municipal app that makes navigating life in the city less confusing and more enjoyable.

An image of the landing screen of the Shanghai Source app.
Image of screens from the app.

The Shanghai Source keeps residents up to date with Alerts and City Updates prominently placed on the top of the home screen.

An image of some screens from the app.
The Discover section is your guide to all the city's sites and attractions.
An image of some screens from the app.
The Events section highlights all of the city's current and upcoming events.
An image of some screens from the app.
The Directory sections provide residents with valuable resources like emergency numbers and community initiatives like recycling and public transit.
An image of some screens from the app.
Galleries are photo libraries of the attractions in the city. Users can scan all the images, search by location and add their own pictures.

To learn more about the app, please watch the product video below, or check out the interactive prototype here.

Watch the video above for a demonstration of the interactive prototype.


This was the first project in which I conducted every phase of the user-centered process independently. It helped me understand how the different stages connect and inform each other. I moved through each new method while building more clarity around what I had done before. Each exercise, iteration, and revision influenced the final product and added a layer of consideration to my design decisions. The final product is the sum of all that happened beforehand.

It's incredible that after six short weeks of research, ideation, prototyping, and testing, a vague idea has evolved into a tangible, visual solution.

If I had more time I would...

Conduct a proper card sort.

The organization of the site is based on my own mental models. Conducting a proper card sort could ensure I am building a site architecture that aligns with the users mental models. 

Conduct another round of usability testing.

I want conduct a larger round of testing with a wider range of users that better represents the diverse audience of the app—including locals and expats of different backgrounds and ages.

Consider incorporating an interactive map.

I’d like to determine if including an interactive map where users can sort for all topics in the “Discover” in one place would be beneficial to users. For example, filtering all parks, museums, historic sites in XuHui district that have “free admission”.