CITYWALK SF

Increasing safety for pedestrians in San Francisco.

MFA Thesis Project Yumo Wang

Increasing safety for pedestrians in San Francisco.

MFA Thesis Project Yumo Wang

2

MFA THESIS OVERVIEW The mfa thesis project is a two-year effort to explore and solve a real-world issue using graphic design. My project, citywalk sf, addresses pedestrian safety in San Francisco, focusing on making navigation safer for locals and visitors unfamiliar with the city.

Drawing on data about high-risk intersections and pedestrian injury locations, citywalk sf features a navigation app, environmental design assets for Market Street, and packaging for pedestrian visibility products —all aimed at reducing pedestrian risks and fostering a safer, more walkable city.

CONTENTS

CHAPTER 01/05 PROBLEM DISCOVERY/P06

CHAPTER 02/05 PROJECT DEFINITION/P28

CHAPTER 03/05 BRAND DEVELOPMENT/P38

CHAPTER 04/05 DELIVERABLES DEVELOPMENT/P70

CHAPTER 05/05 DELIVERABLES DEPLOYMENT/P96

01

6

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

PROBLEM DISCOVERY

7

NEWS SCAN

COMPETITORS AND ANALOGOUS EXAMPLES

On city streets, an average of 30 people die, and more than 500 are seriously injured

Hoboken Vision Zero

each year, the San Francisco Municipal

Hoboken, N.J., achieved the Vision Zero goal

Transportation Agency said.

of zero traffic fatalities for Hoboken, New

The lives of pedestrians in San Francisco

Jersey, for the seventh consecutive year.

are already at risk and they are facing the

Vision Zero San Francisco

risk of traffic accidents.

This is a citywide policy in San Francisco that aims to eliminate traffic fatalities by making streets safer and more livable.

Walk San Francisco Foundation This is a charitable organization, that wants nothing less than to make San Francisco the most pedestrian-friendly city in the United States.

Art in the Right of Way These projects help calm traffic, beautify Baltimore’s neighborhoods, and increase public space for pedestrians.

Vuzix Blade Smart Glasses This hands-free functionality allows pedestrians to stay informed of traffic, hazards, and directions while keeping their attention on their surroundings.

8

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

COMPETITORS AND ANALOGOUS EXAMPLES

COMPETITORS AND ANALOGOUS EXAMPLES

OTS

Suraksha

This takes a leadership role in efforts to

This is a pedestrian safety device designed

make California roadways safe for all users.

for women. Suraksha is a unique blend

California Walks This is a non-profit organization, California that works to expand and strengthen a net-

of an electronic shaver and a safety whistle that allow pedestrians to call attention in unsafe situations.

work of community organizations working

NICSY

for pedestrian safety and community

This project is to create an app that will

walkability through equity, engagement,

help everyone avoid many accidents like

education, advocacy and collaboration.

crashes with bikers by letting you know

Pathways to Right-of-Ways

C H A P T E R 0 1 /0 5

where they are.

This is a California nonprofit organization

Safe Backpacks for a Better World

with a vision to create a safe and healthy

This project has designed some backpacks

environment for pedestrians to accomplish

with road signs for children in Africa to

the journey they desire.

bring convenience and safety to their lives.

Safe Kids Worldwide

MADE YOU LOOK

This is a nonprofit organization working

This project enhances pedestrian and

to help families and communities keep kids

bicyclist visibility on the road and raises

safe from injuries. And pedestrian safety

awareness of the importance of pedestrian

is one of the injuries.

and bicyclist safety.

Back to Basics This is a social awareness campaign that focuses on changing the negative and careless habits that pedestrians in Durban have when crossing the road.

9

GAPS AND OPPORTUNITIES

TWO INSIGHTS FROM READING

Driving in San Francisco has its own set

The reasons why the life and safety of pedes-

of unique difficulties that put driving skills

trians are at risk include pedestrians not

to the test. For instance, steep hills, puzzl-

taking the crosswalk, distracted walking

ing one-way streets, and lack of parking.

or driving, and not paying close attention

Although many organizations and designers

to the road.

have made efforts to improve pedestrian

Environmental deliverables like posters,

safety, San Francisco still needs graphic

banners, and ground sign have a signifi-

design solutions. I think adding a reminder

cant effect on increasing pedestrian safety

