Research

With the little amount of dog tracking mobile applications that already exist, all research was done through food/diet and exercise tracking applications for humans. The research methods used were secondary research, heuristic analysis, and user surveys in which resulted in learning about the barriers and motivations for physical activity, analyzing UI patterns within tracking applications, and understanding why users use tracking applications and what continues to keep them engage.

Research Goals

• Understand the common barriers to physical activity that individuals have

• Learn what motivates people to continue logging their activity on mobile apps

• Learn what attracts new users to try logging/tracking apps

• Observe how competitor apps use UI components to increase customer acquisition and maximize customer engagement

• Analyze UI patterns of competitor apps for tracking/logging activity

• Understand user preferences when it comes to tracking/logging activity (presented options vs manual input)

• Learn what components lead to a positive user experience when logging/tracking activity

• Detect any pain points or frustrations of logging/tracking activity on mobile apps

Secondary Research

Goal: Collect information on why users use logging/activity apps, what behaviors they decrease, and what factors attract and keep users to logging/activity apps

From secondary research the main barriers to physical activity and the main motivations for users to track activity were analyzed. From here the basis of why tracking applications are used and what features attract users to continue using them was found.

Heuristic Analysis

Goal: Analyze both good and bad designs of logging/tracking applications and go through the process personally to compare and contrast their UI

Five tracking applications’ user interface were analyzed in order for me to identify and understand what and how certain UI components played a role in the application’s customer acquisition and customer engagement. What was seen as common patterns within all five apps was that data visuals was the most popular way in presenting progress, visual hierarchy is important when presenting activity statistics, the use of “+” is commonly associated with adding an activity, and badges are a fun incorporation for positive reinforcement. I then used the information collected as inspiration and the basis for Happy Tails.

User Surveys

Goal: Learn user logging preferences, what initially attracts them to a product, and what components keep them engaged in a product directly from users.

Secondary research gave me a general idea of why people struggle to exercise and why they turn to tracking applications, however through user surveys, I was able to support the initial findings and get a deeper understanding of them. There was no surprise that the surveys showed that lack of time, energy, and motivation were the top 3 barriers to physical activity but what was helpful to learn was the “why” of using activity trackers and what specific features makes them want to continue using the products. It was concluded that most people use tracking products to keep themselves accountable through competition with friends and setting reminders and like seeing their progress over time with the help of data visuals.

VIEW USER SURVEY

Feature Roadmap

From the heuristic analysis and user surveys, it was already concluded that data visuals for activity progress, reminders to decrease the forgetfulness of owners, and goal-setting to increase activity behavior was necessary for a tracking product. With a basis already formed, a feature roadmap was created and built off of the findings from the initial research. All that was needed to be done was expand the features and then prioritize them to know where the focus should start with the necessary components and where it can shift off to later.

User Interface Brainstorming

A lot of time was spent on the design and branding process due to Happy Tails being a novel mobile application with no present design to work off of . The design planning process began with an in depth UI document with a list of all screens and components needed for a tracking app, medium-fidelity sketches with visual hierarchy, proper spacing, organized layouts, and potential icons drawn out as the foundation of the design, a mood board that was used to get an idea of how Happy Tails should look, and a UI kit with all components, typography, colors, and icons that will be used in the app and to ease the wireframe process.

UI Requirements

• An organized and easy to read profile with data visualizations to showcase daily, weekly, & monthly progress

• A accessible reminder section that allows for alerts to increase usability and accountability

• A simple and easy to use activity modal with a start/stop timer & CTA to save activity

• An omnipresent bottom navigation for seamless navigation in between pages

• An omnipresent quick add CTA on the bottom navigation for documenting activities for easy

  access

• An organized explore page that allows access to resources for dog’s and physical activity

• An organized and easy to read activity screen with clear statistics of user activity that user

  can reference back to

• An organized friends page that lists friends on app in alphabetical order and to access their

  pets activity progress

Mood Board

