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
Service
Service
How might we provide quality local groceries in a contactless delivery environment?
Service
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.
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
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
EXISTING SHOP & CHECKOUT PROCESS
UPDATED SHOP & CHECKOUT PROCESS
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
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