of accident-prone areas to drivers to improve

awareness and improving behavior.

their attention would be helpful. In addition, environmental deliverables like graphic design on the ground would be benefical to ensure pedestrians are seen and prioritized. Moreover, I think both pedestrians and drivers need sensors to help them know whether there is a car or person passing by.

10

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

THREE INSIGHTS FROM WATCHING

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

COMPETITIVE ANALYSIS Basic traffic rules are often more ignored.

90% of car crashes are a result of human error or condition.

Many vehicles have auxiliary functions like Tesla’s in-car driving visualization,

Every 24 seconds a person is killed in a road

but pedestrians do not, so pedestrians need

traffic accident.

a deliverable to help them keep an eye

It’s necessary for children to take road safety classes.

on the vehicles on the road.

Brightly colored clothing and accessories can improve the visibility of pedestrians to drivers on the road.

The environmental deliverables such as ground signs and graphics can provide visual cues to road users.

Adults aged 65 years and older and children under the age of 15 have a higher risk of pedestrian death.

The Walk San Francisco website provides district-by-district traffic safety report cards, but it does not guide people on how to use these cards. Therefore, there is a need for deliverables to apply the high-injury network to road use, such as an app.

11

CONNECTIONS Ways to improve pedestrian safety include publicizing hazardous locations / San Francisco high-injury corridors, designing environmental deliverables for those locations, improving visibility for nighttime road use, and educating road users about safety.

Location is one of the main risk factors for pedestrian safety. Most American pedestrian deaths occur in urban areas, on roadway locations away from intersections (where higher speeds might occur), and at night.

Under Vision Zero the San Francisco Police Department works closely with SF Municipal Transportation Authority to help identify high-injury corridors in our City and focus our enforcement and education efforts.

Improper left turns can endanger the safety of pedestrians because the frame of the vehicles may block the driver’s view when making left turns. And traffic accidents or crashes are prone to occur at intersections.

12

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

THOUGHT LEADER Pedestrians are the most vulnerable road users.

People themselves can be the regulators of traffic.

Pavement markings should be used to denote specific traffic uses.

13

QUANTITATIVE DATA The death toll in 2022 is the highest in the past eight years.

Most traffic deaths occurred in downtown.

The Vision Zero High Injury Network represents 12% of San Francisco’s street miles.

Larger vehicles like SUVs and pickup trucks are more likely to collide with pedestrians in San Francisco due to their elevated front-end design, which increases the risk of severe injuries or fatalities.

At least three pedestrians are struck by vehicles every day in San Francisco. Sixty percent of all San Francisco traffic fatalities are pedestrians—this is about four times the national average.

14

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

WILDCARD According to Traffic Safety Facts 2020 Data from the National Highway Traffic Safety Administration Most of the pedestrians killed in traffic crashes were males.

Most of the pedestrian fatalities occurred in single-vehicle crashes.

The highest total percentage occurred from 6 to 8:59 p.m., followed by from 9 to 11:59 p.m.

The number of pedestrian fatalities was highest in California.

Poorly lit conditions, including dusk/dawn/ night and poor weather will endanger pedestrians’ safety.

15

QUESTIONS FOR CLARIFICATION

QUESTIONS THAT PROBE ASSUMPTIONS

1. What are the specific reasons for the

1. Assuming that all road users follow

high number of injuries downtown?

2. What is the definition of the pedestrian?

3. What are the characteristics of San Francisco roads?

4. Where does pedestrian common sense come from?

5. Is public transportation good in San Francisco?

6. Under what circumstances are pedestrians willing to choose alternative

traffic laws, will the lives of pedestrians be threatened?

2. Assuming that pedestrians are familiar with the streets of San Francisco, can they safely navigate the city?

3. Assuming walking is the primary mode of travel, how would traffic change?

4. Assuming vehicles have pedestrian detectors and sensors, can pedestrian safety be improved?

means of transport instead of walking?

5. Assuming drivers are driving safely, will

7. What tools are available to alert pedes-

collisions and other accidents be reduced?

trians to road and traffic conditions?

6. Assuming that pedestrians have common

8. How to design the most beneficial pedestrian safety?

9. Is it well known that pedestrians are the most vulnerable road users?

10. Are there pavement markings designed for pedestrians?

