Wags
(Personal UI/UX Project)
I designed a new management platform for animal shelters, pet adoption centers, and animal rescues. I was responsible for creating the experiences for both consumer and enterprise-facing platforms.
summary
Current platforms are out of date, difficult to navigate and to maintain. Increased time managing and updating the website takes crucial time away from the animals and potential adoptions. Wags modernizes pet adoption platforms in order to increase efficiency and facilitate more pet adoptions.
outcome
Received a positive heuristic review from googler, Lydia Jiang, to ensure designs met industry standards.
the goal
Consumer: make the process of adopting and fostering animals more efficient and inviting to facilitate more adoptions
Enterprise: make the process of managing, maintaining, and adopting animals more efficient and inviting to facilitate more adoptions
research
users
I had to find out what users visited each platform and discover pros and cons of their current platforms. This way I could proceed to design with their needs in mind.
Group 2 (Enterprise) : Owners, employees, volunteers
time is essential
ease adoption process so animals and families find the right fit
encourage individuals and adopters to get involved and donate
avoid pets being returned due to mismatched/miscalculated energy levels
Group 1 (Consumer) : Adopters
want to find a new family member that fits in
get the most, and correct information easily and quickly
make adoption and fostering forms easier to find and fill out
find a pet that matches their energy levels
market research
Findings: I found many shelter platforms across Facebook. While this allows them to have media presence, this method tends to require adopters to visit multiple platforms before they can finally adopt an animal. In addition, this current system doesn’t allow employees, and volunteers to be able to manage their inventory easily. Furthermore, these methods could become obsolete.
Design considerations
Manage inventory: Add, edit, and remove pets in the organization’s inventory
Manage adoption status: Manage where pets are in the adoption pipeline
Facilitate public adoptions: Create a public-facing page that allows prospective adopters to view real-time available pets and apply
flow
I mapped out the flow of each platform to understand how a user would navigate through the website and ensure the path would be simple and intuitive.
wireframe
Building out wireframes allowed me to explore various layouts, ensure cohesion, and maintain functionality.
Low-fidelity
brainstorm various ways a user can get to an individual profile, see all the profiles, and add or delete a profile
exploration of layout, navigation, happy path, scalability, and edge case
Mid-fidelity
determine typography, navigation buttons, shapes, sizes and hierarchy
explore color combinations
incorporate images and include proper text / language
build out all major flows
final design
Goal: Make the process of maintaining, adopting, and processing animals more efficient to facilitate more adoptions
Design: Modernize design by reducing to noise and stripping down elements to essential information. The design language is clean and simple, yet still maintains a sense of playfulness and fun through colors and typography in order to promote engagement.
takeaways
Further research and user testing will be essential before implementing design.
Consumer and enterprise facing sites differ in structure and design. I learned to find a consistent design language that could be shared between the two while also finding a distinction between their structures in order to best support the needs of each user group.