Introduction to Purf
UX Design / UI Design / Summer 2021
Purf is an app and website built to match people with the perfect pets for their needs as well as the pet’s needs. It is the second of my projects for Google’s UX design certification course and I was able to complete it in four weeks while simultaneously learning even more about everything that goes into designing a good user experience.
Tools used: Pencil and paper, Adobe XD, Adobe Photoshop, Adobe Illustrator
What is Purf?
Purf is an idea brought to life through user research, creative design skills, and a little bit of UX design. It is a website and app built to show users a better way to find and adopt local animals. Users can match with pets in their area based off the pet’s needs and the person’s qualifications.
My role
My role in this project was an all-around UX lead and researcher, I did every step along the way of building Purf from a website design down to an app. I enjoy working on every step but I am also very excited to be part of a team in my future projects.
The goal
The goal of Purf is to find a better way to find and adopt pets locally. Through my initial research and interviews, I gained insights into the pain points users had when dealing with pet adoption. This brought about the idea of matching users with pets.
Empathize and Define
To begin this project, I started with empathy and understanding the users so we can go on to define their problems with the adoption process. To do that, I conducted interviews with five people who have been through the adoption process before and recorded their biggest frustrations with it. I used this insight to create empathy maps and user personas to help myself better understand their needs.
I was then able to define their biggest problem as being frustrated with going through the adoption paperwork and process just to find out they are underqualified and denied for the adoption of the pet they already fell in love with. To solve this problem, I came up with the idea of matching user profiles to pet profiles if their qualifications meet the needs of the pet. In this dating app-like structure, you will be able to match with pets you are already qualified to adopt and message the owners or shelter directly.
Ideate
Before designing the look of the website in the ideate phase, I first conducted a competitive audit on similar websites and brands. I then decided to start from a responsive website and make my way down to the mobile size. After the initial research, I built the sitemap for the information architecture and started on my paper and digital wireframes.
Purf Sitemap
Purf paper wireframe sketches
Sketches and wireframes
After going through around 30 paper wireframe sketches, I was able to combine all of my favorite features into three main pages: Homepage, match page, and message page. I then used these to start my digital wireframe designs in Adobe XD.
Low Fidelity Digital Wireframes
I started first with the standard web size and worked my way down to mobile size. This was also an opportunity to learn a new tool that would become my favorite to work with, Adobe XD. The goal for the wireframes is to prioritize the main feature (matching people with their pets) so I put emphasis on that specific feature.
User Testing
The results of user testing from 5 people came in and their main issues had to do with visual and design flaws. There seemed to be no P0 (top priority) flaws that hindered the user flow, so I went forward with prioritizing the visual mistake: the scale.
Many participants noted how disproportionate and inconsistent the text scale was, so I set to making each heading and paragraph text the same sizes: 28 pt, 18 pt, and 14 pt. I also scaled down the photos so you can see more of the website pages without having to scroll all the way down to the bottom. These flaws were all fixed in the mockups shown below.
Mockups
-
Homepage
-
Match
-
Message
Prototype
Polished designs
Results and Outcomes
There was a lot to take away from this project. I learned how to better design for the web and work my way down to mobile, I learned a new software tool called Adobe XD, and I grew as a UX designer. Understanding the users and how to always put them first helped me to figure out a better way to design and keep the user experience as smooth and seamless as possible.
Thank you for finding interest in my project, please feel free to check out more projects of mine or send me an email!