sense and a sense of self-preservation, does this help improve pedestrian safety?

7. Assuming that pedestrians pay full attention while walking on the road, can they avoid being injured?

8. Assuming that there is increased regulation in the city center, would it reduce traffic violations in the area?

9. Assuming that there are volunteers who are willing to warn and protect pedestrians on high-injury road sections, will this help improve pedestrian safety?

16

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

QUESTIONS THAT PROBE REASONS AND EVIDENCE

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

QUESTIONS ABOUT VIEWPOINTS AND PERSPECTIVES

1. Why are urban roads poorly lit?

2. Why should pedestrian safety be taken seriously?

1. How to deal with this problem from the perspective of passers-by?

3. What are the reasons and evidence for

2. How is this addressed from the perspec-

pedestrians violating traffic rules?

tive of drivers and other road users?

4. What are the reason and evidence for

3. From a graphic designer’s point of view,

drivers to violate the traffic rules?

how do you come up with the most

5. What were the reason and evidence for the injury to the pedestrian?

pedestrian-friendly solution?

4. From a public transport perspective,

6. Why are national traffic signs universal?

what are the alternative solutions?

7. Why is California the state with the most

5. What do people who believe in govern-

traffic deaths?

8. Why are some road surfaces uneven?

9. Why are some roads one-way?

10. Why are some roads impossible to turn?

ments and/or policymakers think?

6. From the perspective of traffic law enforcers, how to improve pedestrian safety?

7. Has anyone seen this problem another way?

8. From an educator’s point of view, how to deal with this problem?

17

QUESTIONS THAT PROBE IMPLICATIONS AND CONSEQUENCES

QUESTIONS ABOUT THE QUESTION 1. Is the problem clear? Is it easy to under-

1. Would addressing pedestrian safety

stand? Is the range appropriate?

in San Francisco benefit pedestrians in

2. Are the problem gaps and opportunities

California, or even in the United States?

sufficient to develop design solutions?

2. What are the impacts and consequences

3. Can the problem be broken down?

on pedestrians when they are tragically

4. Is this the same problem as road safety?

killed or injured?

5. Why is this question important?

3. What is the probability of a pedestrian safety problem occurring?

6. Can this problem cause other problems?

7. Do other residents feel the same way?

4. If San Francisco achieves Vision Zero,

8. Vehicle drivers need to pass courses

what will be the impact on the city?

and training to travel, so why don’t

5. If improving pedestrian safety is widely advocated, what will be the impact on traffic?

6. If there is a well-designed pedestrian safety manual, what effect will it have on pedestrians?

7. What would be the impact on traffic if there were an app designed for pedestrian safety?

8. What would be the impact of restricting traffic flow in the city center?

18

pedestrians need it?

9. Who is the best audience for the question?

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

INSIGHTS FROM SOCRATIC QUESTIONS

INSIGHTS FROM SOCRATIC QUESTIONS

What are the specific reasons for the high

Where does pedestrian common sense

injury in the city center?

come from?

Pedestrian crashes are more likely to occur

Pedestrians are required to make eye contact

in San Francisco’s denser downtown areas

with drivers when crossing the street. They

in inner-city neighborhoods, the Tenderloin,

also can find ways to improve their visi-

SOMA, Mission, and Downtown specifically.

bility so that drivers notice them when

Pedestrian collisions are most likely caused by driver mistakes, not pedestrian mistakes.

According to the study, in 59 percent

C H A P T E R 0 1 /0 5

driving through the city, such as wearing a safety vest or clothing in a color that reflects the light.

of pedestrian crashes in San Francisco, the

People increasingly rely on traffic lights,

drivers were found to be at fault, compared

but traffic lights are no substitute for

with 28 percent of pedestrians. More

common sense and personal protection.

specifically, the failure of drivers to give way to pedestrians at crosswalks was the leading cause of more than 42 percent of pedestrian collisions.

19

What digital tools are there to alert

Ford launched a smartphone app to make

pedestrians to road and traffic conditions?

sure pedestrians don’t get run over when

There are already a few apps on the market

crossing the road. The technology alerts

dedicated to improving pedestrian safety.

drivers that they are about to hit a pedestrian

They use cutting-edge technology to connect

as long as they have the app conveniently

mobile phones to a network of intersections,

installed on their phones.

