Overview

This case study focuses on designing Dairy Drop, a flexible subscription-based milk delivery service aimed at busy millennials and Gen-Z consumers. The primary challenge was to create a flexible subscription feature that allows users to easily select their preferred milk and have it delivered to their doorstep. Utilizing the double diamond methodology—Discover, Define, Develop, and Deliver—the project culminated in a user-friendly, visually appealing mobile app with robust e-commerce capabilities and an intuitive milk subscription feature.

Project Period

4 months

My Role

UI/UX Designer
Role Activities: Data Gathering, Competitive Analysis & Comparative Matrix, Research (Qualitative & Quantitative), User Personas, Empathy Mapping, Wireframing, A/B Testing, Information Architecture, UI/UX Design and Prototyping
Tools: Figma, Notion, Adobe Illustrator, Adobe Photoshop, Adobe InDesign
Collaboration: Research, User Flow validation and A/B testing, were conducted in group workshop settings to gather broader insights and validate design decisions.

🐮 the Client

Dairy Drop is a subscription-based service that delivers organic, ethically sourced dairy and non-dairy products directly to consumers. Their goal is to serve their customers with a subscription-based dairy (and non-dairy) delivery service that allows customers to receive regular deliveries of selected products.

🐮 the Client

Dairy Drop is a subscription-based service that delivers organic, ethically sourced dairy and non-dairy products directly to consumers. Their goal is to serve their customers with a subscription-based dairy (and non-dairy) delivery service that allows customers to receive regular deliveries of selected products.

Client Requirements

1. Subscription Management
2. Product Catalogue
3. Payment Gateway
4. Delivery Scheduling
5. Order Tracking
6. Customer Support

💭 the problem

How can Dairy Drop provide a convenient solution for busy customers?

Time-consuming grocery trips and finding preferred dairy products can be challenging. With inefficient delivery services for specific products and limited subscription options for recurring grocery items, there's a clear gap in the market to overcome these barriers and provide a seamless customer experience.

🎯 the solution

The solution for Dairy Drop is a mobile app that provides a convenient way for their customers to receive their dairy and non-dairy products.

The app streamlines ordering, delivery, and subscription management, addressing the challenges of time-consuming shopping and inefficient delivery processes while streamling the cutomer experience.

Double diamond model

The Double Diamond is a design process model that consists of the Discover, Define, Develop and Deliver phases. This model is widely used in design thinking to ensure a user-centered approach.

Double diamond model

The Double Diamond is a design process model that consists of the Discover, Define, Develop and Deliver phases. This model is widely used in design thinking to ensure a user-centered approach.

DISCOVER

Competitive analysis

In this phase, a competitive analysis involves similar products in the market to help understand the competitive landscape. My colleagues and I identified four key players Mr.Dairy, The Organic Box, Fairlife and Mama Earth.

comparative matrix

A comparative matrix is used to compare competitor features side by side and analyze how they can be improved.

DEFINE

In the Define phase, qualitative and quantitative research, user personas and empathy maps help understand the user's needs and perspectives.

research and user personas

01
💬 Qualitative Research & Persona

A qualitative persona is developed based on non-numerical data. This is the primary research method used which involved user interviews and observations to validate assumptions.

02
📑 Quantitative Research & Persona

A quantitive persona is created using numerical data like statistics and other measurable attributes. This data-driven persona is used as secondary research.

📑 Quantitative Empathy Map

I used the quantitative data to guide an empathy map to ensure it reflects broader user behaviour rather than just a few individual experiences.

Develop

Where the defined user needs and research insights are developed into a tangible design solution.

Information architecture

Building on insights from the Discover and Define phases, I analyzed the competitor and user needs to prioritize features and establish a clear hierarchy for the information architecture.

Validated user flow

During the interview with Millie, I observed that she immediately explores all options available on the bottom menu of the test prototype. In the validated user flow below I ensured that users are always guided back to their objective of ordering milk.

User Task: Subscribe to have skim milk delivered on a weekly basis.

Low fidelity & Mid fidelity wirefames

a/b testing

During the low fidelity wireframe sketching phase, I explored several design concepts and narrowed it down to two. These were then used for A/B testing.

7/7 Testers Preferred option B!

midfidelity wireframing

Competitive analysis

In this phase, a competitive analysis involves similar products in the market to help understand the competitive landscape. My colleagues and I identified four key players Mr.Dairy, The Organic Box, Fairlife and Mama Earth.

comparative matrix

A comparative matrix is used to compare competitor features side by side and analyze how they can be improved.

DEFINE

In the Define phase, qualitative and quantitative research, user personas and empathy maps help understand the user's needs and perspectives.

research and user personas

01
💬 Qualitative Research & Persona

A qualitative persona is developed based on non-numerical data. This is the primary research method used which involved user interviews and observations to validate assumptions.

02
📑 Quantitative Research & Persona

A quantitive persona is created using numerical data like statistics and other measurable attributes. This data-driven persona is used as secondary research.

📑 Quantitative Empathy Map

I used the quantitative data to guide an empathy map to ensure it reflects broader user behaviour rather than just a few individual experiences.

DEVELOP

Where the defined user needs and research insights are developed into a tangible design solution.

Information architecture

Building on insights from the Discover and Define phases, I analyzed the competitor and user needs to prioritize features and establish a clear hierarchy for the information architecture.

validated User FLow

During the interview with Millie, I observed that she immediately explores all options available on the bottom menu of the test prototype. In the validated user flow below I ensured that users are always guided back to their objective of ordering milk.

User Task: Subscribe to have skim milk delivered on a weekly basis.

Low fidelity & Mid fidelity wirefames

a/b testing

During the low fidelity wireframe sketching phase, I explored several design concepts and narrowed it down to two. These were then used for A/B testing.

7/7 Testers Preferred option B.

mid fidelity wireframes

deliver

the design solution

In the final Deliver phase, I created high fidelity wireframes and a prototype of the solution for Dairy Drop showcasing the final design.

case studyprototype

ECommerce

The Diary Drop app features an e-commerce platform with categorized sections for various milk products. Users can easily browse for their preferred items, streamlining the shopping experience.

Easy Subscribe

The product page offers a clear, user-friendly design, allowing users to subscribe or add items to the cart. They can easily adjust quantity and frequency, ensuring a seamless shopping experience.

Flexible Subscription

The Dairy Drop checkout flow allows users to adjust quantity and frequency effortlessly, ensuring orders meet their needs. This streamlined process makes managing subscriptions and purchases simple and convenient.

Order Tracking

The app's order tracking system provides real-time updates and notifications, keeping users informed from dispatch to delivery for a transparent and reliable experience.

the design solution

In the final Deliver phase, I created high fidelity wireframes and a prototype of the solution for Dairy Drop showcasing the final design.

ECommerce

The Diary Drop app features an e-commerce platform with categorized sections for various milk products. Users can easily browse for their preferred items, streamlining the shopping experience.

Easy Subscribe

The product page offers a clear, user-friendly design, allowing users to subscribe or add items to the cart. They can easily adjust quantity and frequency, ensuring a seamless shopping experience.

Flexible Subscription

The Dairy Drop checkout flow allows users to adjust quantity and frequency effortlessly, ensuring orders meet their needs. This streamlined process makes managing subscriptions and purchases simple and convenient.

Order Tracking

The app's order tracking system provides real-time updates and notifications, keeping users informed from dispatch to delivery for a transparent and reliable experience.