Wag’n
A ride share app for pets and pet parents
UI/UX Design
Role
Platforms
iOS and Android
Adobe XD
Tools
Timeline
4 weeks
About
Wag’n
As a pet parent living in a big city without a car, I often use Uber or Lyft to bring my cats to the vet. Many times, the drivers are understanding of their nervous yowling throughout the ride, but there have also been several instances where the driver was less than pleased, resulting in a low passenger rating and an even more stressful ride for everyone. This got me thinking, “What if there was a ride share app just for pets and their owners?” The drivers are like-minded animal lovers, and their vehicles would be equipped with items for purchase to make the ride smooth and comfortable for pets.
The app’s name is a cheeky pun referencing the colloquial term for an ambulance (wagon) and the “wagging” of a happy dog’s tail. Whether it’s for a scheduled visit to the vet or an emergency trip to the pet hospital, Wag’n and its drivers want to make sure that tail stays waggin’!
Wag’n helps pets and pet parents get to their vet or animal hospital safely and comfortably.
The Problem
Although there already are some similar ride share apps targeting pet parents, there are very few and they only operate in very specific cities or regions. When viewing the policies and accommodations in these ride share apps, they don’t seem to be as pet-friendly as they claim. For instance, Uber Pet charges a $300 charge to clean any pet messes.
A Solution
Wag’n aims to make a stressful trip to the vet or hospital as calm and comfortable as possible for pet and parent by providing accommodations for the specific type animal, cars that include customized interiors to deal with any potential pet mess, and drivers who are trained and equipped to handle nervous and/or sick pets. Think ambulance or NEMT (non-emergency medical transport), but for pets.
Platform Guidelines
I referred to Human Interface guidelines for iOS, and Material Design for Android, ensuring UI elements like buttons, icons and pickers were consistent with the user’s platform familiarity.
iOS
Android
UI Patterns
I took note of UI patterns in similar apps, like PAWZ Pet Taxi, SpotOn and Simon Pan’s Uber redesign, to see which elements could work best for Wag’n, and added them to the mid-fidelity wireframes.
User Feedback
-
Positive
• Overall, idea is convenient for pet owners. Uber for pets!
• I like the UI on Android better because you used the visual aid (photos) on “Options” and “Searching for Drivers”. Easy to see.
• The customize ride options under ride criteria are a good idea, is good UX and shows a level of empathy and foresight into our users’ lives. Well considered.
Constructive
• Is the purpose of the app hotel or pet-sitting? If parent won’t be there, there should be message board for the vet. Specific purpose is unclear.• Add a filled out pet profile example in addition to the empty state page to show why it’s important.
-
Positive
• I like the “message” option button on Android.
• Love the app in general, helpful tool as a dog mom who doesn’t have a car.
Constructive
• Searching for Drivers is difficult to see on iOS (white text with map in background)
• Ride Confirmed page: I thought my pet was going to Sunshine Vet, but its says Companion Pet Hospital
-
Positive
• Looks good so far; I like the complementary blue and orange color palette
• “Pet Profile” is good feature to highlight for personalization
Constructive
• Skip “see profile or see map”. It’s unnecessary fluff.
• As cute as the arched destination arrow is, seeing the actual recommended path would be more comforting, unless the drivers aren’t expected to take a certain route.
• Looks a little dated because current Material UI has more flare and depth. Add some more shadows and layers for more oomph.
-
Positive
• Fabulous! I hate using Uber or Lyft to take my dogs anywhere because the drivers always seem annoyed, so this is a great idea!
• I love the idea of being able to customize the ride with treats and blankets, etc.
Constructive
• From the “your card xxxx will be charged” notification, if I click OK, it goes to the “searching for drivers” screen, BUT the back button takes me Home but should take me back to previous “customizations” screen so I can make changes or explore the options if I want to.
• Will the driver wait for you at the vet or is it just one-way trips? That might be a good thing to add.
Style Guide
I chose bright, complementary colors because many pet products are marketed with bold and exciting colors. The orange indicates a sense of urgency, which makes sense for an app that provides emergency rides. The teal creates contrast for making elements like primary buttons easy to find.
#208E92
#FF9800
#FFFFFF
#000000
Taking the users’ feedback into consideration, I made the necessary revisions to the high-fidelity wireframes such as more legible text, the expected route on the map, and completed pet profiles, as well as minor navigation errors.
Takeaways
Designing Wag’n was a fun and meaningful project for me as a pet parent who could use an app like this, but I did face some minor setbacks:
Getting over the learning curve of Human Interface guidelines. As a lifelong Android user, using iOS guidelines was tricky and somewhat counterintuitive for me at first, but after some practice (and many visits to Apple’s developer website) it became much easier to implement.
The goal of this project was to keep the design as familiar as possible in regards to which platform a user prefers (iOS or Android), so I ultimately stuck as close to the default as possible. Resisting the urge to creatively stray too far from the sets of guidelines was a constructive challenge for me, because it forced me to stay on track and make sure I was primarily focused on usability and familiarity for its users.
If I were to revisit this project for second iteration, I would:
Flesh out more of its features, i.e. design screens from the driver’s perspective
Conduct more user interviews and testing
Add a more personalized/ modern touch, i.e. use updated design trends for UI elements