Brand Book
rebranding an organization
Overview
I redesigned the branding for the West Sound Wildlife Shelter for my visual communications class (HCDE 308). The rebranding included a new logo, icons, and colors, as well as mockups for a mobile website flow showcasing these changes.
Tools: Adobe Illustrator, Adobe XD
Skills: visual communication, interaction design
Role: independent designer
Time: 5 weeks, Winter 2020
Communication Goals
After doing a deep-dive of the West Sound Wildlife Shelter's website and resources, I concluded their main communication goals are:
Wildlife first
Community Involvement
Education of all ages
I kept these goals in mind as I redesigned their brand to be more simple, modern, and welcoming to new and existing site visitors and shelter supporters.
The West Sound Wildlife Shelter provides injured, orphaned, and sick wildlife a second chance at life and promotes the well-being of wildlife and their habitats through public outreach, education, and involvement.
Logo
I began by designing a logo that represents the shelter's focus on supporting Washington wildlife. I experimented with designs that represented sheltering of diverse animals and community involvement, but I ultimately landed on a simple design that depicts both wildlife and the organization's alliterative initials.
This design holds up well in black and white, in print and digital, and in different scales. My graphical letters are specific to WSWS by communicating both their name and mission.
Iconography
I also designed three icons to represent the three main actions I identified on the WSWS website:
Education
Volunteer
Donate
I chose simple and rounded shapes to create a welcoming feel. The icons and logo are tied together using a rule of two, such as two animals or a hand and a coin. The icons are focused on wildlife, and the hand shows the relationship between them and the community.
Forest Green
Grass Green
Fawn Beige
White
Black
Original Palette
Updated Palette
Colors
I wanted to maintain some of the existing colors while modernizing the whole palette. Forest Green was the organization's original main color, but it was too similar to black and darkened their whole look. I changed the main color of the brand to the tint Grass Green because it's friendlier and can be used for backgrounds. I then used Forest Green for icons and accents. I also brightened the overall palette by replacing the muddy yellow color with a browner beige and adjusted the dirty white to pure white. I believe these colors update the organization's look without completely changing it.
Typography
I chose three typefaces for the WSWS brand. Maiandra GD is primarily used for the logo but can also be used for large print headings. I chose it for its organic feel of fallen branches.
Karla and Lato are used for mobile interfaces and body text. Since they are sans serif typefaces, they are easy to read on screens. They pair well together and are legible in typographical emphasis.
Maiandra GD
Karla
Lato
Mobile Web Flow
I used my brand designs in mockups for the WSWS website on mobile devices.
The organization's current website is extremely inconsistent, outdated, and text-heavy. Just a few of the current pain points are noted on this screenshot of their volunteer page. My new branding and interaction design solves these issues through a straightforward flow to learn more about volunteer positions.
I included a microinteraction for collapsible content. This interaction is intuitive and organizes information to allow site visitors to quickly learn about different volunteer opportunities. They can then learn more detailed information if they're interested.
Not a button
Unappealing background color
No clear organization or alignment of text
Text heavy and no hierarchy
Hyperlinks don't stand out
Original website pain points
My web flow mockups
Reflection
I really enjoyed this project, and it was rewarding to create designs for an organization whose mission I am passionate about. I learned that there are so many unseen decisions that go into branding, from maintaining company ethos to designing for accessibility. I look forward to learning more about how companies create interaction designs that align with their brands. I will use my foundational knowledge of typography, color, and iconography in my future projects.
