Alpenrose Dairy Grocery Delivery App

The Modern Milkman was reborn out of necessity in a Covid era for this local ailing dairy farm. Pivoting to add a grocery delivery to its services, the app redesign aims to improve the usability, desirability and brand experience of the product.

Role

UI/UX Design

Client

Alpenrose Dairy

Type

Self Project

Duration

3 weeks

Service

Service

Alpenrose_Mockup_sm.jpg

Service

Service

Service

How might we provide quality local groceries in a contactless delivery environment?

iPhone 11_Mockup_Alpenrose_Home.png
iPhone 11_Mockup_Alpenrose_ZipCode.png
iPhone 11_Mockup_Alpenrose_Shop.png
iPhone 11_Mockup_Alpenrose_Item.png
iPhone 11_Mockup_Alpenrose_MyMilkman.png

THE CHALLENGE

 

Improve the overall user experience and app usability

 

The first generation app needed drastic UX improvement. It was riddled with long copy blocks, stagnant tone of voice and usability was low. With confusing user flows, terminology inconsistent and frustrating check-out, I sought out to create a better experience.

The high level goals were to:

  • Improve usability of the app

  • Enhance user control

  • Simplify visual design 

  • Create cohesion within the product photography

  • Establish a user friendly app the customer enjoys

 

 

THE SOLUTION

 

A clean and modern interface with easy to update delivery options

 

The solution was to increase usability and desirability within the interface through laser focused analysis of the product. Creating diagrams of user flows and interpreting the pain points, my goal was to create clarity within the shopping and checkout experience.

 ANALYSIS STRATEGY: 3 PHASES

 

SIGN-UP

Log in and sign up experience,
delivery area confirmation

 

SHOP / CHECKOUT

Product search and recurring delivery control

 

DELIVERY

Physical delivery, brand appearance, notifications

 REDESIGN PARAMETERS

 

MUST HAVES

User account

Delivery area confirmation

Shop page/categories

Checkout/Cart

 

USER CONTROL

Recurring delivery user control

 

On Demand, Weekly and

Bi-weekly Delivery

USER JOURNEY

Know thy user

 

From excitement to disappointment, the user journey is followed through all touchpoints including social media, downloading the app, app user flows, brand experience and lastly finally delivery and service followup. 

Alpenrose_JourneyMap

SECTION ONE: THE SIGN UP PROCESS

Don't interrupt my shopping experience

Interrupting the user’s shopping flow is a negative experience. Sign up should be flexible and either start at the beginning or end of the shopping process.

 

INSIGHTS

  • Complicated sign-up process

    • The signup process was convoluted with too many entrances for signing up through, both interrupting the shopping flow.

  • UX Language: Inconsistent Verbiage

    • The language is inconsistent throughout the sign-up process. Different versions of the same meaning are strewn throughout the app, making for a disjointed experience.

 

  • UX Language: Tone of Voice

    • The overall tone of voice during error messages and headlines are dry and too long. 

 

  • Landing Prompt

    • After sign up, the user is met with a screen full of greyscale instructions. This is not needed and dilutes the category page impact.

EXISTING SIGN UP FLOW

EXISTING SIGN UP PROCESS

UPDATED SIGN UP FLOW

UPDATED ONBOARDING PROCESS

1_Home_GetStarted.jpg
2_Get Started.jpg
3_ZipCode.jpg
5_Location_Map_2_Hover.jpg
6_Location_Map_3.jpg

SECTION TWO: THE SHOPPING/CHECK-OUT PROCESS

Don't make me think

 

Convoluted shopping experiences start with disjointed categories, poor navigation and abysmal search functionality.

  • Search Function: Apply best practices

    • The language is inconsistent throughout the sign-up process. Different versions of the same meaning are strewn throughout the app, making for a disjointed experience.

 

  • Product Categories

    • With over 16 categories to choose from with cross over products in some, this can be streamlined to be more efficient browsing.

 

  • Filters: Return relevant results

    • Filters are arguably the most important way to sift through a warehouse full of product. Applying a different category specific filtering system and sorting function is necessary.

  • Product Page

    • Removing unnecessary items like reviews and instructions on the product page would provide the item page to focus on the primary product. The customizability of delivery frequency is a major pain point with no choice for a one time purchase.

 

  • Confirmation: Product Page

    • The visual design of the confirmation page could be revised to have more impact. Alternatives for the language “standing order” should be looked into and the button color reads as disabled currently.

 

  • After Purchase

    • Significant pain points occurred after purchase within the Order History and Cart experience. Terminology and visual layout is convoluted, leaving the user frustrated and confused. Unsubscribing from service is also nowhere to be found.

EXISTING SHOP & CHECKOUT FLOW

Shop_User Flow Analysis.png

EXISTING SHOP & CHECKOUT PROCESS

UPDATED SHOP & CHECKOUT PROCESS

10_Item_Spinach.jpg
18_Cart_CheckOut.jpg

PROTOTYPE

SECTION THREE: DELIVERY SERVICE AND BRAND IMPRESSION

The Modern Milkman delivery

 

Alpenrose's idea of the Modern Milkman has great brand potential. Nostalgia coupled with delivering goods from local businesses is an idea that many locals can get behind.​

  • Physical Delivery:

    • The touchless delivery was excellent though timing on box drop off and first delivery could be improved. Alpenrose gave a small bag of coffee with the box drop off, which was appreciated but confusing as there was no communication around this gift.

 

  • Brand Impression

    • The box was excellent quality with good branding. It was weatherproof, but not tamper proof. Overall, great first brand impression.

 

  • Notifications

    • Phone notifications were sent to alert the delivery was completed and left the user satisfied with knowing when to pick up the products outside.​​

DELIVERY & BRAND IMPRESSION

1/1

CONCLUSION​

Drastic UX improvement needed to be viable longterm

 

The brand and product potential for Alpenrose Dairy Grocery Delivery has potential to be a fun nod to The Milk Man nostalgia while providing quality local products, but Alpenrose has a long way to go before providing a great app experience.

 

Results were:

  • Figma prototype

  • 20 screens

  • 3 user flows

  • 1 user journey

  • 2 usability tests

 

Personal highlights were:

  • Complete end to end experience assessment

  • Service analysis

  • Retouching 26 photos