The goal when creating the mood board was to get inspiration on how I wanted the overall design and feel of Happy Tails to be. This way there was always something to reference. The layout and color palette was targeted first. Knowing that Happy Tails was an iOS app, what seemed to be most fitting and often caught my attention was the clean-lined and sleek layouts that had a pop of bright color. Being an app for dogs, I wanted the design to elicit a bright and fun feeling, so that it makes users want to perform exercises and trainings with their pets. The next target was looking for ideas for the design of the components (e.g. data visuals). Once I had different options available, I got a better grasp in the direction that I wanted the design for Happy Tails to go.

Sketches

The sketching process had a bigger focus for this case study due to the decision of creating medium fidelity sketches over low fidelity sketches. By creating medium fidelity sketches, we were able to lay out how the visual and informational hierarchy will appear, what information content will be found on each page, and what components are involved in the design. Spending more time on the sketching process will ease the process of creating the high fidelity designs since an outline was already created.

UI Kit

Using the medium fidelity sketches as a reference, a UI Kit was created and organized with the color scheme, typography, and components that were going to be used within the tracking application. By creating a UI kit first, it will ensure consistency within the designs and make the high fidelity design process a lot easier because all that will need to be done is insert the components based off the sketches. Also, if ever there was any changes needed to be done after the usability testing, only the main component will need to be adjusted thus making it easier on the designer’s end.

Variants

Prototype & Testing

Once the high fidelity wireframes were created, in order to see if the tracking app was successful, it was time to test Happy Tails through potential users. From testing, we were able to identify the areas of Happy Tails that needed improvement. This step was extremely important for a novel app because we often spend a lot of time working on a project that it’s very easy to look over small details that may not workout. Therefore having a fresh set of eyes to navigate through the app to find those small details is very useful. The goal of the usability test was to determine if users can easily orient themselves through the app, comprehend the features present to them, and be able to easily use them. The testing resulted in 100% completion with little to no confusion completing the tasks. All participants found the app easy to navigate through and use.

Testing Objectives:

• Identify all areas in the app that causes confusion to users in order to improve current design

• Observe if flow of onboarding is seamless and easy to complete 

• Determine the difficulty in which users find the process to record an activity, set goals, and add reminders to be

• Identify if data visuals are able to be comprehended and are motivating for users 

• Observe whether users can orient themselves within the application

Tasks:

• Scenario #1: Your vet told you that your dog is on the border of being overweight and recommends you to increase his exercise to shed some weight. Your friend mentions an app, Happy Tails, that seemed to be helpful to her and you decide to download it.

  • Task #1: Create an account and complete the onboarding process

• Scenario #2: You received a reminder to take your dog out for a walk. Before you begin your walk you open up Happy Tails and add an activity so that it can be documented

  • Task #2: Add an exercise activity for walking, start and stop timer, and then add a note about the walk

• Scenario #3: You got a notification that you completed your daily goal but are unsure of how close you are to completing your weekly goal. 

  • Task #3: Find how many active minutes are required to hit your weekly goal

• Scenario #4: Your friend invited you to a park date for a game of fetch with her dog. She tells you the date and time.

  • Task #4: Check if you are available on May 5, 2021 at 5pm and if you are then add a reminder of the playdate on your app. 

• Scenario #5: It’s raining out but you still want to get some exercise or training in for your dog; You open Happy Tails for ideas.

  • Task #5: Find an video of ways to create an agility course indoors

• Scenario #6: You and your friend decide to compete on who completes their daily goals the most within a week. You’re almost done but want to check where your friend is currently at.

  • Task #6: Find Aki and check his daily and weekly goal status

Closing Thoughts

Creating Happy Tails from scratch and working on the design process from beginning to end was a great learning experience. I was able to implement a lot of the methods and knowledge I learned from my previous case studies into Happy Tails which made the design processes smoother and a lot easier. The most difficult part of this project was creating the medium fidelity sketches. Because it was a new app and although I had other app designs to refer to, I had to come up with screen layouts and their content on my own. I had dig deeper than recreating designs but instead take already existing designs and use them in a way that will benefit the app. My favorite part of the design process was making the UI Kit. when I first learned about the proper way in creating a kit, I was still confused and lost however, this time around I felt confident on what I was doing and felt it to be a breeze. I cannot wait to see how my skill set will expand beyond this case study.

View Next Project: Tik Tok: Category Organization Feature