Nonprofits, Owl Facts, & a Brand Redesign
A look into my UX approach to redesign the West Sound Wildlife Shelter’s mobile website.
The West Sound Wildlife Shelter provides animal rehabilitation and education to the greater Seattle community.
By undergoing a brand redesign, this non-profit organization may better portray their brand ethos and expand its philanthropic reach!
I set out to redesign the brand and mobile flow of West Sound Wildlife Shelter (WSWS)– a non-profit organization based out of Seattle, Washington. Before starting my design, a team and I uncovered the current-state of the online presence of WSWS in a brand audit.
Their mission statement outlines the shelter’s goals of:
“Providing 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.”
Exposing Pain Points
Using the shelter’s mission statement, we navigated their website and brainstormed current pain points a user may experience. Documentation of the current state is represented below:
Noticing Successful Design
Though the website did contain inconsistencies, it is worth it to note what is working about their current design. The successful documentation is below:
Outlining Design Goals
With the brand audit in mind, we were able to come up with goals for our individual redesigns. Each team member aimed to:
Designing Brand Elements
With my team by my side, we each started our own path of redesigning the WSWS brand and mobile flow.
Logo
My initial logo ideas were attempting to create a connection to wildlife and humans. In addition, I tried resembling the shelter’s goals of education and rehabilitation.
My final WSWS logo demonstrates the connection between humans and the wildlife around them. With education as a core value, this logo entices viewers to learn about the animal prints that are included within the shape of Washington. This logo evokes a notion of discovery: one that may motivate users to learn about local wildlife.
Icons
I used the Noun Project for the inspiration for these icons so that they are understandable by a wide range of users. My final icons demonstrate key aspects of the WSWS mobile flow: education, events, and wildlife.
Utilizing the logo’s organic container, the new icons create continuance to convey their meaning and engage the viewer. This container, additionally, mimics the Washington state outline in a more abstract way as to conform to the logo and craft a cohesive visual system. Each graphic within the container is a simple representation of what each of the icons represents to promote informed interactions for the user.
Color Palette
The colors (shown below) are minimal, often leaning toward colors found in nature: green and brown. The brown is a right complement of the green, offering a warm tone to the solid, prominent green color. Simplicity, in this case, strengthens West Sound Wildlife Shelter’s mission and provides an organic scheme for users to interact with.
Determining Mobile Flow
With the design elements in order, I determined the user task I wanted to represent in my mobile flow design: find fun facts about owls.
Q: Why did I choose this particular task?
A: I wanted the shelter’s education tenet to shine through without painstaking amounts of information presented on the page.
Below is the current website’s user flow to find owl facts:
Wireframes
With the user flow outlined, I crafted wireframes to aid the high-fidelity design of my mobile screens.
High-Fidelity Prototype
Using my wireframe and feedback from my peers I created the high-fidelity screens for my WSWS mobile flow.
These high fidelity mock-ups communicate simplicity by employing figure-ground relationships with the type set on a variety of images. Additionally, similarity is used to indicate buttons and proximity is used to group related information. This redesign diminishes the previous issue of information overload by introducing material in a categorized, engaging way. Additionally, education is communicated through the interactive components. Finally, this redesign uses organic, rounded shapes to convey the shelter’s mission of promoting people to connect with nature through their services.
Thinking with Traditional Design
This project facilitated new challenges for me that helped me find who I am as a designer. I found that I am really passionate about visual communication even if it takes commitment and focus. One main reason I found myself gravitated to human-centered design was the problem-solving aspect and I could see this come through in my work. I was able to make a once out-dated site compliant with modern mobile design techniques.
Though, this project fueled my passion as a designer, I also found myself in a vulnerable place. I found utility in vulnerability and discovered that I could push myself beyond what I was comfortable with previously. I think this project made me a stronger designer and I am excited to employ my new visual communication skills in future UX roles.
Not to mention that I am now completely infatuated with all things typeface :) Google Fonts is my BFF.
