King County Metro rebrand

A refresh of King County Metro (KCM) through a more unified identity that not only makes infrastructure easier to recognize, but encourages a sense of pride in riders in their public transport system.

Services
Brand development
Design research
UX design + prototyping
Visual system design
Timeline
2 quarters (~20 weeks)
Project type
Individual student project at the University of Washington Division of Design
Twenty weeks of KCM
I dedicated two design classes to an exploration of King County Metro. The first was Corporate identity (10 weeks), where the prompt was to rebrand a company or institution and carry it out across a multitude of mediums. The second was Responsive Web Design (10 weeks), where for ten weeks I redesigned its website from the ground up.
Democratic design
‍ I chose a public resource for both my values and the challenge it posed. I'm a firm believer in democratic design. Thoughtful design should belong first and foremost to those resources used by all! It can do two things: show how society values its public resources and therefore whole population, and make things easier. In the rebrand and web design I considered accessibility through use of color, type size, and visibility. I also considered inclusivity in my design through use of imagery. It was a challenge but also fun to imagine the implications of a redesign as I carried it out across physical and digital platforms.
Context
‍ King County Metro is the public transport operator of its eponymous county in Washington State. The county itself is the 13th most populous in the country. Its metro system served a ridership of over half a million riders every day in 2017. This number is only rising, as King County’s most populous city, Seattle, also experienced a population growth rate of 2.5 percent last year. Public transport remains an alternative to driving, especially for those in Seattle, named 5th worst in the nation for traffic. As it stands, King County residents concede to a public transport system widely accepted to be late (in the case of buses), or limited (in the case of the Link Light Rail). However, local governments remain committed to increasing infrastructure for alternative modes of transport. For example, in 2018, nearly twice as many people used public transport to commute than driving alone, and the Light Rail is slowly but surely expanding.
The rebrand process
I started with research, starting with a competitive brand audit. I researched other transit systems, mostly in Europe and East Asia, looking at logo, language, brand across mediums, and website (it’s a wonderful rabbit hole I’d be happy to fall into again any day). From that, and through looking at the existing King County Metro identity, I created a brand positioning statement to guide my design decisions. Next was the logo. I landed on a little double entendre solution that marries a classic metro ‘M’ with a hint at King County’s name. It’s minimal (and therefore clear), and specific to the county. The logo mark provides the most basic building block to start the next step: carrying out the brand. This took the bulk of the quarter. The identity was fairly in flux, and having a logo and positioning statement was crucial in keeping me focused and consistent. Once everything was in place visually, the brand guidelines were the nice bow that tied it all together. See the full brand guidelines.
Website
Over the course of 10 weeks I redesigned the King County metro site from the ground up. This included rethinking the use cases of the site, audience, site mapping, considering accessibility, building in Sketch and prototyping in Principle. It was a satisfying challenge to carry out the rebrand I had already created in a deep and meaningful way.
From the ground up
‍ The same straightforward, minimal values of the rebrand apply to the  structure of the site. I started by rethinking around use cases, and their corresponding pages accessible in the main navigation.
Sketches to Sketch
The prototype is built in Sketch, from rough wireframes, and pencil sketches before that. Sketches and wireframes provided just the right amount of exploration before committing to a grid and messing with the nitty gritty.
Breakpoints
Each page of the site has three breakpoints with different devices in mind (mobile, tablet, and desktop). The mobile first method ensures that the design can effectively scale — rather than starting with the largest breakpoint and being unable to size down for mobile. Reducing differences in typography as much as possible is keeps the design both visually consistent and is mindful of cost of development.
Communicating with developers
The process of bringing a site to life goes beyond designers. Though I didn’t work with developers for this project, learning the rules of redlining has allowed easy communication between designers and developers in my projects since.
Next project
Hi, Tech