Over the past six weeks, I’ve used design thinking practices and principles to help me build an app for the city of Shanghai. The process began with a simple inquiry into the information architecture and content of the city’s current website. By doing so, I noticed that the city updates the site frequently with information on policies, current events, and neighborhood highlights. But, websites are not nearly as widespread or convenient in China as WeChat mini-programs and apps—especially since the culture is highly mobile. Discovering an opportunity to build a resident-focused product on behalf of the city kicked off the project. After defining my problem, I framed my challenge into a How Might We statement.
How might we build an app for Shanghai that helps residents stay up-to-date on important information and enjoy everything the city has to offer?
With a clear challenge to solve, I used UX design methods to help steer exploration and discovery. I started with a landscape analysis of other cities to uncover any patterns and better understand what is and is not working in existing products. Then, drafted the first of many site map iterations exploring the information architecture for the app.
From there, I developed user stories and scenarios to help me better understand my audience and build empathy for their needs. These stories helped create user flows and start seeing the pathways users may take to achieve their goals and how each user’s journey will vary based on their needs.
Afterward, I started visualizing this experience in the form of wireframe sketches. The rough and quick sketches helped me think through layout and content structure—where could the information live on the app and what’s the hierarchy of the information?
The rough sketches were a jumping point into building a low-fidelity paper prototype that I could use for testing my assumptions with actual people. The paper prototypes manifested ideas into a tangible “object” people could interact with. The testing was incredibly insightful and allowed me to make big changes to my product’s information architecture, layout, and interactivity early in the design process, before too much time and effort was invested into it. This was a significant milestone in the process, and without it, the final product would not have been as successful.
After making revisions based on testing, I felt prepared to jump 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.
Before starting any design, I brainstormed how the app should look and feel to best represent the city of Shanghai. Shanghai is such a beautiful juxtaposition of traditional and modern, east and west, and casual and high-end that it was a challenge deciding what visual direction to lean into.
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 Final Product
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 want to experience to enjoy their life here and what Shanghai can offer them.
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.
https://vimeo.com/user20755706/review/545031378/195cab66ed
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.
Writings by Michelle Ovalle 