Project Overview

Critters was created as part of a project prompt for my Google UX Certificate. The prompt was assigned at random and I was instructed to, "design a specialized mobile app for a pet food delivery service." The design was inspired by Instacart, but focusses on pet food, products and services.

Tools

Sketch, Marvel, Adobe Illustrator, InVision, Anima, Photoshop

Role

Sole project contributor

Duration

12 weeks (120 hours)

VIEW PROTOTYPE

Research

This project consisted of both primary and secondary research, not just at the beginning, but at every stage. When working on a project I like to understand the full scope, from extensive market research to the science behind the UX or UI decisions made on similar platforms. The research plan for this project initially was to better understand the pet food industry, the digital products available and how Critters potential users currently buy pet food. The main objective was to use this data to discover areas where an app based pet food delivery service could improve potential clients current purchasing habits.

01

The first research stage consisted of extensive market research to understand the existing platforms that offer the digital sale of pet food and products. Understanding the existing services and features that are available was important for product strategy, design planning and ideation.

Secondary Research

Market Research Plan

Competitor Research Analysis

I went into the project thinking that the market opportunity for this app would be in creating a niche pet food prescription service. However, after analysis of competitors, this proved to already be a feature successfully implemented by several large pet food companies. This early stage research proved essential for pivoting the original value proposition in a completely different direction.

Changing the design question

In order to differentiate this app, I wanted to offer something not currently available. This modified the questions I needed to ask in the next research stage to better understand the potential customer and create a product to accomplish my goals.

02

Reframed Design
Question

How can we create new solutions for pet owners with a same day delivery app?

03

The initial primary research for this project was through interviews and questionnaires with individuals who own pets. The goal was to better understand how these potential users currently buy pet food and discover areas that an app based pet food delivery service could improve. Analysis of initial interview data confirmed the primary target audience as busy working professionals who don’t have as much time to shop for pet food.

Primary Research

Bridging mental models

However, further analysis also revealed that there are additional common pain points that make buying pet food harder. Some of these commonalities were prescription/specialty pet foods, pricing and delivery scheduling to make sure they are there to receive the package. Other pain points for younger users involved the current interface options and lack of primary mobile based app options for pet food delivery.

1.1 The User

To better understand the potential users of the app, I created personas, empathy maps, early journey maps and problem statements. The primary user became Samantha, a working nursing student between the age of 25-35. She is very tech savvy and would benefit from an Instacart type interface for pet product delivery. She is not married and is able to spend some of her ancillary income on her pet. As a busy nursing student who is often left exhausted and short on time for last minute dog food runs, a small delivery or tip charge is worth the few extra hours of sleep. You can view all three main personas below.

Design Iteration

After taking all the initial data collected and looking over the design requirements, brainstorming began with a two day design sprint. Sketches and millions of sticky notes eventually were narrowed down into the first mobile and desktop interface drawings. For the purpose of this build I focused only on the customer facing interface. If the full build were to be completed there would need to be a shopper interface as well as a custom cms built for managing the back end of the app.

01

The earliest app testing was done using interactive screen sketches put into marvel. Three potential users were asked to test the mobile checkout process and give feedback.

This valuable usability critique gave me a starting point for additional options to add to the next round of layout revisions.

Sketches & Concept Validation

“I wish there was a “shop by pet,” option on the bottom navigation instead of aisles."

"I'd like another way to get to your cart besides the top cart button.”

02

Scope & Mapping

In order to get the big picture, to scale a potential full build, I created site maps of the landing page as well as the main dashboard of the mobile and desktop app. Then I decided to map the key user flows to better delineate the screens I would need to make for an initial interactive prototype.

The user flow and wireframe mapping gave me a detailed idea of how the interface would function given the use cases I wanted to prototype and also, what screens needed to be built to complete the task flows.

Final Design Solution

Before starting the high fidelity screens I created a UI style guide to function as a visual map for various interface states as well as delineate the use of color, text and brand elements. Finally, I created use cases with motion design. Below are design solutions created for our main app user, Samantha.

01

Use Case & Justifications

SCENARIO

Samantha decides to try Critters for the first time and place the order from her mobile phone at work.

STEP 1

Samantha opens the Critters app for the first time and explores the main dashboard after using a Facebook social sign-in option.

FEATURES USED

Social sign in and auto location setting with one click approval.

JUSTIFICATION

86% of users report being bothered by having to create new accounts, especially when trying a new product.

Social sign-in is not just beneficial to the user, it’s proven to boost engagement and customer conversion rates.

STEP 2

Samantha decides to look for her dogs favorite food and add it to her cart.

FEATURES USED

Search with predictive text/autocomplete.

JUSTIFICATION

According to google, autocomplete on average reduces typing by about 25 percent. It is especially useful for those using mobile devices, making it easy to complete a search on a small screen where typing can be hard. For both mobile and desktop users this feature saves a lot of time and hassle.

STEP 3

Samantha goes through her first in app purchase.

FEATURES USED

Checkout feature that allows the customer to select an alternate option if the store is out of their first choice. Auto location and saved card settings.

JUSTIFICATION

The item replace feature allows the user to select replacement options ahead of time, which means less confusion and time saved for both the customer and shopper.

Key Takeaways

Due to the size of this project, the initial high fidelity prototype includes only major screens of the app interface. After meticulously building this prototype from UX research to high fidelity UI mock-ups, I can firmly say that each stage of the build was essential when it came to creating a successful product.

Project Overview

Tools

Role

Duration

Research

01

Secondary Research

Market Research Plan

Competitor Research Analysis

Changing the design question

02

Reframed DesignQuestion

How can we create new solutions for pet owners with a same day delivery app?

0​​3

Primary Research

Bridging mental models

1.1

The User

Design Iteration

01

Sketches & Concept Validation

“I wish there was a “shop by pet,” option on the bottom navigation instead of aisles."

"I'd like another way to get to your cart besides the top cart button.”

02

Scope & Mapping

Final Design Solution

01

Use Case & Justifications

SCENARIO

STEP 1

Samantha opens the Critters app for the first time and explores the main dashboard after using a Facebook social sign-in option.

FEATURES USED

Social sign in and auto location setting with one click approval.

JUSTIFICATION

86% of users report being bothered by having to create new accounts, especially when trying a new product. Social sign-in is not just beneficial to the user, it’s proven to boost engagement and customer conversion rates.

STEP​ 2

Samantha decides to look for her dogs favorite food and add it to her cart.

FEATURES USED

Search with predictive text/autocomplete.

JUSTIFICATION

According to google, autocomplete on average reduces typing by about 25 percent. It is especially useful for those using mobile devices, making it easy to complete a search on a small screen where typing can be hard. For both mobile and desktop users this feature saves a lot of time and hassle.

STEP 3

Samantha goes through her first in app purchase.

FEATURES USED

Checkout feature that allows the customer to select an alternate option if the store is out of their first choice. Auto location and saved card settings.

JUSTIFICATION

The item replace feature allows the user to select replacement options ahead of time, which means less confusion and time saved for both the customer and shopper.

Key Takeaways

Reframed Design
Question

03

86% of users report being bothered by having to create new accounts, especially when trying a new product.

Social sign-in is not just beneficial to the user, it’s proven to boost engagement and customer conversion rates.

STEP 2