Image of the app with the Shanghai city skyline in the background.

The Shanghai Source

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

Project Summary

Project Type

UX, UI

My Role

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

Duration

6 weeks in 2021

Organization

Quinnipiac University
M.S. Interactive Media & Communication

Team Members

Professor Bjorn Akselsen

Project Details

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.

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

Site Overview

I started by creating a sitemap of the website in order to gain a better understanding of what type of content Shanghai.gov is producing and how they organize it.

Image of a sitemap diagram.

This sitemap—which was created in Mural— reflects the current content structure of the municipal Shanghai website.

Image of pages from the Shanghai municipal government website.

A few pages from the Shanghai.gov municipal website, showcasing the range of valuable community-driven content. Everything from news and alerts to arts, culture and events are included.

2 Initial Observations

01

The website caters to three different audience groups: prospective residents, businesses, and residents. Unlike residents, businesses and foreigners do not have dynamic content that updates regularly. Based on this insight, the app will focus its strategy primarily on the ongoing needs of residents.

02

Shanghai.gov creates a lot of great content. In addition to city-related news and alerts, the website also promotes the abundance of Shanghai arts, architecture, and culture. There are sections for current events, popular landmarks, fitness paths, resident stories, and unique attractions in every district.

Landscape Analysis

I conducted a competitive analysis to understand how other large international cities offer and organize similar information for their residents. I compiled all of the data into an analysis matrix to easily compare similarities, differences, and opportunities.

Image of a competitive analysis matrix.

Key Insights and Opportunities

  • Shanghai has one of the longest and busiest metros globally. According to the Chinese Ministry of Transport, "Shanghai metro carried an estimated 2.8 billion riders over its 462 miles of track in 2020." There is an opportunity to include information, alerts, and updates regarding public transit within the app.
  • Shanghai residents and the municipal government promote a strong sense of community. There is an opportunity to feature stories and images of residents from the website more prominently in the app.
  • With so much happening in such a large city, filtering capabilities for sections like events and attractions can help people narrow their criteria down to their own needs and interests.
  • In comparison to Shanghai's website, other cities had a more transparent taxonomy, like "News," "Events," "Transportation," etc. Some of the current labels on Shanghai.gov are ambiguous and too long for navigation titles on an app. For example, the "Shanghai Impression" section is a collection of videos, and content about the city's running paths is inside the "City Landscapes" section.

Card Sorting

The landscape analysis kick-started an ideation session in which I jotted every current and potential type of content onto pink post-its. Afterwards, I ran a 30min card sorting exercise to explore how things could logically be grouped and labeled. This gave me a much better sense of what information could be included in the app, and how it can all be categorized.

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

I used the card sorting results to create a sitemap that visualizes the app's structure. Doing this allowed me to understand the scale of the app. The first sitemap was an educated guess. Then after user testing, I updated the sitemap to reflect feedback and improve clarity.

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.

User Stories & Flows

I had a few conversations with some residents of Shanghai about the app concept and how it could benefit their lives. Then, using information from what I heard, I created user stories, scenarios, and flows for three different types of users. This helped me consider different pathways users could take in achieving their goals on the app.

2 Key Insights

01

This exercise gave me a better sense of how many steps it would take for someone to complete a task and the number of pages required to do so. Now, I have a better sense of how some sections need to connect to each other. For example, going from the home page to finding a park in your neighborhood, requires navigating through 3 pages of higher hierarchy first.

02

It also provided insight into some of the features and functionality that should be included in the app. With Jane's event search, I realized in addition to finding an event, she may want to register, bookmark it or share it with a friend. All of these actions have an implication to the design and development of the app, so it it's great that they were identified early on.

Wireframes

Referring to the sitemap, user flows and content outline that I previously created, I developed some rough sketches to begin visualizing the app. The process was fast and fluid as I got all ideas out of my head and onto digital 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

The wireframe sketches served as a great jumping point for visualizing the app. But, I wasn't sure if it was as easy to navigate as I was hoping. I needed to create a quick and affordable version of my idea, and get it in front of users to test its viability. So, I built a paper prototype. I developed "screens" for every task flow I planned to ask my users to complete. In just one day, I transformed a rough idea into a tangible, interactive prototype.

Image of paper prototype.

A few screens, interactive elements and modules that I created for my paper prototype.

By prototyping your ideas, you can put them in front of people early in the design process and gain valuable feedback. This not only saves time, money, and resources but also improves the final product.

Prototype Testing

After preparing for usability testing by recruiting people, building a plan, and drafting a script outline, I was ready to test and evaluate my design decisions. There were three participants total. Two happened via video chat using a digital Marvel Pop version of my paper prototype, and one was conducted in person.  

What's Working

  • Overall, users liked the content in the "Explore" section and thought each category was beneficial to enjoying and exploring their city. They also thought the name of the section was intuitive.
  • Valeries 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 play a major impact on people's ability to do things in a big city.
  • The Gallery concept was popular, and its layout was easy to understand. It prevented the need to search on one's own in a different app (like Instagram) to find images of certain things or places in the city. 

What's Needs Improvement

  • There was some confusion about what users expected to find in the "News," "Resident Resources," and "Community Center," sections and how "News" differs from "Alerts." The titles seemed too vague. Next step: Rename labels for better clarity. 
  • The "Events" section appears in the body section of the homepage and in the main menu. This confused people on which one to click, especially since they didn't go to the same place. Next step: Make sure each label has a distinctive name to avoid confusion.
  • Users wanted to bookmark the Fuxing Park card from the map page but had to click inside the card first to access the bookmark feature. Next step: Include the bookmark feature on the outside and inside of the cards. 
  • There are two different "filter" sections on the "Parks and Outdoor" page. It was unclear what the difference was and what information was being filtered. Next step: Reconsider the layout on this page and clarify what information is being filtered.

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 history, modern culture and sites of the city for inspiration, I developed a design system for the app that combined contemporary and traditional elements.

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.

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

The Final Product

The Shanghai Source is an app that invites residents to play an active role in keeping up with their ever-changing city. From the latest news and policies, to community galleries, events and district guides, the Shanghai Source makes life in the big city more effortless and enjoyable. The app emphasizes awareness, culture, and connection.

Image of app screens.

The images showcase screens of the final product.

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

Conclusion

This was the first project in which I conducted every phase of the user-centered process by myself. 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 to think that after six short weeks of research, ideation, prototyping, and testing, a vague idea has evolved into a tangible, visual solution. With the Shanghai Source, users have easy access to daily updates on critical and enjoyable happenings in their city, and can rest assured they'll receive alerts and notifications from a verified and trusted source. Scrambling to find information on the latest policies through secondary resources like wechat would no longer be needed. And, in just a few clicks, residents can also discover everything wonderful their city has to offer.

Paper prototyping was a significant milestone in the process, and without it, the final product would not have been as successful. Observing users stumble around designs that I thought made perfect sense helped me realize the value of testing and observation. Discovering this early on made it easier to rethink and redo the design and make it better.  

I also learned that the purpose of testing isn't to have everything figured out beforehand, but to get the product in front of your users early, and let their interactions inform design solutions.

In hindsight, I would have liked to prioritize the project into high, mid, and lower priority sections, then focused my efforts on making, testing, and designing an MVP. Building the product in stages would have given the project design cycle more focus and clarified what elements to user test.

I also would have liked to conduct some primary research (like interviews or surveys), and tested with more residents of diverse backgrounds in order to further validate my design decisions, and make sure the app is relevant and usable to the broadest range of residents possible.