Design Objective
The objective of this project was to learn how to implement both Apple’s Human Interface Guidelines and an established company’s brand guidelines into an app for iOS.
Project Concept
For years, Fitbit has been a leader in helping its users track their health and reach their fitness goals. Fitbit Pet sought to do the same, but for animals. Pets these days are increasingly overweight, leading to higher vet bills and shorter lifespans. Fitbit Pet is an app and tracker that will allow owners to visualize their pet’s fitness according to their age and breed, set fitness goals for their pets, and monitor any existing health conditions. Tracking a pet’s everyday fitness will enable owners to identify trends and even prevent possible health problems.
Press Release
User Research Synthesis
Research Objective
I wanted to discover what features potential users would find useful in a pet health tracker. I conducted need finding interviews by asking pet owners to tell me about the last time they took their pet to the vet for a non-routine check-up. This enabled me to determine what symptoms or behaviors pet owners tended to keep track of in order to monitor their pet’s health.
Research Subjects
I interviewed seven pet owners ranging in age from 20 to 57, six female and one male. Most of them owned only one pet, and the majority were dog owners. Only two of my interviewees owned cats, and they were also the only ones to have multiple pets.
Their pets ranged from purebreds to unknown mixes and varied from young adolescence (2-4 years) to senior (10+ years). The majority of the pets were adopted from shelters rather than purchased from a breeder.
Insights
All of the people I interviewed had taken their pet to the vet for one of two things: a change in behavior, such as a refusal to eat, or a physical symptom, such as a rash or swelling. All but one of the owners decided to wait a few days before taking their pet to the vet to see if the issue would resolve on its own. For physical ailments, some owners took pictures to track the progression. Otherwise, they simply observed their pet over the course of a few days to see if there was any change before deciding to take their pet to the vet. When it came to tracking their pet’s health before and after the vet visit, they tracked the progress of the initial symptom as well as their pet’s digestive health. This was primarily done through monitoring their pet’s fecal matter (consistency, frequency, etc).
I found that cat owners had a more difficult time determining when their pet was exhibiting ill health than dog owners, and digestive health was the primary method for monitoring their cats’ health. Everyone seemed aware of the personality quirks of their individual pet(s) and seemed confident that they could tell when their pet was experiencing a change in behavior.
None of those I interviewed currently used any external methods to monitor their pet’s health. A few of the pet owners had Fitbits or similar wearables to track their own health, but did not use them regularly. All those I interviewed felt that a product like a Fitbit for a pet would be useful.
Proto-persona
Competitive Analysis
There are several dog or pet trackers available on the market today, but most of them aim to track only the location or activity of the pet. A few of the competitors I looked at also tracked things like ambient temperature, sleep, pulse rate, and respiration. Only one of the competitors had any information that allowed for comparisons by breed or age.
User Journey Map
When a user opens the Fitbit Pet app, they immediately see the Dashboard screen, which provides a path to all sections of the app: pet profiles, activity, nutrition, behavior, and sleep. It also provides a summary of the pet’s activity for the day as well as letting the owner know that the Fitbit Pet tracker is on and connected to the app.
From the Dashboard screen, the owner can click the top right corner to view the pet profiles or add a new one. They can then view the data on each pet profile, including pet biographical information, upcoming dates, and goals.
The activity screen allows owners to view a summary of the pet’s weekly activity and compare their pet to itself, others of the same breed, or others of the same age. The owner can also view each day’s activity over time and a larger scale graph of the pet’s weekly, monthly, tri-monthly, and yearly activity. The same can be done for the sleep screen.
The nutrition and behavior screens behave similarly. Upon entering the screen, the user can see a calendar. Dots indicate whether something has been logged for that day or not. The user can choose a date and then click the button at the bottom right corner to enter the log screen. The log screen includes set buttons to allow users to make quick selections for common items as well as a custom option. Upon saving the selections, the user returns to the calendar screen and can see what they’ve logged at the bottom of the screen.
The user can also quickly add nutrition and behavior for the current day using the Quick Add button on the Dashboard screen.
Low Fidelity Designs
High Fidelity Designs
Prototype
Retrospective
Challenges
My major challenge involved software. This project was the first time that I attempted to use UX/UI design software such as Sketch or Adobe XD. As I did not have an Apple computer at home, I searched for Sketch alternatives. I wanted to use Sketch files since they are extremely widely available online. However, the Windows-compatible program that I found was unable to open Apple’s Sketch files. Instead, I began using Adobe XD since Apple provides official design resources for that program as well.
However, after creating a few initial screens on my laptop, I discovered that I was unable to download Adobe XD onto my home computer, which is where I prefer to work on projects due to the larger screen size. Since I did not want to continue creating my prototype on my small-screened laptop, I decided to start from scratch and use Adobe Illustrator instead. I downloaded an old, unofficial UI kit for Illustrator and was able to create the screens I needed for my prototype from there.
In the end, this was a blessing in disguise, since the screens I had previously designed were not enough like Fitbit’s original app.
Lessons Learned
This project taught me a lot about how a company creates a cohesive structure within its apps. In trying to mimic Fitbit’s original app, I noticed how they utilized colors to denote when a user was in different sections of the app. For example, all the colors used in the screens pertaining to sleep were based on a deep royal purple while the ones for the step activity used the iconic green Fitbit color. I tried to carry on this trend in the Nutrition and Behavior sections of my app. The consistent usage of typeface throughout the app helped it feel like a cohesive whole.
I also learned a lot about making text readable on an app. I initially made my text and images far too small to be comfortably readable to an app user. Upon comparing my screens to the original Fitbit app, I realized it used much, much larger font sizes, especially on the main screens.