MACROS
eCommerce Website
MACROS is a healthy, chef-prepared meal delivery service. This project showcases the relaunch of MACROS website, including a complete redesign and rebuild. The basic brand style guide enabled me to propel the new design language forward freely. The new website included a dynamic ordering system, which was key in evolving the business model, attracting new customers and driving sales.
MY ROLE
Conducted discovery activities
Developed and maintained a design language across desktop and mobile devices
Created and executed User research, prototyping, UI design, testing
Championed developer collaboration
IMPACT
Achieved a 30% increase in user engagement
20% boost in sales, within the first 3 months post-launch
Website relaunch was crucial in securing the brand sale to v2Foods
Project Goals
Convenience for customers is key. MACROS set out to elevate the customers’ experience of purchasing ready-made meals by:
Re-platforming to Shopify Plus eCommerce ecosystem
Rebranding
Introducing flexible ordering options
The desired outcome is to widen the MACROS customer base and improve retention.
PROJECT DURATION
6 months to launch
2 months were allocated for UX and UI activities
01 Discover
Research
Many food delivery websites offer a variety of meals, but not all make it easy for customers to filter choices based on their diets and goals. Some brands only offer set subscription plans, while those offering a mix of subscriptions and one-time orders, can have confusing pricing structures.
The majority of MACROS customers are time-poor professionals. The customer experience on the MACROS website was adding unnecessary load on customer service teams to resolve issues. Recurring feedback highlighted:
Difficulty in managing frequent orders and upcoming orders
Unclear cut-off dates
Complexity in editing orders, due to website features
The research was conducted to gather vital insights into customers using competitor meal delivery services. I developed a user survey, capturing key takeaways on user experiences with those applications.
02 Define
User Personas
Starting with the strategy, I defined the MACROS brand and its target audience. This included identifying brand attributes and creating a brand statement. The company had made previous headway in gaining insights into its target audience. I consolidated and drew out key findings to form a user persona. This proved to be a key resource in guiding decision-making in the project.
03 Ideate
Information Architecture
Creating an Information Architecture for the site, I identified new features and implementations that tracked user behavior through multiple processes, during the testing phase.
Mid-Fidelity Wireframes
I used wireframes to establish and structure the functions of new features, beyond what was considered during my chosen user flows and architecture for the eCommerce site. Creating mid-fidelity wireframes provided the information needed for the upcoming user testing sessions. My collaboration with the engineers was crucial in identifying and resolving any conflicting or technical issues in the designs.
04 Test
User Testing & Feedback
With tight deadlines, I chose internal members who represented the target audience and performed efficient usability tests. I developed three key scenarios for customers to complete a journey. The findings proved invaluable, providing rich insight into the user's behavior.
I championed the importance of designs aligning with the user's needs. Initial research indicated clients found it difficult to manage their accounts. This stage was vital to improve the usability of key areas of the redesigned website.
Improvement: The hierarchy and order of information to make it easy for users to understand
Improvement: The user can now manage their orders with a consistent layout from what they see on the live site.
Visual Design
I implemented enhancements in components and layout, to accommodate User Interface principles, that adhered to legacy brand values and design principles.
See it in action
Design System
I used the atomic design approach, breaking down the design system into atoms, molecules, and organisms that could be built upon each other. The aim was to create a system that would be both efficient for designers to use and easy for developers to implement. This approach allowed me to create a flexible and scalable design system, with embedded future-proofing that could evolve with the client's changing needs.
