UX/UI Designer

The Basics
Project Overview
I recently got the opportunity to compete in a 72 Hour cross-functional hackathon. I was eager to compete so that I could gain more experience as a designer working directly with developers. The prompt given to us by the hosts on opening day was simply "pet services." Essentially we needed to solve a problem that tackled any pet service-related issue such as handling the adoption process or fostering a pet.
The Team
-
1 Front End Developer
-
1 Back End Developer
-
4 Designers including myself
Tools Used
-
Figma
-
Stack Overflow
-
Google Docs
-
Canva
-
Zoom Conferencing

The Deliberation Process
Before settling on what problem to solve we debated amongst one another about the pros and cons of tackling various problems. Each of us got a chance to make our pitch. We considered creating a solution for pet training, medical care, and even educating pet owners. However, we ultimately decided to focus on assisting traveling pet parents to narrow our focus. We based our decision primarily based on the feasibility of success given our 72-hour development constraint.

Our Goal
To design a mobile app that will allow traveling pet parents to track their pet's schedules and find resources nearby to care for their pets while traveling.
Research/Synthesis
Competitive Analysis

We decided to conduct a competitive analysis in order to learn more about what popular pet service apps are currently offering. We examined Rover and Wag! in particular. Here are a few noteworthy takeaways from our research:
​
-
Both apps mainly focused on Boarding & dog walking services
-
Neither app allows you to find pet stores nearby
-
Wag! requires users to pay in order to complete actions like chatting with a vet online.
-
Rover has over 273k reviews on the app store so that tells us that pet service apps are in demand and pet parents care about them
Persona
Based on our research we formed a persona to define our target user's needs.

How Can We Help Jason?
Now that we've narrowed down our target user we started to ask ourselves key questions to determine how we can assist Jason.

Design
Ideation/Sketching
In order to efficiently generate UI design ideas, we decided to conduct a 45-minute design studio to sketch out possible app designs. We focused on imagining what the scheduling and home screens would look like in particular.





Low-Fidelity Wireframes
After reviewing our sketches together we worked on low fidelity wireframes based on our favorite ideas we presented.

Trouble in Paradise
While meeting with our engineering team we were informed that we didn't currently have the ability to import important data about nearby pet service stores such as their address and phone number. This was a huge problem we needed to address because our concept relies on having accurate location data presented to the user. Fortunately, with a little research, we were able to discover the Yelp API. It turned out to be an excellent solution for our needs and it even allowed us to pull in user review data for each location shown in search results. This honestly felt like a hurdle had been placed in our way, but I'm happy we had a team that wasn't afraid to tackle problems together.

Mock Up/High Fidelity Wireframes
From that point, we created high-fidelity versions of our wireframes as seen below. You can click on the image to enable a closer view.

Style Guide
Our design team decided to create a style guide for the software engineers so that our design elements would be developed more accurately. This proved to be a smart move because it removed ambiguity from the equation.

Usability Testing Results
We conducted usability tests with 3 people to test the functionality of our app design. We asked each user to try booking an ear cleaning session for their pet at a shop in Los Angeles called Urban Pet. Here are some of the key results:
100% task completion success rate
All 3 users mentioned that the app was simple and easy to use
1 user didn't know which category to choose for ear cleaning initially (Vet or Grooming)
Booking an appointment took 10 seconds or less to complete by all users

Final Product Prototype
Final Thoughts
Overall, I'm very happy with what we were able to accomplish considering the time constraint. Our team ended up winning 2nd place in the hackathon! Working on Pamper Pups has been a huge learning experience for me. Here are just a few takeaways out of many I've had:
​
1.) Having a clear game plan and staying organized is essential for cross-discipline teams. Using a project management tool like Trello or Monday.com would have helped us all to keep track of what tasks still need to be completed. It makes it easier for designers and developers to have a better understanding of where we stand each day. That's crucial during a hackathon with a time constraint.
​
2.) Be cognizant of feature creep. Narrowing the focus of the app's features and keeping the design simple is often a better strategy than aiming for a complicated multi-feature app that isn't practical to develop in 3 days.
​
3.) Having knowledge about CSS as a designer is helpful when communicating with front-end developers. This is a skill I'm working on adding to my tool belt now that I understand its value
​
4.) I've gained an even greater appreciation for the work app developers do. It's a very technical and challenging job, and I want to do everything I can as a designer to make the design handoff as stress-free as possible for them moving forward.
