UI/UX Case Study: PetCare App
Introduction
As a fellow pet owner myself, sometimes it can be tough to keep up with taking care of your pet. As a part of my Data, UI/UX course I have chosen to do revamp a pet care app for my assignment as well as add more features that attracts the users of the app to use it more.
In this blog, I will be describing the 13 week process of revamping this app from interviewing pet owners and identifying their problems to creating a high-fidelity prototype of the new app itself. For this assignment, the process was split into four sprints;
- Research Sprint
- Concept Sprint
- Usability Sprint
- Handover Sprint
Research Sprint
For the research sprint, I started off by hypothesising a problem statement as well as a user persona. Later on, multiple user interviews would be conducted to help adjust the problem statement and persona into a more realistic one.
To do this I used Moore’s template and came up with a hypothesised problem statement and based on that I made a user persona as follows;
Hypothesised Problem Statement
For Stephanie who needs to manage her pets, PetCare is a Pet Management App that can help her manage her pets, feeding, appointments, medicine and grooming. Unlike, Pet Care Diary our product can help find the nearest vet/groomer for her dogs!
Hypothesised User Persona
User Interviews
Later on, there was an interview conducted to understand other pet owners challenges to improve the problem statement and user persona.
Before the interview had started I needed to prepare questions and to do that I created an objective for the interviews which was as follows;
- Find out if interviewees has experience with pets before and the pattern of taking care of their pets then and now
- Find out how they keep track of their pets needs such as food, behaviour and appointments.
- Find out how interviewees take care of their pets on a daily basis
With this in mind I wrote down the questions in a Google Form;
User Insights
I ended up interviewing 5 pet owners in the span of 4 days, 2 of which were dog owners, 2 cat owners and 1 rabbit owner. From the interviews, I gained insights for the problem statement.
With these insights in mind, I proceeded to refine the user persona and problem statement.
Validated Problem Statement
For Stephanie who needs to manage her pets, our product is a pet care app that can help her manage both of her pets food supply separately as well as notify her when it’s feeding time. Unlike, PetCare Diary our product can help remind and encourage her and family to take care of their pets and assign roles to each other.
Validated User Persona
User Journey
Using this persona, I made a user journey map to visualise how this person would take care of her pets.
First, I summarised the persona
Then I mapped out how she would go about taking care of her pet
Lastly from the map, I wrote out opportunities to see what functions I can add to the app
Competitor Comparison
For the last portion of the research sprint, I analysed the competitors of my chosen app to revamp which was PetCare;
To compare the app to its competitors, I made a table that compared all the apps visuals, sign-up, pet selection, navigation, reminders and if it needs payment to unlock features.
I also weighed the pros and cons of using each individual app in Google Slides to see what makes the competitors app nice for users.
Full Research Sprint
Concept Sprint
On to the second sprint, this is where I started to really focus on the contents of this app and how to improve it.
To improve this app, an analysis of the app was needed. First off I started of mapping out the current contents of the current app in a sitemap which is a flowchart that lists all of the pages in the app.
Sitemap
Evaluation
After making the sitemap I moved on to analyse each screen and functions of the current app.
After the individual screen analysis I summarised it under a UX scorecard based on its visuals, usability, functionality and content of the screens above.
Brainstorming New Features
The current features of the pet care app I chose honestly, wasn’t a lot to work with in itself. The app itself was meant to remind users to do tasks for their app and that was practically it. With that being said, I started brainstorming more features to add in the app in Notion.
After listing the features, I listed 5 main features that I definitely wanted to implement in the revamped app which I then elaborated in Google Slides.
- Logs (Social Media)
- Training Tips
- Assign Tasks to household members
- Health Graphs
- Game Feature
Moving on I did a features matrix to see what features I should keep and exclude for this revamped app as well as to see which features I should prioritised.
Wireframes
Following the features matrix, I proceeded with making the wireframes for different concepts of the features for users to test later on.
Concept Test
For the concept test I got 4 users to test out the concepts of the screens to find which one they preferred.
To test the screens I gave the users a series of tasks to complete;
Following these tasks, the users will then test out multiple versions of the screen to see which they like more and to see which features they would use.
The results of the tasks are as follows;
Preferred concepts
Would use features
Overall the logs feature which is meant to help household members communicate about what the pet has done was the most would use feature.
Google Forms: Concept Test Questions
Concept Test: Low Fidelity Prototypes
Full Concept Sprint
Usability Sprint
A third quarter way there, now it’s time to focus on the design aspects and making a high fidelity prototype of the app itself following the results of the concept test.
Moodboard
Before starting to design the app I need a moodboard to set a direction of what the app itself was going to look like later on. But of course I needed to set a direction of what I wanted the feeling of the moodboard to be.
Comfy
Playful
Warm
Happy
The reason why I chose these words was because pets are naturally associated along with positive feelings and of course, people that would use this app would be people that probably love their pets.
New Sitemap
And of course to help revamp the app I needed to make a new sitemap to know where to implement the new features
App Flow
Following the new sitemap, I proceeded to make flows out of the wireframes to kind of visualise what the user might go through while going through the app.
High Fidelity Screens (First Attempt)
After creating a comprehensive flow, moving on I started on making the high fidelity screens, which, looking back, was pretty chaotic.
Final User Tests
Using the high fidelity screens, I created the first high fidelity prototype for the final user tests to gather some final thoughts.
The results are as follows;
To summarise the outcomes;
Google Forms: Final User Test Questions
High Fidelity Prototype: First prototype
Full Usability Sprint
Handover Sprint
Finally this project is coming into an end. And so here are some final screens, style guides as well as mockups to showcase the revamped app.
Final Screens
Style Guide
Based on the final screens I created a style guide which is similar to a moodboard however, this is based on the final screens and is more detailed compared to a moodboard.
Mockups
Finally, I added mockups to see how it would look like if the app was real.
Full Handover Sprint
Key Learnings
A lot can be learned from doing this project and I definitely struggled over the 13 weeks. To me, this course opened a whole new aspect of what it’s like in the UI/UX industry and I’ve definitely gained a whole lot of respect for those who pursue this career.
Although I do struggle in some aspects, I entered this course wanting to pursue a career in this industry and this course has only pushed that motivation further. That being said, here’s some of the key things I have learned from this course;
- The entire process is important — Although this is obvious in many ways, to me it feels like every step in this project matters from the questions of the first user tests to the nitty gritty of the design of the app, they are all linked in one way or another.
- Always keep the users in mind — Of course when you’re the one designing the app, everything is understandable to you but at the end of the day the app isn’t just for you but for others as well, and with that said, it’s always important to keep users in mind when designing the app itself.
- User testing is crucial — The user tests are very important as they help refine your app by letting you know the problems they have with it and what they think about it overall. The tests also helped me improve my own ability to question and survey others as well as improving my own social skills overall.
- There is more than meets the eye — As I have stated, this project has opened up my understandings about the industry and gave me a newfound respect for those in it. There is more to apps than the design, there is so much more behind it that makes a UI/UX design great.
- Have a lot of patience, Rome wasn’t built in a day — During the first two sprints of the project, I wondered when we were going to do the design portion of the app. But I soon realised that to start designing, all of the research was necessary to make a comfortable design for the users.
- Time management — Time was crucial throughout the entire process of revamping the app and attempting to complete it on time so time management skills were desperately needed.
Overall I had quite a nice time doing this project and getting to see a glimpse in what this industry has in store for me. I would like to thank my lecturers Din and Jeremy for teaching this course and for taking the time to guide me and for giving me constructive criticism to improve my project, I really appreciate it a lot :)
