BACKGROUND
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.
Deliverables
Heuristic Evaluation,
Comprehensive Brand Design,
User Flows Chart,
Visual Design Language,
User Interface Design
Role
Sole UX Researcher,
Sole UX Designer,
Sole Graphic Designer
Industry
Nonprofit Organization
"How might we provide an intuitive and empathetic way of financially supporting the WSWS?"
Heuristic Evaluation
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.
Image 1: Portion of old WSWS screens identified as being part of the sponsoring an animal user-flow.
Heuristic Eval. Findings & 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
Method of editing cart is too complex and does not match other e-commerce websites
Design Opportunity
Simplifying cart edit function
H8: Aesthetic and Minimalist Design
Repeated violation of this heuristic with regards to excessive text and call-to-actions
Design Opportunity
Reducing content on flow
H3: User Control and Freedom
At check out, the user is redirected to multiple pages to finish transaction
Design Opportunity
Single check-out page
H5: Error Prevention
Confirmation notifications are small and do not allow for an “undo” or back option
Design Opportunity
clear signaling of cart state
Design Planning
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
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 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.
2 versions of the logo were developed so that they can easily be switched out based on the resolution and size of the background on which they are placed.
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.
Image 5: Mock-ups of some possible physical products and merchandise that WSWS could sell in their shop.
Home/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 8: 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 9: Annotated UI for the WSWS's Cart/Check-Out Page.
Research First
The Heuristic Evaluation was an invaluable part of the design process. This User Research (UXR) tool helped identify issues and design opportunities early into the process. Taking the time to do research always pays off!
Design Isn't Linear
When designing a complex system, it is normal to explore many options early on. During this phase, it is common to discard many ideas that are identified as not being strong enough to address the design objectives. Through this project, I learned not to get too attached to any one idea or element, and instead focusing on satisfying the objectives, even if it means backtracking.
© Alfie Aguilar Vidrio 2024. All rights reserved.
