Project Background
While medical industry focused on humans during the Covid-19 pandemic, pet healthcare took a backseat and left thousands of dogs and cats at risk. Neglect, improper care, abandonment and even domestic pet violence became rampant.
My design project stems from this background.
With telemedicine becoming a primary choice option for many, pet parents and pet healthcare experts can utilise this technology to compensate for the lack of physical check-ups and pet rehabilitation.
The Process
Keeping the user at the centre of my design process, I used these five main steps to help me to empathise with my potential users, formulate problem statement, validate assumptions through testing, and iterate until the best solutions were created.
Discovery
To better understand pet parents who wanted to connect with experts, I wanted to discover the problems they face and find out how they can integrate the app into their lifestyle and daily activities.
The Discovery phase of the design process included competitive analysis, SWOT analysis, formulating problem statement and MVP definition. Having identified the core features of the app, I created user stories to better understand the users needs and expectations.
Problem Statement
To be able to better understand the specific problem space that the app will be trying to solve, I defined problem statement that I will be referring to during the entire process to make sure the app delivers value to the customers.
Competitive Analysis
To know how to position Pet cetera in the market, I analysed two online pet consultation companies in terms of searchability and as an upcoming innovator in pet telemedicine platform.
Understanding an established brand like Pet Coach and a start-up like Fuzzy would provide insights on the best practices as well as the challenges they face in the business
UX Audit for Pet Coach and Fuzzy
MVP Definition
Having defined the problem statement, done competitor analysis allowed me to have a better understanding of what features the app should include to best serve the market segment I want to focus on.
The main functionalities of Pet cetera include:
User Stories
Having defined the main functionalities of Pet cetera app, I created multiple user stories for each one of them in order to better understand users’ needs and expectation. They will serve as a reference point when I’m going to wireframe each one of the user flows. Below, I’m going to showcase three chosen features and user stories for them.
Research
After discovering the problems Pet Parents who wanted to connect with experts face, and analysing pet apps that share similar features with Pet Cetera, this section dives deeper into gaining insight into the thoughts and needs of Pet Parents. Combining both qualitative and quantitative research methods, I conducted surveys and user interviews that helped me further understand the responsive web app I designed through the users’ perspective - feeling users’ goals, needs and pain points. This way I can validate whether my initial assumptions around the core features of the app and user flows were correct.
Surveys and User interviews aimed to answer these RESEARCH GOALS
Survey Findings
30 Participants. 10 Questions
User Interviews
14 Questions. 3 Categories
5 Female Participants who are Pet Parents
Affinity Mapping
Having collected insights from the user interviews, I captured all the comments and quoted from the users and used Affinity Mapping technique to find patterns and common themes.
This helped me synthesise the insights into four main areas:
Personas & User Journeys
Based on the surveys and user interviews, I created two personas that best represent the target audience of the app. One is Daniel, a 33-year-old single male who happens to be a marketing professional.
The second one is Naomi, a mom of two kids who works as a freelance vlogger. They are my two main user groups.
To reflect real-life situations in how these personas will use the Pet Expert app, I created scenarios based on their motivation and lifestyle and tried to capture how they will approach the situation.
For each one of the two personas, I also created user journey maps showcasing the journey that they're most interested in when using the app. Empathising with their own goals and expectations, I also considered their thoughts and feelings during each journey.
Task Flows
From the user journeys, I mapped out key task flows for each persona to ensure their goals were met. This helped me identify if Pet Cetera has any gaps when it comes to functionality. The task flow also helped me to find out if all steps were seamless, with the minimum pain points for the users.
User Flows
After mapping out the task flows, I proceeded with user flows to further help me understand and anticipate the cognitive patterns of users. This visual representation would ensure that Pet Cetera would be intuitive and efficient when it comes to accessing its most basic features.
Information Architecture
In the Information Architecture phase of the project, as a starting point, I made an initial sitemap to capture all the content that will be available on Pet Cetera app. This exercise had a goal of identifying the pages and categorizing them in a way that makes the navigation intuitive and allows the user to find the information they’re looking for in an easy and straight forward way.
Initial Sitemap
Card Sorting
Having created an initial sitemap of the Pet Cetera app, I conducted a closed card sorting exercise using OptimalSort platform. I gathered feedback from 18 participants. This allowed me validate my decisions, and on the other hand identify any points of confusion for the users.
The matrix below showcases participants’ responses and the areas that needed to be reworked as they created some confusion among the participants.
Final Sitemap
Once the refined site map was recreated, this became my basis for my wifeframes and prototype
Prototype
Using Figma as my design software, this phase is about creating a functional prototype of the Pet Cetera app that includes core features such as: Sign-up, Browsing Experts, Selecting a Single Expert, and Booking an Appointment.
Wireframing
I started by sketching solutions for each one of the user flows, which are presented with my low fidelity wireframes. These layouts were carefully transferred in Figma to create a mid-fidelity prototype that was used for Usability Testing sessions.
This is a crucial step to know if my features for the app can work smoothly for users. This helped me identify potential problems that users face as they navigate and use the app.
Sign-up Flow
Low Fidelity Wireframes
Mid Fidelity Wireframes
Browsing Experts / Booking an Appointment
Low Fidelity Wireframes
Mid Fidelity Wireframes
Design Evolution
For all of the features and screens, I followed the same process - from low fidelity sketches using pen and paper, through mid-fidelity wireframes in Figma until high-fidelity wireframes that were turned into a clickable prototype.
Below, I’m showcasing on the fidelity progression for one of the screens as an example of the process.
Of all the features that I iterated, the Single’s Expert Page is the one that evolved the most. What started out as a profile page during my initial sketches with the expert’s credentials, evolved into added features such as video component, and accesibility components such as audio player to read the Expert’s profile out loud for users who were not able to see well.
Fidelity Progression - Single Expert Details Page
User Testing
Having created a clickable prototype with all the core features of the Pet Cetera app, I moved into the Usability Testing phase of the project. I wanted to put the prototype in the real world users’ hands to observe how they’re interacting with it, whether they’re able to completed their goals and what potential pain points they experience.
I was looking to identify any potential points of friction that needed to be solved in the next design iteration to provide the best user experience and functionality in the final product.
Test Plan
I started with capturing goals and objectives of the Usability Testing. As part of the Test Plan, I also identified the features that will be tested, tasks and scenarios for the participants to follow, as well as the participants criteria and methodology.
I decided to conduct a remote moderated usability testing sessions with 6 participants that best reflect the Pet Cetera target audience.
Data Analysis
Having conducted and recorded all the sessions, I moved to capturing all the insights using post-it notes on the FigJam board. Each participant’s observations and quotes were captured and color-coded.
Affinity Mapping
Having all the comments captured, I used the Affinity Mapping methodology to categorise the notes into 4 groups: Observations, Positive Quotes, Negative Quotes, and Errors.
Having done that, I looked for patterns and common themes in the notes to identify the key issues that participants experienced when using the prototype. That resulted in the identifying final affinity maps that directly translated into the issues.
Pain Point Prioritization
The data that were gathered from the participants were tabulated into a Rainbow Spreadsheet. Data from the six participants were color-coded based on their labels as P1-P6.
This helped determine the severity and frequency of any issues and errors. It also aided in coming up with concrete solutions and suggestions to pain points that were identified.
Key Findings
Based on the Rainbow Spreadsheet, I chose the 5 main issues that were iterated in the prototypes. This is also the phase wherein I started creating high fidelity screens incorporating my brand personality. This will be further fine tuned in the UI Design phase.
Preference Testing
I conducted two preference testing for the app. One would be the visual design for the landing page. I was curious to know if users would want an illustration or a real photo as a hero image.
What I will be showing you is the second test which is to find out which expert tile lay-out users find easier to understand in relation to these features: Availability and The "favourite" icon.
UI Design
This section is all about fine-tuning the grids, colors, typography, elements, and icons. This is a crucial step to establish my app's brand personality by creating design patterns to ensure brand consistency before handing these off to developers.
High Fidelity Mobile Screens from Pet Cetera app
Design System
This design system was created to provide a standardised and consistent way to document and explain Pet cetera's visual identity. To ensure brand consistency, I created a library of components that allows designers to reuse these components for scalability and allow developers to build the app without compromising brand personality.
