City Cat Companion
A mobile app designed with metamorphic design principles to help clients feel prepared and confident before their cat’s appointments. It offers a virtual clinic tour, customizable checklists, and live wait times that adapt to each client’s needs.
This concept was the result of a project for a graduate level course, Designing Information Experiences, and a partnership with the local cat clinic: City Cat Veterinary
Role
Service & Product Designer
Worked to understand and map customer and user journeys to communicate the current and desired service experience.
UI designer:
Responsible for building wireframes and prototypes for the (insert screens) experience/touchpoint in the mobile app
Conducted usability testing with our prototypes to continuously ideate based on actionable insights
Team
4 UX Designers
Timeline
2 months
Interfaces
Mobile
Top 3 Problems
We distilled our observations into three main problem areas:
Disjoined Booking: Pet owners lack preparation guidance, digital invoice access, and direct phone contact, while the third-party booking platform setup contains inconsistent content.
Overwhelming Environment: The waiting area, while homey, is small. It has limited seating, noticeable noise from the printer,
and multiple signs present.Lack of Private Space: A window from the waiting room looks into the first exam room. The small space allows sensitive front desk conversations to be heard throughout the clinic.
Research
Field Observations: During our visit to City Cat Veterinary Clinic, we received a guided tour and conducted 45-minute observations in the waiting room on a typical weekday morning.
We also interviewed staff for 45 minutes afterwards and reviewed their staff training manual.
Our focus included identifying owner pain points (like appointment booking), mapping clinic workflows (such as check-ins), and exploring the physical space (and how staff-customer interactions occur).
Objective
How might we redesign the vet visit experience to reduce stress and anxiety for cat owners?
Framing the Experience
Guided by our course challenge to embraced metaphorical design, we explored the question, “What if X were like Y?” Through this process, we ultimately envisioned the experience of taking a cat to the vet as akin to airport check-in or a visit to a premium airport lounge. This metaphor draws on the parallels of pre-visit chaos, while leveraging the way airlines/airports have mastered preparing and comforting passengers before their journey.
Caption:
Next, we came up with a few design principles that encompassed emotions we’d like to bring about in the user during the experience:
Disjointed Booking
Pet owners lack preparation guidance, digital invoice access, and direct phone contact , while the third-party booking platform setup contains inconsistent content.
Caption:
Overwhelming Environment
The waiting area, while homey, is small. It has limited seating, noticeable noise from the printer,
and multiple signs present.
Lack of Private Space
A window from the waiting room looks into the first exam room. The small space allows sensitive front desk conversations to be heard throughout the clinic.
Using these principles, we were able to further down-select activities and ideas within our airport metaphor that would address the problems we outlined.
I helped draft a storyboard to visualize a successful version of the experience, focusing on mid-level actions, settings, emotions, and goals. I also co-created a customer journey map for the intended experience solution focusing mainly on the user’s journey, thoughts/questions, and feelings from the user’s perspective to pinpoint relevant touchpoints. Together, this helped us prioritize which design concepts to include in a way that was cohesive.
Building out the Solution for Testing
As a team, we analyzed the pain points from the pre-arrival experience to view opportunities.
Drawing inspiration from leading travel apps such as United, Delta, and Alaska, my team and I created an app flow diagram starting from the home screen.
I then designed my own version of the home screen as a paper prototype and compared it with those made by other team members. I played a key role in identifying and extracting the most effective overlapping ideas, which shaped the selection of cards and buttons for our paper prototype card sort.
Formative Evaluation
Next, I led a 45 minute in-person card sort with cat owners, asking the user to arrange existing cards or create new ones for how they would envision a mobile home screen for this app.
From the final three different user configurations of the home screen, we finalized a reference layout of the mobile home screen to move into digital prototyping.
High-Fidelity Prototype
Similar to what was done before, I then designed my own interpretation of the reference home screen as a digital prototype, compared it with those made by other team members, and we combined parts of it to create a more cohesive, high-fidelity mock-up for the home screen.
In addition, we each further built out more high-fidelity screens and features to address pain points in the user flow and prepare for a second round of testing. I was responsible for building out the “Prepare for Visit” checklist and “Resources” screens.
Caption:
Summative Evaluation
I led a 60 minute remote usability test with cat owners, asking the user to walk through the application and voice aloud their thoughts along the way.
Upon the completion of the three usability tests, the team analyzed our observations of what worked well and what didn’t to move into a last iteration of the application.
Results
What follows are features created to address pain points and the new findings from testing, translated into the final iteration:
Disjointed Communication
Consolidated all clinic information into one digital platform to better prepare owners including:
Booking
Pet reminders
Exam specific check-list and expectations
Design Decisions:
The updated solution provides a personalized overview of what to prepare before and expect during each specific appointment, making the experience relevant for both new and returning clients. Cost estimations are shown upfront to boost transparency and reassurance.
Rationale:
Users want a clear overview of the full process, with flexible navigation that isn't locked into a step-by-step flow. First-time visitors find detailed guidance helpful, but repeat visitors prefer more streamlined, relevant content.
Overwhelming Environment
Showing the space to new clients before they arrive to familiarize them with the environment while also highlighting the unique charm and homey-ness of the small business.
Design Decision:
Create a gamified virtual tour led by the clinic cats to make it engaging for the new client.
Clients to learn more about the staff and the physical clinic + parking options during the tour through real snapshots of the space.
Added in clear navigation: checkpoints/landmarks as well a clear tour exit option.
Rationale
Users liked to see their destinations-and are pleasantly surprised to see that it had a more homey appeal. Users also need to see their progress, reference previous locations, and want an easy exit.
Lack of Private Space
As an extension of having a small waiting space, we thought to transform the client’s car into an extension of the waiting room to further create comfort from the familiar and to further address privacy concerns.
Design Decision:
On the homepage, we updated it to include a clear check-in process available in the vicinity of the clinic
Display wait times statuses that are specific and timely.
Under our Clinic Resources page, we include additional resources for how to calm your cat (including how to crate as well as a cat playlist).
Rationale:
The ability to check in from the car creates additional space in the clinic waiting room
Users prefer transparent wait times over how many patients are ahead.
Personal car environment is more familiar and can be less overwhelming to the cat and owner.
Reflection
Metaphoric Design as an Inspiration:
In terms of lessons about experience design–metaphors are meant as a helpful guide, not an exact blueprint. You still have room to deviate away from certain aspects of the metaphor if it isn’t meeting the needs of the user. For example, our cat playlist was not as important as we thought it would be for “lounge” music, so we deprioritized it as “a sense” to play up in our experience.
Balancing Stakeholders:
With the design of our solution, I also realized that we focused a lot on preparing the user for their visit (service provider perspective), but equally important is the user’s perception of the clinic being ready for them. If I had to do this project again, I would definitely incorporate this service recipient mindset equally if not more.
Next Steps
Our experience solution focused more on first time clinic clients as well as unintentionally provided more information skewed towards those with cars as well. Although making first impressions are important, so is being able to continue to provide new useful information for returning users as well as being more inclusive for different types of client needs.