Collaborators
Product Owner : Aga Switala
Lead Design : Lee Merricks
Developer : KPS
Introduction
Milk and More, a longstanding leader in artisan doorstep delivery services, embodies sustainability and quality with its eco-friendly practices and premium produce sourced from top brands across the UK and Europe. Delivering overnight multiple times a week. Blending convenience with freshness.
Originating over 40 years ago as Dairy Crest, the company underwent transformation upon acquisition by Müller four years ago. Despite its storied history, Milk and More faces a modern challenge: an outdated website, a relic of ad hoc construction, impeding its ability to offer a seamless user experience in line with its premium offerings.
Main Objectives
In collaboration with Milk and More, our objective was clear: conduct a comprehensive UX audit of their existing website and modernize it. All while instilling new ways of working by adopting agile principles and and moving away from their exsisiting waterfall approach.
To achieve this, we initiated research using Google Analytics, Hotjar, and customer surveys to gain valuable insights from Milk and More's existing user base. Targeted surveys were conducted among the top 250 users to identify friction points and validate suspicions regarding website usability issues. Additionally, we performed a thorough competitor analysis to understand the landscape and identify areas for improvement in comparison to competitors' offerings. We had a look at features from our competitors and identified opportunities where we could potentially improve our offering.
Through our friction map survey we pinpointed significant challenges surrounding understanding the basket and delivery schedules, along with navigating the checkout process. Users expressed particular difficulty in managing orders already placed to align with their individual schedules. These insights underscored the need for a streamlined CX and clearer communication to enhance the user experience and ensure seamless order management.
Challange
The challenges facing Milk and More were multifaceted. Firstly, the company relied heavily on an external development team, resulting in fundamental issues and inconsistencies in website features due to the absence of in-house design resources and oversight.
Transitioning from a waterfall to an Agile methodology presented its own set of hurdles. Simplifying the website for users aged 45 and above while simultaneously targeting a younger demographic under 35 posed was also key. Furthermore, the absence of a structured design handover process from developers led to inconsistency and inefficiency, highlighting the need for a scalable design system. We mapped out the all the current user journeys of the platfrom and aimed to minimise the amout of steps it took to do various actions.
Ideation Workshops
To address these challenges, we conducted series workshops with key stakeholders to map out a comprehensive plan for website improvement. Leveraging insights from gathered data, we drafted ideas and wireframes for prototype development. Through a series of four mobile first design sprints, we created and tested three separate prototypes, addressing user confusion regarding delivery schedules and product categorization within the basket.
Our focus centered on optimizing the basket and checkout system, a critical area identified for improvement due to the frequency and complexity of food deliveries. Additionally, we identified a common user behavior of immediately accessing account settings upon landing on the home site, signaling a need for improved organization and accessibility within the account section.
Prototypes and User Testing:
Adopting a mobile-first approach, we tested prototypes with both existing and new users across mixed age demographics in live and online settings, including video call focus groups.
Incorporating user feedback into iterative prototype changes after each testing round was instrumental in refining our designs. Final changes were implemented based on insights from user testing sessions, preparing us for the detailed design implementation phase.
Design System
To ensure scalability and ease of editing, I developed a comprehensive design system using atomic design principles. This allowed for quick prototyping and testing of various states and screen sizes, ensuring full responsiveness across devices.
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The design systam had to scalable easily editable as there was planned brand update in the works for the year following this product update.
Agile Development
Our agile development approach focused on delivering incremental improvements to the website through two-week development cycles. Utilizing feature flags, we selectively rolled out new features to a staging environment for testing, gradually introducing them to the live website to minimize disruptions.
Thorough testing of each feature before merging into the final website version ensured stability and functionality. This staged development approach, coupled with leveraging the staging environment for comprehensive testing, facilitated quicker project delivery while minimizing testing efforts.
Navigation
The first significant change implemented was in the navigation system. On desktop sizes, the navigation structure posed challenges, often stacking up to six rows high and and taking up large amount of screen space.
The goal was to optimise the layout to reduce clutter. Through the implementation of a responsive design, the desktop navigation was streamlined, occupying less than half the original space. On mobile devices, the search function was prioritized to enhance product discoverability, offering users quick access to their accounts. Redundant elements were eliminated from the mobile navigation, ensuring a seamless and intuitive browsing experience. Additionally, a separate navigation design was crafted specifically for smaller devices, further enhancing usability across various screen sizes.
Adding Products
When users added products to their basket and proceeded to select delivery options, they encountered an issue where clicking "Add" would redirect them to the basket page with an error prompt. This forced users to input delivery specifications manually, lacking default order settings such as frequency preferences.
User were presented with a large calendar interface which occupied most of the space, despite research indicating that over 95% of users preferred the closest delivery date. In response, the updated designs defaulted to the nearest delivery date, aligning with user preferences. We also recognised that 93% of users placed weekly orders, the system was refined to default to weekly deliveries with a single product, commencing on the nearest available start date. The primary color blue was selectively used for interactive elements, enhancing user engagement. Additionally, both one-off and regular order options were integrated into a single setting, streamlining the user experience compared to the previous approach requiring users to select from two distinct CTAs on product cards.
Basket
The previous basket design featured a mini cart that displayed excessive information by default, much of which was redundant for new users. Details such as immediate payment requirements for orders placed before the payment schedule and information about regular orders cluttered the interface.
Users couldn't edit items directly within the mini cart, needing a visit to the basket page for any modifications. To streamline the user experience, we opted to remove the mini cart entirely and consolidate all relevant information into the basket page. On the previous basket page users would be presented with an itemised list of products and could make edits to certain options but but not others. this would require them to need to remove products then try to find them again and re-add them with their new settings. The itemised product approache lead to confusion regarding the schedule upcoming deliveries.
In response, we shifted to a delivery-led approach, presenting users with a clear overview of upcoming deliveries and allowing them to adjust frequencies, remove products, or edit start dates directly from this page. By prioritizing essential information and utilising tooltips to provide additional context where needed, we ensured that users could efficiently manage their orders without unnecessary clutter or confusion. Additionally, we streamlined the presentation of payment details, providing clarity on immediate payment requirements for specific products ordered before the cutoff period.
In response, we shifted to a delivery-led approach, presenting users with a clear overview of upcoming deliveries and allowing them to adjust frequencies, remove products, or edit start dates directly from this page. By prioritizing essential information and utilising tooltips to provide additional context where needed, we ensured that users could efficiently manage their orders without unnecessary clutter or confusion. Additionally, we streamlined the presentation of payment details, providing clarity on immediate payment requirements for specific products ordered before the cutoff period.
My Account
In the previous account section, users were presented with 11 tiles leading to various preferences and settings, many of the settings seemed similar leading to confusion. The left-hand side displayed identical categories in a different visual style, which again took up unessesary space. lots of user journeys would hit a dead end on thsi page even though it was our second most popular location after our homepage.
With no avenue to discover new products or promotions, user engagement suffered, and users basket spend often remained stagnant. Many categories could have been consolidated, such as details, address, marketing preferences, and password reset. The distinction between my deliveries and my regular items added to user confusion. To streamline the user experience, we consolidated categories into four simple sections: my orders, skip deliveries, my details, and my transactions. Highlighting the next delivery at the top of the page and showcasing upcoming offers incentivised users to explore further. Additionally, we introduced a referral program to this page rather than in its own section allowing users to refer a friend for discounts, facilitating user acquisition while rewarding existing customers.
Final Designs
Results
6 Month redesign
Research, design and implemention
Agile working
Implemented company wide agile ways of working
2 week results
new features and implementaion every 2 weeks