Shanghai Source App

Overview

The Shanghai municipal website is a valuable resource for current and prospective residents of the city. As I researched the site’s information architecture, I uncovered the website’s three primary audience groups:

1. Newcomers outside mainland China who want to work, live or study in Shanghai and need guidance on immigration policies and processes.
2. Current residents inside mainland China who wish to stay in the know of any news, events, tourist attractions, policies, and city developments.
3. Businesses interested in moving or expanding their operations in Shanghai.

Although newcomers and businesses may only check information occasionally, residents would benefit from staying up to date with news and alerts on a regular basis.

My Goal

My goal was to design an app for current residents of Shanghai that provides all of the news and resources they need to enjoy life on a daily basis. Apps allow for quicker accessibility than websites which make sense for resources that users will frequently revisit or need in a hurry.

Made for Shanghai residents, the app will provide all of the news and resources they need to enjoy life in their city daily.

My Role and Responsibilities

This project was completed at Quinnipiac University as part of the M.S. in Interactive Media and Communications program. I conducted all of the research, testing and design that you will see below.

Problem Statement

How might we build a Shanghai app that helps its residents….

• stay up to date on important alerts and updates?
• enjoy all of the events and attractions that Shanghai has to offer?
• connect with the happenings of their community?

Research

Landscape Analysis

After identifying my app’s user base (residents) and purpose, I conducted a landscape analysis of other city websites worldwide. My goal was to understand what other cities are doing differently or similarly to Shanghai and uncover any opportunities. With every city’s website, I learned just how differently information architecture impacts a website’s navigability. Although plenty of information overlapped, each website’s content was labeled, prioritized, and organized very differently. 

Card Sorting

After conducting the landscape analysis, I began brainstorming content ideas that would be meaningful to Shanghai’s residents. This ideation happened quickly and fluidly as the landscape analysis already had ideas brimming in my mind.

After posting all of my ideas up on the wall, I conducted a content grouping exercise and categorized my information into buckets, then labeled each group (taxonomy).

To learn more about this part of the project, click here.

Site Mapping

After determining potential content and categories, I organized the information into the first draft of a sitemap. Throughout the process of this project, this sitemap evolved quite a bit. Below are the first and final versions.

User Stories, Scenarios, and Flows

After building my first version of the information architecture, I wanted a better understanding of how users could potentially move through the application based on their distinct needs. I created user stories, scenarios and flows to help me explore their possible intentions and actions.

To learn more about this part of the project, click here.

Sketching and Prototyping

Using the user flows to determine what types of pages I would need, I made some wireframe skeches to explore how my content could be structured on main screens. What would a user need to see right on the home screen? What content would a user need to access from anywhere in the app? What content needs to be accessible, but only occasionally?

Wireframe Sketches

Paper Prototypes

Within one day, I went from having nothing to represent my app to building a physical, interactive model that I could get in front of people.

To learn more about the process of making this paper prototype, click here.

Usability Testing

Usability testing is a common form of testing in design thinking. It is an opportunity to evaluate the design decisions I have made in my prototype by putting it in front of users and observing how they interact with it.

During the virtual testing with Mike and Val, I gained a ton of feedback in regards to the functionality of the prototype, as well as what was working and not working with the app. Mike and Val validated the inclusion of features like Events, Transportation, Maps, Filtering options, and the Gallery section. They also challenged the clarity of other content sections like News, Resident Resources, and Community Center.

The paper prototyping testing proved to be very insightful as well. There were certainly areas of confusion that were insightful to observe—several of which matched Mike and Val’s concerns. David also provided insight into the content hierarchy and which areas of the app he thought would be more relevant than others.

Here is a short clip from the paper prototype testing session.

To learn more about the testing session and see the full set of results, click here.

Visual Design and Hi-Fi Prototyping

After making revisions based on testing, I jumped into high-fidelity prototyping. High-fidelity prototypes (also known as hi-fi prototypes) are interactive prototypes that closely resemble the final product. Unlike lo and mid-fidelity prototypes used primarily to focus on an app’s structure and user flow, high-fidelity prototypes incorporate visual design elements like images, type styles, color, and final layout. Although they aren’t the real thing, hi-fi prototypes closely resemble the final product.

To honor Shanghai’s exciting leap into the future, I used bold typography that feels modern, and a pink accent color that mimics the city’s Pearl Tower as well as the warmth and energy of the city.

I also included little nods to Shanghai’s past by incorporating a traditional green hue and patterns inspired by the art deco architecture. As explained by Lonely Planet,

“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.”

The app, called the Shanghai Source, is designed with residents as the primary audience but could also benefit visitors. It’s a daily resource that provides a nice balance between everything users need to know to keep up with a city that is evolving at a swift pace, with everything they may want to experience in order to enjoy the many things Shanghai has to offer.

You can click on the interactive prototype here or watch the video below for a brief introduction of it. Once you open the link, click once on the landing screen to start the prototype. For the best, and most realistic experience, I recommend viewing the prototype on your mobile phone. It is designed specifically for the iPhone 8+, but would be developed to work on all mobile device sizes.

Lessons Learned

What started as a simple observation into the content and information architecture of the city’s website has now become a high-fidelity prototype. Every step of the design process was incredibly beneficial in building the outcome. I also learned a lot about the UX design process during this experience, and that part of being a UX designer is embracing the ambiguity that comes from building something new. With every step, I gained another little piece of a large puzzle. Every exercise, iteration, and revision was helping me get to the final product and build a clearer picture of what I was making. The final product is the sum of all of the exercises and iterations that happened beforehand.