RACHAEL HYLAND
There are countless websites and apps that promise to find you the perfect dog to adopt, yet very few of them cater to the specific needs of city dwellers. Living in a city entails very particular needs and wants that only a product customized to city dwelling users can fulfill. So, in walks CityPups: a website designed to make the city dwelling dog lover's heart sing.
DURATION
1 week
(Nov 2020)
PROJECT INFO
Modified GV Design Sprint via BiteSize UX
Team of 1
TOOLS USED
Sketch
Marvel
MY ROLE
UX Writing, UX Research, Sketching, Usability Testing, Wireframing, Hi-Fi Designs and Prototyping
A dog's life
The Challenge
Existing websites for those interested in dog adoption aren't optimized for city-dwelling users.
Urbanites' unique concerns:
-
Living accommodations: small apartments, breed and weight restrictions in said apartments, living on an upper story, lack of access to green space
-
Commuting and working time: What's the dog's temperament (independent, neurotic, energetic, etc.)?
The Solution
As part of this BiteSize UX modified design sprint, the solution was already provided to me: creating a website that caters specifically to the needs of city-dwelling dog adoptees. However, I was free to decide how exactly I would go about doing that.
My goals for this project were the following:
-
Empower urbanites to search for and find a dog that will be comfortable in an urban environment
-
My product will increase adoption rates and make for happier owners and stabler homes for thriving pets
Some of my modifications to BiteSize UX's website solution include the following:
-
Increase the amount of search radius options as transportation can be difficult in cities
-
Build out an advanced search feature so that more knowledgeable users can search faster and easier
-
Create a "quick look" view that contains all pertinent information in an easy-to-read format so that decision-making is painless and efficient
Project
Timeline
Day 01
Map
Day 02
Sketch
Day 03
Decide
Day 04
Prototype
Day 05
Test
Research Synthesis
User Flow Map
Lightning Demos
Crazy 8s Exercise
Storyboard
Mid-Fi Wireframes
Prototype
Usability Testing
Methods Used
Day 1: Map
Research Synthesis
User Flow Map
Day 1: Dude, what's the problem?
The following are insights I synthesized via preliminary research provided as part of the BiteSize UX project. I made a list of some of the most important insights, which would help me later as I discerned the nature of the problem space and decided what features were essential for my MVP.
Research Takeaways
The more media, the more magical.
Common complaints amongst users interviewed by BiteSize UX are that a) there typically aren't enough pictures in a dog's profile, b) the pictures that are present are not high quality and c) there are no videos of the dog in action. Deciding to adopt a dog is a huge decision, so users want to feel sure about the dog in question before taking the leap.
Transparency is where it's at.
Another concern for city dwellers was that, as most live in apartments that usually have breed and weight restrictions, having both of these criteria front and center in the search result cards and quick look view is essential. Being able to conduct an advanced search for both of these criteria wouldn't hurt either.
Energizer bunnies or couch potatoes?
In addition, city dwellers may spend a significant amount of their day in the office and/or commuting, which means the dog may be left alone for hours at a time. With this in mind, users need to know right away if a dog requires a lot of exercise and/or has a neurotic temperament, as it may not be a good fit for an urban environment that can be loud, fast and overwhelming.
Tell me everything.
In general, the thoroughness of information, transparency and standardization of information available to users is spotty with dog adoption websites. However, detailed, consistent info is very important and should be available to users, whether in the quick view or on the details page. Other pertinent info dog adoptees want to know includes: background, social skills, age, training, etc.
Big cities = big traffic.
Another issue city dwelling users had while using standard dog adoption websites was that the search radiuses could often be quite large: sometimes 25 miles was the minimum. For someone in a large city who doesn't have a personal vehicle and may have difficulty traveling 25 miles via public transportation, the lack of available search radius options can prove to be a daunting obstacle. Expanding these options would be essential to a successful product.
.png)
User Flow
With these insights in mind, I set about creating a map of a potential user's most important flow to get an idea of the steps that would be involved in their adoption process, which prepared me for creating wireframes and higher-fi screens later on. Mapping out each step in the process of a potential adoptee also helped me visualize how long the process would be and allowed me to determine whether or not certain steps could be removed for the MVP. To view this map in more detail, click here.
Methods Used
Day 2: Sketch
Lightning Demos
Crazy 8s
Storyboard
Day 2: Where I doodle chaotically and compare things
At this stage of the process, I explored how other successful products, both direct and indirect competitors, had found solutions to similar problems so that I could take inspiration from their solutions and use it in my designs later. Rather than attempting to reinvent the wheel, I knew it'd be wiser and faster to see how others did it better so that I could emulate their innovative solutions in my own product.
Inspiration from Airbnb:
-
Visuals of their search bar + search button (with magnifying glass)
Inspiration from Petfinder:
-
Cohesive visuals with a clean look that uses limited colors
Inspiration from Petango:
-
Advanced search feature and criteria therein
-
Dislike: the advanced search feature redirected to a different page instead of acting as a pop up on the landing page
Inspiration from GetYourPet.com:
-
Quick look cards with info and pics
-
Dislike: pics are low quality and sized incorrectly, not all important info is present
Clothing Websites "Quick Look" Inspiration:
-
Pluses of a quick look for a dog adoption website: users can view one dog at a time in depth, get all of the important information up front, decision-making process is easier and more efficient
-
Best quick look: Nordstrom. Features: option to exit, scrolling to previous and next items, blurs background, provides all info in a clear format, high quality photos, "Full Detail" page navigation
Once I'd gotten some inspiration from looking at how other products had solved similar issues to the ones I was facing, I went straight into ideating potential design ideas via Crazy 8s. I've found that Crazy 8s is an excellent exercise for generating a wide variety of creative solutions, especially when you're facing a time crunch.
Sketching - Crazy 8s Exercise Highlights:
-
Quick look concept
-
Ability to perform many functions within pop up
-
Information should be clear, easy to read and accessible
In my Crazy 8s exercise, I returned again and again to the idea of the "Quick Look" view as my most compelling and all-encompassing solution to date to solve users' issues regarding not being able to find the information they're looking for quickly and easily and feeling overwhelmed by the number of dogs available for adoption. So, I felt confident that I wanted to work this into my solution sketches, which was an essential exercise that prepared me for the screens I would create in my wireframing phase the next day.
Sketching - Solution Sketches Highlights:
-
Landing page. Important features: radius selector with more options, advanced search with relevant criteria
-
Browsing/search results page. Important feature: cards that display each dog's photo, name, age, breed and weight
-
Quick look view (pop up). Important features: photos and video, all relevant information, etc.
Landing Page
Search Results Page
Quick Look View
Methods Used
Day 3: Decide
Mid-Fi Wireframing
Day 3: That part when I decide stuff and tell a riveting story
Because this was a highly-compressed timeline, I accelerated the process of wireframing slightly so that I could produce more realistic-looking screens for my prototype later. I reasoned that more valuable feedback would come from a user experience that mimicked using my product in real life, so I created higher-fidelity wireframes to use as part of my prototype.
Wireframing in Sketch:
-
Inspiration from lightning demos exercise
-
Landing page was the most time-consuming due to the sheer variety of search criteria in the advanced search feature
-
Quick look view took up the majority of the remainder of my time. I made sure that the pictures were large and high quality, the information was clear and the format was visually pleasing
-
No focus on color scheme at this point
-
Showcased photos of my own dogs, built out the framework of the design
Methods Used
Day 4: Prototype
Prototyping in Marvel
Day 4: When I create a thing that moves (ooo aah)
At this point, I continued to iterate on my earlier wireframes so that I would have more realistic-looking screens for my prototype.
Refining the design:
-
Monochromatic color palette of shades of green and grey to complement photos and not take too much attention away from them
-
Created prototype in Marvel
Methods Used
Day 5: Test
Usability Testing
Day 5: That part when I see what you, dear users, really think
At this stage in the process, I wanted to test out my designs in order to get user feedback and improve the final design so that it would truly serve users. I conducted moderated usability tests with five different users and iterated based on their feedback.
Based on the feedback I got from the users I tested with (pictured above), I iterated further on my designs to make them more intuitive and aesthetically pleasing.
Ah, a sweet fini
Although I was a bit intimidated by the concept of a sprint at first, once I dove into the process, I found I really enjoyed it. It was amazing to have structure and a clear goal and set of tasks allocated for each day and to move fairly rapidly through the process. I found I enjoyed the sprint process much more than the slower pace of most projects or the “Waterfall method” because it encourages you to think on your feet and fills you with a sense of urgency, which really helps with motivation. I would certainly do the sprint process again for another project, as I found it very useful and productive in terms of generating quality ideas quickly.
Possible next steps for future iterations could include adding more search criteria to the advanced search and/or just making it generally more sophisticated, building out the browsing/search results screen more fully, potentially adding a “start adoption process” button on the quick look screen and building out the “loved pets” section (pets you “love” and want to save for later).