schools, drivers, cyclists, and pedestrians and use visual and audible warnings to alert them to potentially dangerous road conditions. The cutting-edge technology includes scanning Bluetooth-enabled smartphones’ using smartphone sensors and facial recognition technology to identify drowsy drivers; automatically replying to messages; and using GPS, smartphone accelerometers, and wearable sensors.

20

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

Why are the lighting conditions of urban roads poor?

Most street lighting was designed and installed in the mid-20th century. And historic utility poles tend to go out more often than other streetlights.

Light intrusion is one reason that urban dwellers are increasingly sleep-disturbed, and it disrupts animal habits, reproduction, and migration. Properly lighting sidewalks, lighting only where needed, and toning down billboards and other clutter, will help improve pedestrian safety.

21

What would be the impact of restricting traffic flow in the city center?

Downtown San Francisco is a densely populated area and is the financial, administrative, shopping, and enter tainment center of the region. As traffic jams persist, ride-sharing incentives will become stronger.

Cars cannot be used as the primary means of transportation to and from the city center.

An alternative is needed that is convenient and more efficient.

22

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

What were the reasons and evidence for the pedestrian’s injury?

Some common causes of pedestrian accidents include Drivers or pedestrians failing to yield the right of way Speeding drivers Intoxicated drivers or pedestrians Fatigued drivers Distracted driving or distracted walking Jaywalking Pedestrians failing to look both ways before crossing Pedestrians stepping out into traffic Pedestrians wearing dark clothing Pedestrians working or playing in a roadway Impaired visibility Weather conditions Poor road design Vehicle defects

23

QUOTES FROM THE FOCUS GROUP

INSIGHTS FROM THE FOCUS GROUP

“Everyone has the potential to be a pedestrian

Everyone can be a pedestrian.

at some point, whether he has a car or not.”

“Many international students, tourists, and non-natives don’t know how to safely walk around in San Francisco.”

Non-natives seem to need more information about how to safely navigate the city.

Competitors in the field mainly improve pedestrian safety through substantive

“I have not heard of the organizations you

measures such as promoting policies and

mentioned and their work.”

improving infrastructure, and the content

“I think there is very little information provided for pedestrians, and most of the information is provided to vehicle drivers.”

“There seems to be little restraint in the behavior of pedestrians. Schools usually

of their deliverables is not well applied or promoted.

Pedestrians know little information whereas drivers and riders have more information resources and technical support.

teach children the basics of traffic like how

The code of conduct and safety training for

to read traffic lights when they are young.”

pedestrians have not been emphasized

“Some drivers stop very close to pedestrians

or valued.

to yield to pedestrians. I once had this

The awareness of pedestrians having priority

experience, which made me afraid of being

road use rights needs to be strengthened.

hit by a car when I was walking.”

24

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

ON-SITE RESEARCH On March 16, 2024, a tragic accident at San Francisco’s West Portal claimed the lives of a family of four, including two young children, when a vehicle struck a bus stop.

This devastating event highlights the urgent need for safer streets in San Francisco. WALK SF calls on residents to demand action from city leaders to prevent future tragedies.

At the site, I observed WALK SF’s efforts to create impactful change, which reinforced the importance and future potential of my project to improve pedestrian safety. The visit also inspired enhancements to my designs, which focus on eliciting an emotional response that underscores the significance of protecting lives on our streets.

25

26

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 1 /0 5

RESEARCH ON MARKET STREET It has a high number of fatalities and severe injuries.

A threshold of ≥10 severe/fatal injuries per mile.

For every person traveling in a car along Market Street, four more people are walking. However, Market Street is among the 6 percent of streets responsible for over 60 percent of pedestrian deaths and serious injuries in the city.

The corner of Market and Fifth Streets is considered the most dangerous intersection in San Francisco, according to accident data from the California Highway Patrol.

Every Market Street intersection between Third and Ninth Streets is among the 15 most dangerous crossings. Other intersections with many pedestrian collisions include 16th and Mission Streets; Masonic Avenue and Oak Street; and the Tenderloin area bounded by Golden Gate Avenue and Turk, Hyde, and Jones Streets.

27

02

28

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 2 /0 5

PROJECT DEFINITION

29

TOPIC STATEMENT

AUDIENCE STATEMENT

Topic

