Project: Paw Finder - Mobile App
Tools: Adobe XD, Invision, Miro, Maze,
Role: UX/UI Designer
Research, User Interviews, Wireframing, Interaction + Visual
Design, User-Testing, Prototyping
The Challenge
In this project, we were assigned to build a digital product or service based on our vision, research, findings, and the UX/UI process we’ve learned throughout the program. We could create either an App, a responsive website, or a product integrated within a service!
The Subject
You need to identify a problem that perhaps you or someone you know are facing every day. Choose something you would love to work on, because you already know the topic or because you are genuinely curious about it.
Meet Milo
He is the inspiration for this project. We adopted Milo a few years ago when we found him wandering around the neighborhood. Like him, many other animals roam on the streets. Some of them got abandoned by their owner; others get lost and cannot find their way back home. What can we do to help these innocent animals?
Lean UX Canvas
Market Research
“More than 6 million animals enter animal shelters across the US every year.”
Even though dog adoptions are on the rise, the pandemic has affected the overall pet adoptions. The adoptions have slowed down, causing a significant drop in the adoption rates.
“Out of all the strays that enter US animal shelters, 620,000 dogs are returned to their owners. And 90,000 cats are reunited with their owners, as the stray animal statistics show
Animal shelter statistics from 2020 show that there are about 70 million stray animals on the US streets at any given time. Only 10% of them (a bit more than 6 million) enter the shelters. The rest lives on the street — freezing during the winter and suffering from heat exhaustion during the summer.
Competitor Research
Feature Comparison
During my research I found three competitors that might be direct competitors in the market. Thus I decided to create a Competitor Features Analysis chart to measure some features of those companies and to identify their differences, strengths, opportunities, and weaknesses.
To better visualize and understand where the product was standing against the competitors, I created a Market Positioning Map It was a precious visual form of communication to find market opportunities from a broad perspective and to envision the ideal product position.
To empathize better with the users that will be working with the website more visually and colorfully, I created a User Persona. This user represented the majority of the targeted audience. It was built based on the user research and incorporated the needs, goals, and other behavior patterns of the audience.
To have the visual representation of the user point of view experience with the current website and find design opportunities, I created a User Journey Map. This tool helped to identify critical tasks, pains, and visualize user requirements.
Value Proposition Canvas
The Problem Statement
Animal lovers need an easy way to help wander / lost animals to be taken off the streets and place them in shelters or reunite them with their families.
The feature prioritization tool that I used for this project was the Moscow Method. It provided a simple way of clarifying the priorities for the Minimum Viable Product (MVP). It assisted in the determination of the most valuable features for the website since the very beginning of the project to ensure successful outcomes.
The features within the Must Have and Should Have areas of the chart were the ones with higher impact and priority, thus were the ones that ended up in the MVP. The Could Have requirements were just “nice to have” so I decided to work on those features only if I had enough time.
MVP (Minimum Viable Product)
Once I had the users’ pain points, data, research, ideas, and futures I designed the first Minimum Viable Product.
Paw Finder will enable users to get quick access to report lost and found animals, access to animal clinics and shelters information and adoption
UI (User Interface Design)
The moodboard was great to set the visual direction and the feeling of the website. I included images and color palettes that reflected the brand style and its attributes. I performed a quick test of the moodboard sharing it with the users to get approval before moving forward.
The Style Tiles was my preferred design documentation consisting of fonts, colors, and interface elements to communicate the essence of a visual brand for the web. It also assisted me as a visual reference document during the high fidelity wire-framing stage.
Hi Fidelity
In these wireframes, I went beyond the basic structure of the low/mid-fidelity wireframe and included content, typefaces, colors, image dimensions, and branding elements. Without question, the best visual communication tool to evaluate the overall design and the UX before the development stage. Hi-fi wireframes get faster response times from users and ultimately provide a complete representation of the final website.
High Fidelity Prototype
The Hi-Fi interactive prototype was developed for desktop and displays both micro-interactions and animations featured on the site. If you’d like to try the interactive prototype you can check it out here: PAW FINDER PROTOTYPE