Finding Your Perfect Dog
Overview
The goal of this project is to help users who lives in high populated cities find the perfect dog to adopt. CityPups combines all the adoptable dog postings onto one website, which reduces the time invested in browsing multiple websites. This project was a design sprint and was completed in a 5 day time frame.
Role
UX/UI Designer
Usability Tester
Tools
Uizard
Figma
Figuring out The Perfect Design Flow
The first day of the sprint consist of reviewing and understanding the research that had been completed. The goal is to sketch out a user flow to better understand the users.
Key Findings
users prefer seeing photos of the dogs
having detailed descriptions of the dogs matter (personality/demeanor)
important to know activity level of dog
living space required is important to city living users as majority live in small apartments
Based on the user interviews I drafted the route the user would take when interacted with the website.
Sketching the Best Solutions
Before I began sketching I looked at the current adopt a pet websites for inspiration. Then, by using the technique called Crazy 8’s method which is sketching 8 different solutions in under 8 minutes. The strategy behind the method is to not think too much about what your sketching, and creates a mass production of solutions. This method was great to use during a design sprint, as I find that working under time constraints gives you added pressure.
From there I assumed the flow that would be most ideal by referring back to the user interviews.
The chosen frames
The main 3 screens required for MVP
1
Homepage
2
Search Results
3
Pupper Spotlight
3
Crazy 8 Sketches Method
The Vision
Moving forward I needed to delve deeper into thinking what the most critical screens I would need to build an MVP (minimally viable product).
Many users voiced that they were wanting a detailed description of the dog that included how many space they would need or the energy level of the dog, with this in mind I wanted to include a in depth filter section in the website. Therefore, the users can apply the filter and search for exactly what they are wanting to reduce the amount of time going through different postings.
Key Takeaways
Detailed background on dog specifically focused for apartment living
In depth filter to have users view the best fitting dog for them
Good quality photos and a video section for users to see a bit of personality of the dog
Leveraging AI Tools
With the new technology that is out now I decided to use AI to my advantage. Having typed in what I was looking for Uizard gave me samples of web page designs. From there I had to change the layout and added features to cater towards my project.
The biggest feature is the search filter I cater the options to suit the lifestyle of city living users. Another key feature was having a mid level description displayed on the browsing page, since it gives users enough to either move onto another pup or to get a more detailed description.
Leveraging AI Tools
With the new technology that is out now I decided to use AI to my advantage. Having typed in what I was looking for Uizard gave me samples of web page designs. From there I had to change the layout and added features to cater towards my project.
The biggest feature is the search filter I cater the options to suit the lifestyle of city living users. Another key feature was having a mid level description displayed on the browsing page, since it gives users enough to either move onto another pup or to get a more detailed description.
Detailed Search Filter
Catered towards city living users as they are the ideal users
Homepage
Search Results
1
2
Pupper Spotlight
3
Usability Testing
For this project I had 5 users complete the test to locate any usability issues. There were no major issue with completing the task of locating the detailed description of the “ideal” dog. Over half of the users stated they really liked the big images of the dogs, as they find that is the first impression that sticks with them. Another feature I wanted to test was the amount of information displayed on the browsing page. After the usability test I have confirmed with the users that the amount provided was enough.
Problem
The one thing users expressed an issue with was the eligibility of the font on the browsing page. Which was an easy fix of increasing the font size. You can see the big difference just increasing the size of the font and keeping all typography on the left, it looks more cohesive.
Before
After
Final Thoughts
I really enjoyed completing this design sprint, and I am proud of my achievement of this prototype in just 5 days! I believe that utilizing the AI tools out there was a big help to the prototyping day.
If I had more time then I would build a design system that would elevate the web page to appeal more to the younger demographic. As I believe aesthetics of a page entices users to keep coming back. Also, if I would build this design sprint into a full on project then I would explore different user routes and add more users flows.
Thank you for your time and for checking out my case study!
If you would like please take a look at my interactive prototype