The Shanghai Source
A city-related app made to enhance the day-to-day lives of residents.
A city-related app made to enhance the day-to-day lives of residents.
UX, UI
Sole designer—from research, prototyping and testing to UI design.
6 weeks in 2021
Quinnipiac University
M.S. Interactive Media & Communication
Professor Bjorn Akselsen
Shanghai.gov 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, Shanghai.gov 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 Shanghai.gov 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.
Ideate, Prototype & Test
Visualize & Design
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.
A selection of web pages from the Shanghai Municipal 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.
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.
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.
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.
Opportunities:
01
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.
02
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.
03
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.
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.
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.
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.
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.
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.
Above are a few wire sketches I created using a whiteboard app on the iPad.
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.
Before testing, I developed a plan, script and tasks in advance of the meetings.
A few screens that I created for my paper prototype.
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.
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.
For the visual system, I wanted to include a mix of traditional and modern elements to reflect the character of the city.
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 Shanghai Source is a reliable and trusting municipal app that makes navigating life in the city less confusing and more enjoyable.
The Shanghai Source keeps residents up to date with Alerts and City Updates prominently placed on the top of the home screen.
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.
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”.