The primary audience is people who walk

Pedesrtrian safety in San Francisco

around in San Francisco and people who

Goal

care about pedestrian safety (11–65 years old).

To find ways to increase safety for pedes-

The secondary audience is drivers, motor-

trians in San Francisco.

cyclists, and riders in San Francisco.

Audience

Stakeholders are people who run various

Pedestrians (11–65 years old) in San Francisco

elements of transportation around the

and those concerned about pedestrian

city. San Francisco pedestrian safety advo-

safety, especially newcomers and non-

cates, organizations, and institutions are

local visitors.

also included.

DELIVERABLES

KEYWORDS

A series of environmental improvements

Moveable

designed for the top three dangerous

Active

intersections on Market Street.

Perceptive

A data-driven app that provides navigation and personalized safety services to users.

A range of apparel and accessories packaging that enhance pedestrian visibility to drivers.

30

Geometrical

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 2 /0 5

OUR BRAND With our research, we aim to improve pedestrian safety in San Francisco.

By targeting pedestrians aged 11 to 65 and those concerned about pedestrian safety, especially newcomers and non-local visitors, we hope to provide effective visual solutions. Our brand explores the importance of pedestrian safety and proposes a series of targeted deliverables. Through these efforts, we hope to reduce pedestrian accidents and create a safer pedestrian environment in the city.

31

DELIVERABLES STRATEGY Insight 1 Pedestrian crashes are more likely to occur

Mobile Apps

in San Francisco’s denser downtown areas

An application aimed at alerting pedestrians

in inner-city neighborhoods, the Tenderloin,

about crashes, traffic accidents, and high-

SOMA, Mission, and Downtown specifically.

injury areas, and informing them of what

Strategy 1

to do in these areas.

Inform people about the areas that have

Product Design

more pedestrian crashes and what to do

A portable intelligent electronic product

in these areas.

that can help pedestrians observe traffic con-

Deliverables

ditions and predict possible traffic accidents.

Information Design

Booklet

Visualize data on pedestrian crashes in the

It contains infographics on pedestrian deaths

denser, inner-city areas of San Francisco.

and injuries to enhance pedestrian safety

Signage Remind people to pay attention to certain areas and help them identify those areas.

Logos Design logos for pedestrian crashes.

awareness and the attention of other road users.

Entrepreneurialism Create a pedestrian safety company with traffic management skills and provide high-quality and professional services

Typography

as well as complete traffic control solutions

Use expressive typography to vividly express

and strategies.

pedestrian crashes.

32

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

DELIVERABLES STRATEGY CHART

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 2 /0 5

DELIVERABLES STRATEGY CHART

Insight 2 Pedestrians know little information, whereas

Type Design

drivers and riders have more information

Design a set of fonts specifically designed

resources and technical support.

for pedestrians to facilitate viewing from

Strategy 2

afar and under poor lighting conditions.

Provide information resources and technical

Front-end Web Design

support for pedestrians.

The official website of a company dedicated

Deliverables

to improving pedestrian safety.

Advertising and Marketing Materials

Retail Packaging

Promote products or services that provide

Provide information resources and technical

information resources and technical

support for pedestrians in product design

support for pedestrians as the audience.

packaging and delivery boxes.

Architectural Interiors

Newspapers

The interior decoration of an information

Provide information resources and ways

technology company that provides infor-

to obtain technical support in newspapers

mation resources and technical support

to the audience to increase authenticity

for pedestrians.

and timeliness.

Brand Identity

Service Design

Design various derivatives of the brand

Create a pedestrian safety service provider

to establish and showcase the brand’s visual

and plan and arrange activities for service

image to the public.

personnel, infrastructure, communication, and material components to improve the interaction between the service provider and its users.

33

Insight 3 The code of conduct and safety training

Mobile Apps

for pedestrians have not been emphasized

This includes online courses on pedestrian

or valued.

safety and safety knowledge testing.

Strategy 3

Product Design

Educate pedestrians on safety training and

Design clothing and accessories that can

emphasize codes of conduct.

improve pedestrian visibility.

Deliverables

Books

Advertising and Marketing Materials

The pedestrian safety manual introduces

Promote the importance of pedestrian

how to improve pedestrian visibility

safety training and a code of conduct

and what situations are not conducive

to improve pedestrian awareness.

