Communicating Weekly's Value

Homepage Redesign for a zero-waste online circular supermarket

Communicating Weekly's Value

Homepage Redesign for a zero-waste online circular supermarket

Communicating Weekly's Value

Homepage Redesign for a zero-waste online circular supermarket

Overview

Weekly is an online circular UK-based start-up providing customers with fresh groceries, packaged in reusable containers and delivered to their doorstep.

Their mission is to eliminate single-use plastic from customers’ regular shop.

The founders have built a new flexible subscription engine and are expecting to onboard their first customers in the immediate future.

They want to redesign the homepage to better reflect the brand ethos, differentiate themselves from established supermarkets and bring clarity to the product offered.

Industry

Online Grocery / Food Tech

Project

Homepage Redesign

Team

Monica Cooke

Paul Cooke (Founder & CEO)

My Role

UX/UI Designer

Timeline

1 week design sprint

Weekly.shop old homeage
Weekly.shop old homeage
Weekly.shop old homeage

Challenge

The current homepage actively collects emails from early customers interested in joining a waiting list while delivering essential information about the service.

Our challenge was designing navigation in the absence of an exhaustive list of products and communicating what problem Weekly solves, who is the target audience, and what are the main benefits.

Outcome

The new homepage features a responsive design, clearly communicating Weekly's mission to eliminate single-use plastic from grocery shopping and highlighting it's convenience, affordability and impact.

We will measure the success of the homepage redesign by tracking the bounce rate, average session duration, conversion rates and click-through rate and will update this case study as soon as the platform is live and tracking analytics.

Weekly.shop new redesigned homepage on a desktop and mobile
Weekly.shop new redesigned homepage on a desktop and mobile
Weekly.shop new redesigned homepage on a desktop and mobile

5 User Interviews revealed

5 User Interviews

  • customers have limited awareness of eco-friendly products and their knowledge is often restricted to big brands such as Method and Ecover

  • customers felt sustainable means more expensive but are willing to accept paying a premium

  • customers felt there was too much packaging involved with online deliveries and loved businesses that collected back their packaging (Able&Cole, Modern Milkman)

  • customers have limited awareness of eco-friendly products and often restricted to big brands such as Method

  • customers felt sustainable means more expensive but are willing to accept paying a premium

  • customers felt there was too much packaging involved with online deliveries and loved businesses that collected back their packaging (Able&Cole, Modern Milkman)

3 Personas informed by research

3 Personas

  • Sarah, the sustainability advocate and a regular in her local zero-waste shop

  • Brian, the busy working parent who wants to make eco-friendly choices and is motivated by leaving a better place for his children

  • Lisa and Jeff, the elderly couple who want both quality and waste-free groceries, but struggle to travel to the local refill shop.

a user persona called brian and his characteristics and background
a user persona called brian and his characteristics and background
a user persona called brian and his characteristics and background

Brian became the main actor as he represented a segment where we were most likely to drive significant conversion rates.

Insights from exploring refill shops

  • offering a wide range of products is important to customers

  • people actively look for recognisable brands

  • displaying an affordable product next to a mid-range one helps people anchor and facilitates decision-making, especially when having to fight the perception that sustainability is more expensive.

a lady filling her containers at t a refill shop
a lady filling her containers at t a refill shop

The Information Architecture struggles of online grocers

We looked at direct and indirect competitors’ homepages like Milk & More, Ocado, Sainsbury’s, Modern Milkman, Able & Cole, Riverford, Odd Box, Gousto, Hello Fresh as well as online shops exclusively focused on refillable.

The bigger supermarkets jumped straight into showing available products, skipping the value proposition. They have layers of cluttered navigation, overwhelming the customers. The search box is prominently displayed as if to make up for poor information architecture. 

a collage of online grocers homepages
a collage of online grocers homepages
a collage of online grocers homepages

Sainsbury’s homepage is not responsive, rendering it inaccessible on mobile devices.

Ocado's use of red, alongside three other brand colors, makes for a distracted customer. The small font size used for navigation poses readability challenges, raising concerns about accessibility. The top navigation bar offers at least five different actions, lacking visual hierarchy and overwhelming the user with competing elements.

Able&Cole and Riverford feature strong branding and visually appealing designs. Their large call-to-action buttons encourage users to "start shopping," "sign up," "read more," and "explore our store" as they scroll down the page.

Milk&More adopts a minimalist approach, focusing on promoting select categories. In contrast, Modern Milkman emphasizes environmental impact through simplified navigation and a strong mobile-first design, featuring tiled product categories.

a picture of different versions of what the homepage could look like
a picture of different versions of what the homepage could look like
a picture of different versions of what the homepage could look like

What we took to ideation

  • simple and clear navigation

  • clear CTAs strategically placed to drive conversion rates

  • clear value proposition to drive user engagement

  • emphasise affordability

  • display stocked brand logos to convey a sense of trustworthiness, reducing uncertainty and hesitation.

Copy becomes a determining factor in translating what the product is.

Gathered feedback from stakeholders on the mid-fidelity design (pictured below) revealed business constraints that meant the 'Blog" and "Brands we stock" sections would be removed for now and reconsidered on the next iteration as rendered resource intensive. We would focus on a minimum viable product.

a picture of the initial low fidelity design of Weekly's homepage
a picture of the initial low fidelity design of Weekly's homepage
a picture of the initial low fidelity design of Weekly's homepage

People struggle to understand how it works.

I conducted usability testing with four users and went trough three iterations of the high-fidelity prototype. Given the scope of the project was just the Homepage we decided testing the hi-fidelity design would be most beneficial. This allowed us to test for sentiment and visual design as well.

Users liked the design and complimented the clean look and brand colours. When asked what they think of the navigation bar product categories, they said it was straightforward and didn't think they would have trouble shopping for products.

We found that there was still quite a lot of confusion about how it works and what they should expect from a delivery.

People thought the groceries were going to be delivered in crates, and were confused when they read containers and bags further down the page.

We discovered new pain points as pointed out by the users. With other online deliveries there's pressure to unpack the groceries at the door and return the plastic bags or you have to run big dirty plastic crates up the stairs in a hurry to return them to the driver.

We incorporated this newly discovered pain points by translating them into benefits of shopping with Weekly.

It became clear we needed to revise the copy to better translate the experience.

a Before/After picture of the "benefits of shopping with weekly shop"
a Before/After picture of the 'How it Works' section
A picture of the redesigned reviews sections
A picture of the redesigned reviews sections

I designed the mobile version at the same time as the desktop.

Takeaways

This project validated the value of using copy that is centred around a person’s core motivation, and I look forward to applying this learning in my future designs.

I also learned to work within business constraints, prompting me to adapt my approach and communication strategies to foster better collaboration and alignment between design and development teams during handoff.

Launch Figma Prototype

Let's speak!

Please get in touch if you are interested in working together or just to say hello!

monicaacooke@gmail.com

Let's speak!

Please get in touch if you are interested in working together or just to say hello!

monicaacooke@gmail.com

© Monica Cooke, 2024