Helping city dwellers find the perfect dog to adopt
MY ROLE:
Lead Designer (UX),
Solo project/Design Challenge
CATEGORY:
Prototyping
Web Design (UX / UI)
Design Thinking
Creative Strategy
PROJECT OVERVIEW:
CityPups, a startup dedicated to assisting urban residents in finding their ideal canine companion, has enlisted my expertise to spearhead a design sprint aimed at rapidly testing potential solutions. The objective is to develop a dog adoption aggregator directing users to adoption sources seamlessly.
CONSTRAINTS: Desktop Device (Website)
GOAL: Helping users find the right dog to adopt
TIMELINE: 5-Day Design Sprint
COMPANY GOALS:
DESIGN SPRINT TIMELINE:
*Image sourced from The Sprint Book
USER INSIGHTS:
User Pain-Points
USER PERSONA:
DAY.01
UNDERSTAND & MAP
User Flow (*meant to write CityPups🫣)
Flow Description
It starts with the user
Landing page for CityPups
Goes to search bar
Enters what they’re looking for
Applies the filter
Results Page
Maybe “Hearts” or “Bookmarks” a few dogs
Goes to an individual page
Maybe selects FAQs to learn more
Selects Inquire about dog
Fill out form to schedule a time to meet
DAY.02
SKETCH & IDEATE
Research & inspiration
I did a quick Google search to see what competitors were doing right and what they were missing. This provided information as to what we could do or apply to our site to make it stand out against the competition. I looked at Petfinder, Adoptapet, and Petsmart Charities as references for adopting a rescue animal. I also looked at other websites, such as American Kennel Club and Apartments.com, for additional ideas on search filters and sorting references, as well as iconography examples.
*Apartments.com
Outlier brand, but I liked the design of the website and the way the apartments were structured within the photo galleries.
*After the a few rounds of iterations option #4 was the strongest idea.
Crazy 8’s
Did a crazy eight exercise and solution #4 seemed to be the best out of all of them
A potential runner-up was option #8, but it seemed too similar to what other sites are currently doing. Plus, I liked that solution #4 had the search filters at the very top of the page. I think this could be helpful to reduce users getting distracted by images of cute dogs as they scroll before knowing if they’re even the right dog for them. Instead, you get to see all the options after applying the details of what you want/need
DAY.03
DECIDE & STORYBOARD
*(Bottom right) rough sketches of iconography for quick read of important information about the potential pet.
Option #4
On Wednesday of the Design Sprint, I built upon option #4 by sketching the 1st, 3rd, and 4th screens within the UI flow. What these screens represent were:
Landing page
Search criteria selection - initial [concept] screen
Results with filters applied
“About Me” page
Storyboard
Illustrations by Misty Marquis (ME*)
DAY.04
DESIGN & PROTOTYPE
Wireflow
*Wireflow based on the User Map identified within day 1 with a few modifications
Prototypes below
(*Click the images below to see each user flow)
Before
Initial wireflow concept
After
What was built & tested with users
DAY.05
USABILITY TESTS
An area that may need reviewing as a later feature is the “advanced filter”
ONE User stated:
I wouldn’t automatically know that the filter icon would activate the ‘advanced search.’
User Testing Insights
RESULTS
KEY TAKEAWAYS
The design sprint was a lot easier than expected, and here’s why:
I found time-boxing work gave me less time to overthink
The Crazy 8’s approach to ideating definitely helps speed up the design process
*Pro-Tip: Not only is it important to schedule participants during the 1st day of the sprint, but also schedule 3 extra people for the test on Friday. People can be flaky, and sometimes unexpected things may occur that will impact a person’s availability. So always have a back-up
Overall, I really liked the short burst of the design sprint ideation process. The very best part about it was encouraging critical thinking, rather than overthinking. Going forward, I’m definitely going to adopt the GV Design Sprint approach to ideation for all my design projects.
NEXT STEPS
Include more interactivity to the navigation/carousel slides and add more pages
Create a Design System & Brand Guide for the Startup