to pedestrian walking.

Signage

Design Education

Guide the audience to participate in the

Combining theory with practice and

educational event.

providing safety training and education

Brand Logos Design logos for educational institutions that provide safety training for pedestrians to establish an image and visual system.

Type System Use a type system to demonstrate situations that are detrimental to pedestrian safety.

34

for pedestrians through stories and similar examples.

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 2 /0 5

MATERIALS MATRIX Mobile App (3 Points) The app prototype integrates six major functions to provide comprehensive pedestrian safety services. Users can customize safe routes, upload real-time conditions, and enjoy personalized protection.

It provides users with six major functions:

The reporting function integrates real-time

a map of pedestrian high-injury net-

traffic and incident information in the city

work and traffic fatalities, navigation,

and allows users to report real-time condi-

reporting, personal safety, safety ratings,

tions, and factors and people that they

and reviews.

think make pedestrians unsafe to the app

The navigation function considers the user’s time, preferences, walking speed, etc. to recommend a variety of safe routes for them. Through notifications, voice broad-

by uploading on-site photos or text. The reporter will be sent feedback to let them know their reports are processed. (approx 5 screens)

casts, vibration feedback, or screen prompts,

The safety function includes emergency

users are reminded of key safety informa-

contacts, panic buttons, shared location,

tion, such as when they are approaching

custom safety reminders, and alarms.

high-injury areas, matters needing attention

(approx 5 screens)

along the way, and reminders to stay alert and pay attention. (approx 20 screens)

35

Environmental Design (3 Points) The environmental deliverables are designed for Market Street in San Francisco or its most dangerous intersections for pedestrians to raise safety awareness of pedestrians and drivers and reduce pedestrian accidents.

The most dangerous intersections for

The key contents for them include empha-

pedestrians on Market Street in San Francisco

sizing the responsibilities of road users,

include those along Market Street inter-

drivers turning and hitting pedestrians,

section of Third and Ninth Streets, and

drivers not yielding to pedestrians, speed

especially the corner of Market and Fifth

control, drivers and pedestrians making eye

Streets (seven intersections in total).

contact, improving pedestrian visibility,

Sidewalk Stickers Remind pedestrians to be alert and cross the intersection safely. (approx 3 pages) Vehicle Decals Reinforce the importance of yielding to pedestrians, especially at crosswalks and intersections. (approx 3 pages) Posters, Banners, and Billboards (with lighting effects at night) These are promotional materials at bus stops and on the street poles near those intersections.

36

and pedestrians have to look both ways when crossing the road. (approx 9 pages)

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 2 /0 5

Packaging (2 Points) It contains bright ref lective and glowin-the-dark clothing and accessories that can improve pedestrian visibility, and help pedestrians observe traffic conditions and nearby vehicles.

The content will combine elements of San Francisco and a list of the most dangerous locations (listed below).

The top three high-injury areas for pedestrians: The Tenderloin, SOMA, and Market Street.

Shopping Bag Backpack Hoodie T-shirt Hat Low-/High-Beam Flashlight Handbell—It’s a signaling instrument for warning other road users and it’s activated by shaking.

AR Glasses—They can navigate, help pedestrians observe traffic conditions, and sense nearby vehicles.

37

03

38

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

BRAND DEVELOPMENT

39

LOGO LOOSE SKETCHES

40

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

41

42

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

LOGO TIGHT SKETCHES

43

LOGO REFINED SKETCHES

44

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

LOGO COMPUTER DRAFTS

45

46

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

47

LOGO REFINED COMPUTER DRAFTS

48

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

49

50

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

51

COMPONENTS

Logo

Signature

Logotype

52

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

BRAND MARK The brand mark consists of two distinct elements: the logo and the logotype. These components can function independently or be combined for cohesive usage.

The logotype incorporates the brand’s name along with a tagline. In scenarios in which the size constraints make the tagline difficult to read, it should be omitted to ensure clarity and maintain visual effectiveness.

53

ALTERNATIVE LOGO VERSIONS

54

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

55

CLEAR SPACE The clear space around the logo is equal to one-half the height of the logo, measured from the top to the lower edge. To create the greatest impact, allow even more space around the logo. Do not allow photos, typography, or other graphic elements to enter the clear space.

0.5 X

0.5 X

