UI/UX Case Study (Spring 2021)
The goal of PetEase was created with the intention to help pet owners access multiple platforms efficiently. Thus, the app was designed with the purpose of creating hubs and consolidated places between multiple pet-related platforms, such as vet clinics, pharmacies, and pet stores. This platform would allow users to allocate the information to other clinics if necessary, and also have a centralized platform for guides and shops (such as pharmacies). The targeted audience is pet owners from the North American regions.
Timeline: March - May 2021
Our roles and responsibilities in this project include:
- User Research (User interviews, competitive analysis, user personas)
Interface Design (Brainstorm & sketch, wireframing, style guides)
Prototype (User flow)
- User Testing (User critique & feedback)
We conducted semi-structured interviews among 11 pet owners who currently locate in North America (Canada and United States) to learn about their daily routines and concerns regarding pet care. Some of the questions we asked include:
- How much money does the interviewee spend on their pet monthly and how do they feel about the number (Is it too much? Is it reasonable amount?)
- What are the common pet care items that the interviewee purchase every month? (ex. Food, litter, toys, medication)
- Describe the daily routine of taking care of their pet(s).
- Does taking care of their pet(s) make the interviewees feel overwhelmed? Why?
- What is the most stressful part of taking care of their pet(s) from their own experience?
- Do the interviewees use any pet care platforms/apps to help the pet care routines? Why do they consider it helpful?
- If the interviewees abandon a previously used pet care platform, what was the reason behind it?
After organizing the answers, we created a chart that helps us to identify the issues.
We also organized the interviews into 3 main takeaways to identify the common issues and concerns among the interviewees:
- The interviewees often take a long time learning knowledge regarding pet care because the information is all over the place (ex. Some interviewees rely on Google, yet Google contains some false information; some others rely on vets, yet it takes a while for their vets to respond).
- The cost for pet care is quite expensive (ex. Medical expenses, pet insurance), or the money spent on certain items are not worth it (ex. The pet doesn’t like the food/toy that the owner buys; discovering that pet insurance was not necessary because the pet is indoor only).
- There are a lot of files and accounts to keep (ex. Health-related files are often printed unless the owner requests a digital file; if the owners relocate, they have to ask the previous clinic to send their pet’s file to the new clinic, which takes a lot of time), and they are often sent from different places (ex. Animal hospitals, medical suppliers, pet stores).
Afteranalyzing the results from the interviews, we created 3 user personas to represent the potential users for the platform.
We conducted research on pet care apps and platforms that are currently or potentially competitors in the market. We identified and assessed the strengths and weaknesses of each platform. We classfied them into 3 categories:
- Medical suppliers
- Pet item suppliers
- Others (Planners, information gatherers)
Idealization & Wireframing
After completing the research, we began to dig into the interface design of the app.
Mid-Fidelity Wireframes (Initial)
After completing the mid-fidelity wireframes, we presented them to the users and gathered information after they tested them out. We summorized 6 points from the user feedback to help us revise the wireframes before progressing to high-fidelity wireframes:
- The layouts and colors of the app could be more dynamic.
- The message behind the app icon was not clear. It should be more intuitive.
- The phrasings for some of the frames could be changed and revised so the users could have a better understanding.
- A calendar feature for booking events could optimize the user flow.
- Decide on the overall user flow of the app (less layers = more minimal; more layers = friendlier)
- There were 2 navigation bars (top & bottom), and one of them should be taken out in order to optimize flow.
With the user feedback, we revised and made changes to the wireframes.
Mid-Fidelity Wireframes (after user feedback)
After completed the wireframes, we created a flowchart that displays the complete path a user takes when using the product.
Conclusion + Takeaways
Pet care institution has individual system to keep track of owner and pet information, as well as pet care articles. This makes it hard for owners to maintain documents, communications, pet care information, and even supplies. We designed a system that centralizes al information and suppliers in one platform, enabling users to have efficient maintainance.
Since we were creating a brand new system, there was no UI kits available. Therefore, we created one for the app.
- This was our very first time using Figma to create user interfaces, therefore utilizing components and features efficiently were learning challenges for us. After going through trials and errors, we had a better understanding of the features and how to use them more effectively in the future.
What we have learned:
- Conduct effective interview questions for user research.
- Pin-point the common concerns from interviewees and identifying the painpoints to help us designing the interfaces.
- User testing is crucial for design process in order to create an updated and aligned design for user experience and business goals.
Skills we have strengthened:
- Creat prototypes for the wireframes.
- Identify the current and potential competitors in the market, which helps us identify what we should strengthen on.