Project
Overview

Seattle Public
Library App

CONTEXT

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.


PROBLEM


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.


OUTCOME

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?

Final
Design

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.
Section VI:
END NOTES

The conclusion section with information about the designer and citation links.
Design
Research

Design Research

PRIMARY RESEARCH

Round I: Epistolary Interview (17)
Round II: Remote Interview (7)

SECONDARY RESEARCH

News collection
Academic paper


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.

INSIGHT II:
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.

Define &
Ideate

DEFINE

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?


IDEATION I

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.
IDEATION II

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

Build & Refine

OVERVIEW

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.

VISUAL GUIDELINE

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. 
ITERATE

After setting the visual guideline, I created prototypes and iterated the design based on insights from user testing.

Where to improve

Product
Video