I’m a UX/UI Designer with a front-end development background.
I'm a designer with 2 years of front-end development experience. I love transforming complex workflows into easy and productive experience. Currently, I'm working at a data analytics startup, designing for complex data and business needs.
I’m a UX/UI Designer with a front-end development background.
I’m a UX/UI Designer with a front-end development background.
I’m a UX/UI Designer with a front-end development background.
FitCat App Redesign
FitCat is an iOS app that helps cat owners create and tracking weight loss plans for their overweight cats
My role
Team leader - Project management
UX/UI Designer - Research, design, testing
Developer - iOS development
Team
UX/UI Designer, iOS developer
Project duration
3 months
Overview
In 2016, my graduate school department partnered with Cornell Feline Health Center on building the FitCat iOS app, which aimed to help cat owners create and track fitness plans for their cats. My teammates and I participated in the phase two of the app, and we helped upgrading its interface and user experience. At the end of that semester, we delivered a working app and got the best project among the MPS projects for that semester.
Why it matters
In 2015, our client Paul Cashman, a cat lover and developer, and Dr. Bruce Kornreich, a veterinary cardiologist of the Cornell Feline Health Center, met and discussed about building a product that could help cat owners, veterinarians, or feline health researchers manage cat’s health.
In their research, they found that 60% of cats in the U.S. are overweight, and the owners are struggling from finding an affective way to help their cats regain healthy weight. So they reached out to our department and built the FitCat app, aiming to solve this problem by allowing cat owners to access a veterinarian approved weight loss plan for their cat and track their cats' weight loss performance.
Set the goals
In the Spring 2016 semester, a team of students designed and built the first phase of the app. So our goal originally was to design and implement the rest of the features. However, after testing the app, we found that, in version 1.0, even though the interface was fairly simple, the flow of tasks was not very intuitive to the users, and some of the UI elements were confusing.
User interfaces in the version 1.0 of FitCat:
So we proposed our findings to our client and told them that, in order to effectively help cat owners and improve the well-being of the cats, an intuitive and delightful user experience is crucial, especially for an app that users interact with on a daily basis. Luckily, our clients were very reasonable and agreed that these issues needed to be fixed in the next version. With the approval of our client, our goal switched from merely adding features to redesigning the information architecture and most of the user interface of the app.
Understand our users
Before we dive into design, we first learned more about our users and their feeding routines. We reviewed the statistics provided by our client and interviewed a couple of cat owners, and noticed that:
-
the average number of cats owned per household was 2.1 and only 11% of the households have 4 and more cats
-
the largest segment of pet ownership population are baby boomers (52-70)
-
most of the owners feed their cats 1-2 times a day
-
cat owners rarely switch from certain cat food brands to others, unless instructed by veterinarians
Based on our findings, we concluded that:
-
the app should allow users to easily access and manage 2+ cats’ fitness plans at the same time
-
the app should be intuitive and easy to use, especially for the older generations, by using concepts and terms that they are familiar with
-
the app should have a place that stores the information of frequently used food, so that users could have less friction when they try to record a feeding.
These observations laid the foundation for where we wanted to take the design later.
Redesign existing user experience
We started from redesigning the task flow and interface of two key existing features:
-
Generating a fitness plan for a cat
-
Recording a feeding for a cat
We brainstormed and sketched out different solutions. Then we took those sketches to the meeting for some feedbacks from the team.
After reviewing all the ideas, the team agreed on some of the major changes of the app:
-
“Cat cards” page for users to manage and access each cat’s fitness plan;
-
“Favorites” page where users access the food that they frequently feed to their cats.
-
“Recording” page that calculates the amount of calories a single feeding has based on the food amount users has chosen.
-
“Cat profile” page, where users can track how much calories remain out of the total amount of calories, which is calculated by the algorithm based on the cat’s health parameters, and monitor the progress made to reaching the final goal.
As soon as the direction was set, we transformed the sketches into wireframes, so that we can better illustrating the user flow and UI arrangements when reporting our clients.
Adding habit changing details to the app
In the initial interview with Dr. Bruce Kornreich, we learned that one of the challenges for effectively helping cats lose weight is that, the owners did not realize that some of their feeding habits could be problematic. We also learned that, in order to reach the weight loss goal, it was important for cat owners to measure the food volume correctly and be mindful about each feeding. To help our users understand the importance of correct feeding and measuring, we decided to add a few on-boarding pages to educate owners about correct feeding and measuring.
New Tips for Success page and Measurement page: guidelines for successfully helping the cat reach the goal weight
In addition to informing users, we also wanted the users to be aware of how much of calories each meal should be and whether a feeding has exceeded the calories amount needed by the cat. So we decided to emphasize the calorie information on some of the major pages.
FitCat shows how much calories the food contains for the selected volume
FitCat alerts users if the total amount of calories for the day exceeds the daily maximum calories for weight loss
FitCat also alerts users when the cat lost too much weight in a short period of time
Learn from the users
In order to validate our design, we did usability testing with prospective users. We presented the high-fidelity prototype to the users and asked them to complete two main tasks:
-
Create a fitness plan for a cat
-
Record a feeding
We learned that the overall experience was smooth and pleasant, even for people who are not tech-savvy.
One key thing that we learned was that, in the “Food library” page (a), the two tabs, “Favorite” and “All”, were causing confusions. They were placed next to each other and had the same weight. However, “Favorite” is what users would use everyday once they have selected the food from “All”, which did not deserve the same weight as “Favorite”. We explored several options, and after critiques, we decided to separate the two into a “Cupboard” page (b) and a “Food market” page. The new design looks simpler and more straightforward, making the frequently used food feel easily accessible. It also matches the real-life experience of cat owners, who would go to the market, select frequently brought cat food, and store the food in their cupboards. When they feed their cats, they pick a type of food from the cupboard and feed it to the cat.
a. Before: food library: user can switch between "favorites" and "all" food
b. After: food cupboard: stores all the frequently used food in one place for easy access
In our second round of testing, we learned that a few icons and wordings were confusing. For example, a user was hesitated when asked to delete a food from the cupboard, because she was not sure where the delete button was. After each testing session, we incorporated the changes.
Outcomes
After the third iteration, the design document was delivered to the developer in the team. I moved on from design to front-end development to help the other developer build the interface of the app using Xcode.
Prototype for the main user flow
At the end of the semester, our team were able to deliver an upgraded FitCat app to our client. We also showcased the app during the poster session and got the "Best Project Award" for that semester.
