This is my capstone project for the undergrad design program at the University of Washington. The entire project was completed during the COVID-19 quarantine with remote instruction. It is an academic exploration with no political inclination.
In 2019, a series of protests took place in Hong Kong against the proposed extradition bill. Many people who are exposed to both Chinese and Western media struggle to position themselves in this event due to the contradicting and fragmented information they received.
As a response, I designed Facets to help those who are confused after receiving information from both Chinese and Western media better understand the protests from various perspectives. In addition, I intend to encourage
my audience to always critically examine the information they received.
Duration: Feb - Mar 2019 6 Weeks Team: Sara Tieu | Peter Mach Contribution: Research, Visual System, Map Feature/flows
Mobile App Design
How might we create a digital experience to tell a lucid and comprehensive story of the 2019 Hong Kong protests?
Facets takes the format of scrolling and storytelling. The audience will go through 6 section of information as they scroll: Introduction, Timeline, Scale of Protests, Protest Motivations, About the Protesters, and End Notes.
SECTION I: INTRODUCTION
This section presents a brief overview of the protests with small chunks of text paired with images.
SECTION II: TIMELINE
The timeline section presents short descriptions of all protest key events. A subsection will expand when each event is clicked, containing information on this event from various perspectives. This section encourages the audience to seek and critically examine the information from different perspectives.
SECTION III-V: STATISTICAL INFO
Three smaller sections with statistical information on the scale of the protests, protest motivations, and demographic profile of the protesters.
The conclusion section with information about the designer and citation links.
Round I: Epistolary Interview (17)
Round II: Remote Interview (7)
INSIGHT I: CONFUSION
People who have received information about the protests from both Chinese and western media struggle to position themselves in this even due to the contradicting and fragmented information they received.
Affinity notes used to analyze insights from interviews.
THE BIG PICTURE
The news articles that my audience most commonly read are usually about one specific date of protests. This makes it hard for them to see a bigger picture of what happened in this event that lasted more than 6 months.
A collection of news articles and the timeline analysis.
INSIGHT III: PERSPECTIVES
Instead of fully buying in one specific voice or article they see, my audience wants to see multiple perspectives that tell different sides of the story in order to understand the protests and find their own stance.
Notes for academic papers analyzing different ideology’s influence on news perspectives.
Based on research, I identified my target audience & design opportunity.
Audience: People who have received information about the protests from both Chinese and western media struggle to position themselves in this event.
Design opportunities: How might we create a digital experience to tell a lucid and comprehensive story of the 2019 HK protests?
With the design opportunity in mind, I started ideation. In the first round of ideation, I experimented with different forms of design responses such as a book, an exhibition, and a website. In the end, I decided to move forward with the website idea.
In the second round of ideation, I ideated different structures for the website. I decided to move forward with the scrolling & storying telling structure.
Build & Refine
After narrowing down the design direction from the ideation phase, I started to flesh out the website details. I finalized the site’s visual identity and information structure after rounds of iterations.
Facets's visual system has two main themes.
1. Use the “outlined doubling” style to echo with the name “Facets”.
2.Use color, typefaces, and layouts to create a clean, calming, and classic vibe to encourage an open and peaceful mindset. The goal is also to reduce the visual burden when the audience is digesting information.
After setting the visual guideline, I created prototypes and iterated the design based on insights from user testing.
Where to improve