0.5 X

X

X

0.5 X

0.5 X

0.5 X 56

0.5 X

0.5 X

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

LOGO ANATOMY

57

LOGO SIZE CHART

Vertical lockup 1.25 inch and above

1 inch

0.75 inch

0.5 inch

0.25 inch Do not set the logo below 0.25 inch

58

Symbo l

Logotype

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

MINIMUM AND MAXIMUM SIZES The maximum size of the logo should be as large as possible. The minimum size should be used only when layout space is extremely limited. For all logos, the minimum size is 9 mm in print and 35 pixels onscreen, measuring the height of the logo.

When using a logo, a clear space should be reserved to ensure clarity and recognizability of the logo. In addition, when the logo is so small that the tagline is difficult to see, the tagline can be removed.

59

UNAPPROVED USES In any case, the color of the brand mark cannot be reversed and it cannot be a leftright structure.

60

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

APPROVED USES

61

COLOR PALETTE

HEX

HEX

HEX

HEX

HEX

#ff6105

#265cff

#87a3ff

#ffd070

#2ad3e7

RGB

RGB

RGB

RGB

RGB

255 97 5

38 92 255

135 163 255

255 208 112

42 221 231

CMYK

CMYK

CMYK

CMYK

CMYK

0 62 98 0

85 64 0 0

47 36 0 0

0 18 56 0

82 9 0 9

PMS

PMS

PMS

PMS

PMS

Orange 021 C

2728 C

657 C

134 C

310 C

62

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

Here is an example of using a gradient of all the colors in the color scheme, in which all the colors can be distinguished rather than blended beyond recognition.

63

PHOTOGRAPHIC STYLE The image production process for our visual system begins by converting the image into a monochrome format. Next, a 40% overlay of its black and white version is applied.

Finally, the elements to be emphasized, typically the zebra crossing, are filled with contrasting colors.

64

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

65

ILLUSTRATION/GRAPHIC STYLE

66

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

67

TYPEFACES Tisa Pro

Raleway Thin

Thin Italic

Thin

Thin Italic

ExtraLight

ExtraLight Italic

Light

Light Italic

Light

Light Italic

Regular

Regular Italic

Regular

Italic

Medium

Medium

Medium Italic

Bold

SemiBold Italic

ExtraBold

Bold

Bold Italic

Black

ExtraBold

ExtraBold Italic

Black

Black Italic

SemiBold

RRTT 68

Medium Italic Bold Italic ExtraBold Italic Black Italic

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 3 /0 5

RALEWAY Designed by Matt McInerney, Pablo Impallari, and Rodrigo Fuenzalida From Google Fonts Google Fonts offers a vast collection of open-source fonts and icons for web design, facilitating easy integration and customization. With expert guidance on typography principles and open collaboration, users can enhance their projects while ensuring accessibility and fast loading times worldwide.

TISA PRO Designed by Mitja Miklavčič From FontFont FontFont, established in 1990 by FontShop founder Erik Spiekermann and type designer Neville Brody, is located in Berlin’s Kreuzberg district. It is intended to push typographic boundaries by offering a diverse collection of contemporary and experimental typefaces crafted for designers, by designers.

69

04

70

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

DELIVERABLES DEVELOPMENT 71

72

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

73

APP TOP-LEVEL ARCHITECTURE

74

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

75

76

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

77

78

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

79

APP USER TEST For the app prototype, I tested the main features with three users. They suggested clearer map divisions and enhanced visibility of the user’s current location, with additional recommendations to incorporate animation effects to improve engagement.

Based on this feedback, I plan to refine the map interface, adjust color schemes, and improve navigation clarity by highlighting routes more effectively. These changes are intended to boost the app’s usability and visual appeal.

80

SPECIFIC SUGGESTIONS FROM USERS 1. Extend the time interval of the review area to increase the authenticity.

2. In the review f low, lighten the color of the Read-More text.

3. The green circle indicating the user’s location could have a gradient stroke effect to increase the impact.

4. In the navigation flow, use bright orange to highlight the recommended route.

5. Mark and distinguish different routes.

6. Add a pedestrian saving mode in navigation.

GRAPHIC DESIGN

BEFORE

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

AFTER Extended the time interval of the review area to increase the authenticity and lightened the color of the “Read More” text.

81

