City Pups
ROLE
UI Designer
-
Sketching designs and wireframing UI
-
Creating low-fidelity prototypes to test
-
Prototyping and usability testing
DESCRIPTION
City Pups is a startup with the goal of helping people living in cities find the perfect pup to fit their needs. Their website works with adoption agencies and shelters to help users find the perfect adoptable dog that fits their needs before connecting them with the third party agency to fully adopt the dog. Through interviews and research conducted by City Pups, they discovered that city dwellers often have a hard time finding the right dog due to their unique needs and living situations. This project is based on a prompt by BitesizeUX using Google Ventures Design Sprint Framework to quickly design and test a solution for the product.
Duration
5 Days
September 2023
Try Out The Figma Prototype Here!
View The Full UX Case Study Here!
View full Day 1 files Here
Day 1 - Research
On the first day of the sprint, after reading through and organizing the research notes I then began drafting an end-to-end user experience map. With the design constraints in mind I decided the simplest way to match users with adoptable dogs is through a quiz. The user would be guided through a five page quiz that asks basic questions about lifestyle and what they are looking for in a dog. Once the quiz is completed they are given a list of dogs that best match their constraints, they can then browse through the listed dogs until they find one they like. Clicking on the listing would reveal more information along with more pictures/videos. When the user finally decides on a dog, they are given information to get into contact with the respective agency where the adoption process will continue from there. A quick sketch of the map can be seen below.
Day 2 - Sketching
On the second day of the sprint I looked to gather information on how other similar websites or possible competitors use quizzes to help the user find what they’re looking for. Some basic information that I was looking for includes: basic layout, questions, question ordering, and length of the quiz. I identified the dog information viewing page as the most critical screen in the user experience map. To begin sketching the design of the website, I did a “Crazy 8s” sketch of the dog information screen. After choosing the sketch that I liked the most, I created a solution sketch of the screen before and after the selected screen. I then sketched out wireframes of the rest of the screens that would be critical to the user experience map.
View full Day 3 files Here
Day 3 - Wireframing
After deciding on the screens I identified as most critical to the user experience and had sketched them out. I then transferred the sketches to Figma where I began wireframing the screens and polishing them up. As I had already done most of the wireframing in sketch form, I spent most of day 3 preparing to prototype by creating components and organizing the wireframes. I also spent time trying to schedule out user tests for the prototype on day 5 of the sprint.
Day 4 - Prototyping
On day 4 of the sprint I began creating a prototype of the website. As this was a five day sprint with the objective of quick turnaround of a solution, the prototype is fairly low fidelity with limited functionality on some features. I decided to focus on the quiz feature and the dog information view. Color palette and logo was taken from the project information on BitesizeUX.
View full Day 4 files Here
View full Day 5 files Here
Day 5 - Usability Testing
After finishing the prototype, I began to conduct moderated usability tests on a few people with the low fidelity prototype I made. I first quickly put together a script to guide the user and to make sure the goals for the test were met. Of the users I interviewed, they included dog owners, adoption shelter workers, and non dog owners. My goas for the test were to gather feedback on various things such as UI design, navigation, ease of use, and readability. After the usability tests I organized my notes, picking out some main points of feedback. I then made some small changes to the prototype based on this feedback and improved some other areas of it that I did not get to during day 4.