Modern Milkman UI
Design System and Milkround Builder
Role: Senior UI Designer
01
UI Design
Design System
I led the development of the UI design system for the Modern Milkman app and website, prioritising WCAG standards for accessibility. I then rolled out the UI kit to developers who built the React components in Storybook, this was an efficient way of collaborating and testing, especially for any edge cases.
This project showcases my commitment to accessible and user-centric design, as well as my ability to collaborate across disciplines to ensure a smooth design-to- development transition. Below you can see parts of the design system and a recent MVP project for a new 'Milkround builder' within the app and website.
02
Milkround Builder
The Milkround Builder
Addressing a crucial customer pain point, our team recognized the need for an improved onboarding journey within the app and website. Often, customers found themselves uncertain about what to order and in what quantities. To alleviate this, we innovatively devised a "milk round builder" feature. This tool not only facilitated a seamless first-time purchase but also encouraged customers to set up repeat orders, effectively enhancing their overall user experience. Our solution aimed to empower users with the confidence and convenience they needed to make informed choices, transforming the onboarding process into a more user-friendly and engaging journey.
UI design enhancements I made compared to the original wireframes:
Firstly, I introduced a more intuitive user journey by incorporating numbered steps, which serve as a guide and provide users with a clear sense of progress, effectively reducing any potential anxiety. Additionally, I utilised a disabled design for future steps (which adhere to WACG standards), ensuring users are well-informed about what comes next and how much remains.
Secondly, on desktop, I introduced a split-scroll page layout to maintain the visibility of the shopping basket while users explore numerous product categories on the left. This design choice allows users to easily track and view their selected products as they progress through the steps, all conveniently displayed in the side basket to the right. On mobile devices, this information remains accessible, typically positioned as a sticky basket on the screen for a seamless user experience.