82

GRAPHIC DESIGN

BEFORE

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

AFTER Marked and distinguished various routes, used bright orange to highlight the recommended route, and added a pedestrian energy-saving mode.

83

84

GRAPHIC DESIGN

BEFORE

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

AFTER Added a gradient stroke effect to the green circle to indicate the user’s location to increase the visual impact.

85

USER COMMENTS ON POSTERS

86

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

87

POSTERS DEVELOPMENT This series of three posters has undergone multiple rounds of iterative design, with continuous refinements to the copywriting, visual impact, and imagery to achieve the final polished outcomes.

88

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

89

SERIAL POSTERS USER TEST

SPECIFIC SUGGESTIONS FROM USERS

I evaluated a series of safety posters in the

1. Make the color more attractive and put

final user testing. The posters were tested

more pictures there.

in high-traffic intersections on Market

2. Use more colors to grab attention.

Street in San Francisco, where I observed

3. Make the text red.

that many pedestrians were distracted

4. Text embossing. You could try some text

by their phones or headphones. After engaging five pedestrians, I received useful feedback, including suggestions to improve typography and color contrast for better visibility and quicker information transmission. Although the users were not design professionals, their input helped shape the final visual adjustments to make the posters more effective in grabbing attention.

90

3D effects.

5. Emphasize some words to grab the attention better.

GRAPHIC DESIGN

BEFORE

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

AFTER Enhanced the color contrast of the poster, Changed the text to make the title more catchy, and removed the distracting elements from images.

91

92

GRAPHIC DESIGN

BEFORE

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

AFTER Enhanced the color contrast of the poster, changed the text to make the title more catchy, and removed the distracting elements from images.

93

94

GRAPHIC DESIGN

BEFORE

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 4 /0 5

AFTER Enhanced the color contrast of the poster, changed the text to make the title more catchy, and removed the distracting elements from images.

95

05

96

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

DELIVERABLES DEPLOYMENT 97

98

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

99

100

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

101

102

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

103

104

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

105

106

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

107

108

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

109

110

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

111

112

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

113

114

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

115

116

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

117

118

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

119

120

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

121

122

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

123

124

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

125

126

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

127

128

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

129

130

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

131

132

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

133

134

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

135

136

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

137

138

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

139

140

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

141

142

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

143

144

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

145

146

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

147

148

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

149

150

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

151

152

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

153

154

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

CONCLUSION Looking ahead, I’m excited about the potential of the project to reduce pedestrian accidents. I believe that through the efforts of citywalk sf, San Francisco’s streets will be safer and more welcoming for everyone.

This journey has taught me the importance of research, user tests, and iterative design in solving real-world problems. It has reinforced my belief in design’s power to create positive change and improve everyday life.

155

156 156

GRAPHIC DESIGN

M FA T H E S I S P R OJ E C T

Y U M O WA N G

C I T Y WA L K S F

C H A P T E R 0 5 /0 5

ACKNOWLEDGMENTS I would like to express my deepest gratitude to my family, friends, and instructors for their unwavering support and encouragement throughout the development of this thesis.

Special thanks to my instructors for their invaluable guidance and constructive feedback, which have been instrumental in shaping my work. To my friends and classmates, your insights and feedback have been essential in refining my ideas.

Finally, I extend my heartfelt appreciation to everyone who contributed to this journey, helping me bring my vision to life.

157

COLOPHON

COLOPHON

Title of Book

Design Tools

CITYWALK SF

Adobe Illustrator, Adobe InDesign,

Contact

Adobe Photoshop, Figma, Final Cut Pro

citywalksf.org

Typography

yumowang.design

Raleway, Tisa Pro

wangyumo998818@gmail.com

Photography

School

google.com

Academy of Art University

unsplash.com

Graduate School of Design

stock.adobe.com

Degree

Copyright © 2024 Yumo Wang

Master of Fine Arts

All rights reserved. No part of this publica-

Designer Yumo Wang

tion may be reproduced, stored in a retrieval system, or transmitted in any form or by any means—electronic, mechanical, photo-

ID Number

copying, recording, or otherwise—without

05029009

prior written permission from the copy-

Course Thesis Refinement Instructors Jeremy Stout Laurie Makela John Nettleton Date 11/30/2024

158

right holder.

citywalksf.org