A mobile solution designed to connect pet owners with veterinarians.
iOS - Mobile - Wearable - Responsive Website - Research - Wireframes - User Interface - Usability Testing - Prototyping
Overview
My Role: Product Designer
Timeline: 10 weeks
Tools: Figma, InVision, Marvel POP, Pen&Paper
Project Type: Academic, Independent, Conceptual model
The Problem
Pets are part of our lives and families. But keeping up to date with their health needs can be challenging.
It all started when I became a new pet owner. I was overwhelmed by the number of vaccine appointments my puppy needed. Having an out-of-hours emergency was also desperate - I didn't know where to go.
I knew this was a major issue when I constantly met other pet owners facing the same (or worst) frustrations: they were also worried about their pet's special needs that can also be worsened due to ageing.
It was natural to me to come up with some high-level goals:
Provide pet oners a soothing experience to take care for their pets' health.
Make it convenient for them to schedule a vet appointment.
The Solution
Pello provides a personalized list of available veterinarians based on pet symptoms. It can be as close to the owner's location or simply a virtual appointment. Upcoming visits are in sync with their calendar, making sure they won't forget it.
The Process
Secondary Research
Through a closer investigation of the problem space, I was amazed to find stats showing that Canada is a pet-friendly country. Approximately 41% of Canadian households include at least one dog and 37% at least one cat.
That's about:
That's about:
Once I had this overall idea of how many pets I was dealing with, I was surprised with other pieces of information I found. And it crucial to get a sense of the roots and causes of my problem space.
Primary Research
With key data and the design question to guide me, it was time to talk to Canadian pet parents to get an in-depth understanding of their challenges in managing their pet's health.
I conducted this qualitative research with 5 different people, and I noticed some themes stand out. Using color-coded sticky notes, I grouped them into motivations (pink), pain points (yellow) and their behaviors (blue).
From the interview categorization, I came up with some key insights:
• Their busy schedule makes it challenging to go to the vet
• Acknowledge they should keep better track of immunization due dates
• Social distancing makes both pet and owner apprehensive during vet visits
• They are more likely to choose a vet based on family and friends' recommendations
• 100% schedule vet visits through phone call
Persona
To easily recognize and empathize with my target user's needs and keep them at the center of my design decisions, I created Cecilia Daniel (and her dog Max) as my primary user persona.
Experience Mapping
After that, I designed an experience map to visualize Cecilia’s current process of experiencing an emergency to finally taking Max to the vet. Finding opportunities for design interventions in her journey was extremely helpful and insightful for me.
Ideation
Now it was time to think about digital functionalities as possible solutions to alleviate Cecilia’s pain points.
From exploring a wide range of user stories, I created a task flow for the app's main functionality: connect pet owners with veterinarians based on their pets’ symptoms.
Paper Sketch Exploration
To give that flow a realistic mobile feel, I grabbed UI inspiration related to pets and the veterinary world. I observed a trend in cards and rounded elements and decided to adopt the same consistency.
Then, I started to unleash ideas into raw pen and paper sketches and came up with two different versions:
Version 1
Experimenting with the possibility of choosing online or in-person appointments from the start. Cards for filters and appointment page.
Version 2
Here I went with a different home page options. I also included an edit option in the appointment overview.
Wireframes and Usability Testing
Through rapid user testing to validate basic functionality, I was ready to translate sketches into wireframes which I conducted 2 rounds of usability testing with 10 different people in total.
I collected testing insights and applied the matrix of effort vs. impact to prioritize my subsequent iterations. The main usability fix was in the initial Appointment Type screen:
Initially, the task flow was thought out to book Veterinarians based on general filters. However, during usability testing, I felt the need to bring more value to the emergency appointment. That's why I decided to include a step that would find a Vet based on the pet's symptoms:
Visual Design
It was the moment to define the product branding that would echo its mission and core value proposition. The first step was to create the name and wordmark. My constraint was that it had to carry pet care meaning and be memorable and pronounceable by most languages.
After playing with words in my sketchbook, I came up with "Pello," which stands for pet and care, in a mix of Portuguese and English words.
Moodboard
Once I established the brand name and its adjectives [reliable, welcoming, competence and serene], I collected visual inspirations for Pello's look and feel. Getting immersed into this, I was amazed to notice that the colors I extracted from curated images reflect Pello's adjectives. That was the moment I decided to keep orange and blue as my brand colors.
Tap Image for link to Moodboard👇
Hi-Fi Mockups
The first approach to deciding how I'd distribute the colors throughout the app was accessibility, following WCAG Guidelines for background and foreground contrast.
Then, I set a constraint to combine color, typography and illustration to make it welcoming but straightforward, targeting reliability and soothing feeling. Then I experimented, ideated until I got the high fidelity and prototype done.
A welcoming home page
When Cecilia opens Pello, she is greeted and reminded of Max's upcoming Vet appointment. She also has an overview of his health information and the health solutions, including Booking a New Appointment.
A personalized list of Veterinarians
Once Cecilia inserts her pets’ perceived symptoms, she finds a list of available Veterinarians. She can also filter by dates, location, appointment type (in-person or video call), reviews and visit cost.
New appointment. One screen away
After selecting the preferred vet, Cecilia can choose the appointment based on the next available spot or schedule it when it's more convenient to her.
Alternative Device
Thinking about the product's scalability, I designed an Apple Watch extension for Pello and a Marketing Website to increase visibility and download ratings.
Apple Watch
To increase the presence of Pello in Cecilia's journey, I designed an Apple Watch extension of the app to reschedule or cancel an appointments.
By defining the challenge, mapping a storyboard, platform research, ideating and prototyping, I came up with this wearable solution that allows her to make fast-decisions based on her schedule and needs.
Marketing Website
With the final product ready to be launched, I decided to develop a responsive marketing website to give potential users an overview of the product and service before committing to download and trying out the app.
The design process brought me back to paper sketching, feedback and iterations to keep the look and feel consistent with the brand.
Future Implications
Moving towards the deliverable part of the design process, I consulted with other designers to discuss the project's impact when scaled to a larger user base.
We used Tarot Cards of Tech to drive our discussion, and I was given "The Forgotten" card.
Reflecting on the project and this card's purpose, I noticed the urge to adjust Pello for accessibility for those who own service pets. Although they can be potential users of the app, they may encounter reading and typing difficulties.
To address this potential problem, we've discussed a possible solution to incorporate voice experiences within the app to make navigation more accessible. That's definitely one of the priorities for my next iterations.
Learnings
During this 10-week journey, I not only learned the end-to-end (and iterative) process to design human-centered solutions, I also discovered a lot about myself as a designer.
• The why behind. Always make research-backed design decisions.
• Feedback is a gift. Especially for that WIP, you think it's not ready to be shared.
• Don't fall for the first solution. Instead, allow the ambiguous process to guide you to different possibilities.
• We all know that done is better than perfect. But the secret is that nothing is ever really done.
• Time flies when you're having fun. I'm sure I found my passion because the world stops around me when I have my Figma file opened up.
Thank you for reading :)