top of page
Phyllis Logo 1.png

SeattleWorks Branding and Website Redesign

Project type

Individual project

Tools

Sketch

Illustrator

Deliverables

Visual system

Responsive web

Duration

8 weeks

seattleworks_cover.png

OVERVIEW

Client introduction

Seattle Works is an online network for volunteer and leadership opportunities. By engaing volunteers at all ages and from all professions, Seattle Works fulfills its mission to connect volunteers, develop leaders and build communities.

Current experience

The website is one of the major channel for people to find volunteer and leadership opportunities and events. However, the current website has some issues that make it difficult to convey a clear message of what the organization serves to do. Some major issues were:

 

  • Lack of content hierarchy

  • Confusing registration flow for events

  • Outdated visual design

SOLUTION

Scope

After identifying their mission statement and goals, I rebranded their website by designing a cohesive visual system to help the organization to apply a clear and modern style across platforms.


As a demonstration of “mobile first” design principle, I especially redesigned the responsive mobile web for volunteer events searching and registration, aiming to help visitor find the opportunities to their interests and make the registration flow more smooth.

Logo design

After exploring 3 concepts, I decided to choose #1 because of the visual harmony with the heart and hands, as well as the resonating symbolism behind the elements.

seattleworks_logo01.png

Concept #1: combination of heart and hands

seattleworks_logo02.png

Concept #2: four-leaf clover with hearts

seattleworks_logo03.png

Concept #3: abstract map with Seattle highlight

Brand book

After deciding on the logo direction, I elaborated on the design and derived a color palette and typography base on the look and feel of the brand. 

seattleworks_brandbook.png

Application of visual system

seattleworks_phone01.png

Home page with intro and search

seattleworks_phone02.png

Search results page displaying events in chronological order

seattleworks_phone03.png

Event detail page

seattleworks_phone04.png

Date selection

seattleworks_phone05.png

Enrollment confirmation 

seattleworks_web01.png

Home page in desktop web

seattleworks_web02.png

About page in desktop web

Designed by Phyllis Liu in 2020. All rights reserved.

dribbble.png
linkedin (1).png
instagram (1).png
bottom of page