Contents
  • Overview
  • Empathize
  • Define
  • Ideate
  • Prototype
  • Test
  • Iterate
  • Reflect

    • Bellyrub

    Bellyrub is an organic dog food subscription service focusing on a mobile app where you can sign up to manage your account and create your dog's custom diet profile based on its breed, activity level, general health, and dietary needs.

    View Prototype →

    .01 Overview

    Duration

    March 2021 – May 2021

    Role

    UX Research, UX/IX, Content

    Tools

    Figma, Adobe Illustrator

    Problem

    More millennials are getting pets alongside their busy schedules, some being rescues who have specific dietary needs or others who just need an optimal formula which cannot easily be found in stores.

    Solution

    A monthly dog food delivery model that helps owners set up and manage their their subscriptions with easy customizable ordering processes for convenience or data-backed generated options to help customers.

    .02 Empathize

    In order to create a functional solution for a product, we needed to gather information from potential users of the target market to learn their story identify their goals and frustrations. I conducted guided interviews with users from my local breed group, plus secondary research on puppy support, dog training, and holistic care subreddits to learned about unique stories about how modern dog owners choose to feed their dogs, unique dietary needs/restrictions for purebred dogs, mutts, and seniors, and what frustrations they run into as a milennial dog owner.

    The Pain Points of Getting Dog Food

    Time Management

    Specialty dog food stores tend to close earlier than big-box stores.

    Availability

    Specific products are never guaranteed to be in stock.

    Formula

    Dog food formulas vary and it may be difficult to pinpoint exactly what a dog needs.

    Cost

    Unique formulas and “health food” brands tend to cost more than the average big-box product.

    User Persona: Tom

    A look into the busy life of urban dog owner and software engineer, Tom, who has experienced a career change and relocation which directly affects the reliability, schedule, and convenience of getting his dog's regular food.

    Bellyrub User Persona

    Journey Mapping

    I was able to get a "Tom" to walk me through his process of buying dog food at the store on his constrained schedule with his dog's specific diet. There were commonalities similar to other experiences I recounted while speaking and spending time with dog owners, and even reminded me of my own frustrations when I run into the same conflict.

    Bellyrub Wireframe

    Problem Statement

    Bellyrub Wireframe
    .03 Define

    Using Tom's story and problem statement, I was able to create a userflow for the app to have a basic structure on interacting and navigating through the screens. Afterwards, I created a big picture and close-up storyboard to capture the scenarios that Tom would most likely be faced with based on his current problems with buying his dog food.

    Crazy Eights / Sketches

    Bellyrub CCrazy Eifghts

    Bellyrub User Flow

    Bellyrub Userflow Diagram

    Close-Up Storyboarding

    Bellyrub Close-Up Storyboard
    .04 Ideate

    It was important to make the journeys equally balanced, so I took inspiration from ordering human-targeted consumer products for things like ordering food or wellness products, and turned it into a dog food-buying journey. Other dog food competitors put a lot of emphasis on the meal plan ordering process, but do not make it very easy to navigate settings you might need before and after, such as adding profiles for multiple dogs, tracking your orders, or managing and canceling meal plans, so it was my goal to make each step easy from account creation to deletion.

    Low-Fi Wireframes

    Wireframes for the mobile version of the Bellyrub mobile app that feature the homepage, sign up process, meal plan creation, pet profiles, and account settings.

    Bellyrub Wireframe
    .05 Prototype

    To bring the journey to life, I incorporated the userflows into the navigation of the wireframes. Initially, I created a lo-fi version of the main website, but decided to put that idea on the backburner to focus more on the primary actions of the user journey which is signing up, purchasing a plan, and manging their account. With frequent testing and reiterations, it was my goal to make navigating through the app easier and having multiple entry/exit points for the user to come back to at any time. With some competitors, they divide each process into stages which makes it difficult or impossible to come back to without reaching customer support.

    Low-Fi Prototype

    The very fun and busy-looking interactive elements for the homepage, sign up process, meal plan creation, pet profiles, and account settings

    Bellyrub Lofi Proto
    .06 Test

    To figure out if the flow of the app makes customers feel confident about ordering and if there are any gaps that prevent them from make a successful transaction, a usability testing session was conducted based on the follow parameters using the Lo-Fi Prototype posted on Figma.

    Research Questions

    • Are all the steps implemented to make the customer confident about their order?
    • What can we add to make sure the customer has everything they need later to change or edit their options?

    Key Performance Indicators

    • System Usability Scale
    • User Error Rates
    • Conversion Rates

    Methodology

    • Study type: Unmoderated Usability study
    • Location: Remote (online) or in-person
    • Participants: Pet owners age 25–35 of various abilities familiar with online ordering.
    • Length: 25-minute remote testing sessions conducted between April 19th–26th, 2021.

    Tasks

    • Create an account
    • Locate the meal plan creator
    • Create a plan of your Choice
    • Navigate account settings

    Gathering Insights

    Custom Ordering: Product Summaries

    4 out of 5 users were confused about the options on the custom ordering form.

    All Screens: More Descriptions

    2 out of 5 users wanted more context for the sections and navigating through the pages.

    Dashboard: Shortcuts

    Some users did not find the dashboard helpful and wanted more detail and shortcuts

    All Screens: Components

    Many users in and outside of the test had difficulty using some components since they were a little too small.

    .07 Iterate

    After the first round of testing, it was time to synthesize the insights I gathered and create the final high-fidelity prototype. In the process, I gathered some insights through geurilla testing to see how people thought of the initial design system, and decided to update some of the styling and content as well.

    Addressing Insights

    All Screens: Components

    Adding product summaries to the custom ordering form. To prevent too long of a scroll and to avoid development to cater to accessibility, there will be a redirection to a separate page. Section titles have added subheads.

    More Descriptions

    More details such as component labels, subtitles, captions, breadcrumbs, and info prompts were added to the final prototype.

    User Insights A

    Addressing More Insights

    Dashboard Shortcuts

    Shortcuts were added to support the user journey after creating a meal plan, being more mindful of those with pet details that might have changed, who might have multiple pets, or those who need help changing their account settings.

    Visual Design

    Some noted that the UI was too "containerized" which was made it look childish, and that the modal-style containers were taking up a lot of valuable space. I switched to using subtle gradients to help break up the content and used containers sparingly for more important details.

    User Insights B

    Design System

    My goal when creating the visual system guidelines was for a clean UI based on nature-y swatch palette, rounded corners, and flat illustrative themes to invoke a friendly emotional feel and bring more attention to information and components. I created custom vector art for the iconography to define the app's functions, as well as the Bellyrub logo and illustrations. The logotype uses a rounded, bold typeface to Reflect the playfulness of the brand and a simplified dog laying on its back.

    Bellyrub Iconography
    .08 Reflect

    This was my first end-to-end project journey through a fresh design perspective, and I learned that there is truly a difference in just designing visuals vs. creating a product's entire experience. I gained a lot of self-awareness from this project, and I know it takes teams of research, business development, and customer service experts to know what features are truly viable. I put a lot of love for design and the dog owner market into this project, and I hope to apply my lessons to other projects with the same level of ambition.

    Lessons Learned

    • Offering too much customization for both the product/shopping experience would cause a lot of instability through a business perspective.
    • The UX process overall! I accounted for more features than I should have, which made testing difficult and iterating less efficient.

    Next Steps

    • There are a lot of custom UI elements, but I would like to learn if this is the best approach. Does this level of UI customization add/disrupt the customer experience?
    • Pace the process out more efficiently and improve my user testing and research skills. Set limits and always improve!