Sole designer—from research, prototype and testing to UI design.
6 weeks in 2021
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.
How can we enhance the day-to-day life of Shanghai citizens by making invaluable, city-related information readily available to them?
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.
This sitemap—which was created in Mural— reflects the current content structure of the municipal Shanghai 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Above are a few wire sketches I created using a whiteboard app on the iPad.
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.
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.
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.
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.
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.
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.
The images showcase screens of the final product.
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 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.