West Sound Wildlife Shelter (WSWS) is a non-profit animal shelter based in Bainbridge Island (Kitsap County). The rescue and rehabilitation of small mammals and birds is their primary focus. WSWS also provides education programs for local schools, groups, and community events in an effort to promote the well-being of animals. They treat approximately 1500 patients/animals every year.
The goal of this project was to identify problematic design elements within the organization's brand and public website. This was a fast-pace process that focused on redesigning the WSWS's brand and executing a key user-flow, how to sponsor an animal ambassador, as an example of how to deploy the new brand.
West Sound Wildlife Shelter Brand Design
Creating a comprehensive brand design and mobile UI prototype for a nonprofit.
Background
One donation flow had to prove an entire brand redesign could work.
Deliverables
Heuristic Evaluation,
Comprehensive Brand Design,
User Flows Chart,
Visual Design Language,
User Interface Design
Comprehensive Brand Design,
User Flows Chart,
Visual Design Language,
User Interface Design
Role
Sole UX Researcher,
Sole UX Designer,
Sole Graphic Designer
Sole UX Designer,
Sole Graphic Designer
Timeline
3 Weeks
Industry
Nonprofit Organization
"How might we provide an intuitive and empathetic way of financially supporting the WSWS?"
Heuristics
Nielsen's heuristics found four issues in the sponsorship flow.
Heuristic Evaluation is a usability inspection method that involves evaluating a user interface (UI) against a set of heuristics (Nielsen’s Usability Heuristics were used here) to identify usability problems and opportunities for improvement.
At the end of this process, I had a strong understanding of the issues present with the WSWS’s current user-flow and allowed me to begin designing solutions to improve the user experience.
At the end of this process, I had a strong understanding of the issues present with the WSWS’s current user-flow and allowed me to begin designing solutions to improve the user experience.
Image 1: Portion of old WSWS screens identified as being part of the sponsoring an animal user-flow.
Heuristic findings and design opportunities
I also created simplified graphical representations of the existing task flow to familiarize myself with the content present on the existing pages. These were paired with all the Heuristic issues identified for a more holistic UX research and design artifact.
Image 2: Simplified UI graphics paired with the Heuristic Evaluation issues identified.
The following are the most pressing Heuristic violations that I identified during my evaluation. Each violation offers an opportunity for a design solution, and when addressed, will increase the flow's usability.
H4
Consistency and standards. The method for editing the cart is too complex and does not match other e-commerce websites.
Design Opportunity
Simplify the cart edit function
H8
Aesthetic and minimalist design. Excessive text and calls-to-action violate this heuristic repeatedly across the flow.
Design Opportunity
Reduce content in the flow
H3
User control and freedom. Check-out redirects the user across multiple pages to finish the transaction.
Design Opportunity
Move check-out onto a single page
H5
Error prevention. Confirmation notifications are small and offer no undo or back option.
Design Opportunity
Signal cart state clearly
Design Planning
The system had to exist before a single screen could be designed.
During this stage of the User Experience (UX) process, I focused on developing assets and artifacts that would help streamline the development of prototypes and final deliverables to clients. This was an iterative process in which critiques with other UX professionals drove innovation.
Optimized user flow
Creating an optimal User Flow for the check-out/sponsor an ambassador flow was crucial for demonstrating that the new design system could be leveraged to address the design opportunities discovered during the heuristic evaluation.
Image 3: Simplified and optimized User Flow Diagram for sponsoring an ambassador.
New design system
The finished system has four parts: a custom logo, a typeface, a set of system icons, and a monochromatic colour family.
Image 4: Finalized Design System for West Sound Wildlife Shelter, with Logo, Color, Typography, and UI Assets.
Custom logo
The logo's icons were crafted from scratch using visual design (Gestalt) principles of order, unity, balance, and similarity. Using techniques like common strokes, spacing, and abstraction, I executed 4 icons that represent the range of animals that the WSWS cares for. Together, they present the brand as friendly, nurturing, and intrinsically linked with nature.
Typography
Building on the design language of the logo assets, the selected font, Arial Rounded, is used to cohesively communicate the brand's friendly and empathic mission statement.
System icons
The icons used throughout the system support the established visual language, sharing qualities like roundness, stroke width, and abstraction.
Color family
The color family is monochromatic to establish high cohesion between all assets. The simple color scheme lends itself to being applied to various settings throughout the system, like buttons and CTA's.
Merchandise
The shelter already sells branded merchandise, so the system had to work off-screen.
The WSWS currently sells merchandise featuring its logo, so I wanted to make sure that the new logo and design language could be executed to physical products. The following mock-ups showcase the strength of the system through their application beyond the digital space.
Image 5: Mock-ups of some possible physical products and merchandise that WSWS could sell in their shop.
Design Solution
Five screens apply the system and answer the violations the evaluation found.
One of the main objectives of the project was to redesign a User Flow, with User Interfaces (UIs), for the WSWS using the new design system. The following UIs are not meant to be all-encompassing for the whole of WSWS's website, but rather an example of how to apply the system while also addressing the issues identified during the Heuristic Evaluation.
Home and landing page
The home page was carefully designed to ensure that the user would be able to easily find important information about the WSWS while also being an optimal starting point for the various flows that the WSWS would need. The UI is organized into "Cards" that each contain a unique topic or purpose.
Image 6: Annotated UI for the WSWS's website Home/Landing page.
Site menu
The site's menu is purposefully kept simple and clean to minimize confusion when navigating across the website. Content is organized into collapsable menus to provide hierarchy and grouping of similar pages.
Image 7: Annotated UI for the WSWS's Menu pop-up dialog.
Ambassador list
The list of ambassadors continues using the card design as part of UI visual language. In doing so, the page communicates to the user the page's key information: who the WSWS ambassadors are. The Ocean Blue color is used to clearly signal to the user that it is an active element that can be selected.
Image 8: Annotated UI for the WSWS's Ambassador list.
Ambassador profile
Each ambassador the WSWS allows to be sponsored requires a profile to provide an empathic account of their story. This page is vital as it pulls the user in and persuades them to make a financial contribution. To streamline the process, pre-populated contribution amounts are placed in a convenient location.
Image 9: Annotated UI for the WSWS's Ambassador Profile.
Cart and check out
Perhaps the most important part of the User Flow, the Cart/Check-out page is the final step in the process to sponsor an ambassador. As such, the page is kept simple with only 2 main CTA's that each encourage the user to contribute.
Image 10: Annotated UI for the WSWS's Cart/Check-Out page.
Next Steps
The system covers one flow; the rest of the site is still open.
This project is a case study in Brand Design with a focus on applying a comprehensive UX Design System to an interactive user experience (UX). As such, only a small fraction of the WSWS's website was translated using the new UX Design System. A clear next step would be to continue applying the Design System across the entire website and product lineup. Further next steps would be to investigate the usability of the new System to identify more opportunities for improvement.
Reflection
Every design decision traces back to a violation the evaluation named.
This was the first logo I drew from scratch. The four icons came out of Gestalt principles rather than instinct, which is what let me defend them in critique instead of arguing taste. Two things stayed with me afterward.
Heuristic evaluation gave me something to design against
The evaluation turned a broad brief into four named problems. Each one became a design opportunity, and each opportunity is answered by a specific screen: the single check-out page exists because H3 flagged the redirect chain. Working from the evaluation meant every layout decision had a violation behind it rather than a preference.
Expert review is not user validation
A heuristic evaluation shows where a design breaks a known principle. It does not show whether a donor can finish a sponsorship. I found those four violations myself and designed against them, so the next step is usability testing with real donors to confirm the flow holds up under someone who has never seen it.
Learn about a much larger component and content system, used by 120+ authors
© Alfie Aguilar Vidrio 2024. All rights reserved.
