I chose New World because its website and app showed a common problem in mature digital products. Different design periods were living together. Navigation, type scale, search patterns and component styling were not always consistent across desktop and mobile.
I treated the project as a system reconstruction task. The focus was to understand why the interface felt fragmented, which decisions were repeated without clear rules, and how those decisions could become a more usable design system.
ClientMUXD Course Work
RoleUX Researcher, Design System Designer, Microsite Designer
A familiar site, deconstructed for real this time.
New World's website was already familiar ground, a site visited often enough to notice its quirks. An earlier course assignment only skimmed its surface with an overview analysis. This project went further, pulling the interface apart like a scattered jigsaw puzzle, since no real design system files existed to reference. What emerged was a site caught between two eras, a newer dropdown-driven experience layered awkwardly over older breadcrumb navigation, with typography, colour and component patterns drifting out of sync across desktop and mobile.
Problem
Two eras of design decisions, living side by side with no shared rules.
The main problem was not only that some UI elements looked inconsistent. The deeper issue was that New World's digital platforms lacked shared decision rules, so the same kind of choice, a navigation pattern, a type size, a search layout, was made differently every time it came up.
01
Mixed navigation
New and old patterns appeared together, making the design logic harder to follow.
02
Complex type scale
Many similar sizes made hierarchy harder to apply consistently.
03
Repeated search styles
Search patterns changed across product and store contexts.
How might we create a unified, scalable design system that helps teams work efficiently, while improving
clarity, accessibility and brand consistency across digital platforms?
Solution
Rebuilding from experience.
I used a reverse system approach. Existing interfaces were audited, recurring patterns were identified, and the system was rebuilt into foundations and core design elements.
This approach first moved backwards from complete pages, then moved forward again into reusable foundations, components and documentation.
Outcome
A structured Figma microsite for a clearer shopping system.
The final outcome was a structured design system microsite in Figma. The value was not only the visual result, but the process of analysing an existing product, abstracting repeated patterns and translating them into clearer design rules.
Feedback
Feedback confirmed that the system was clear enough to be read and applied.
"Your UX writing is clear and succinct, making complex ideas easy to understand."
"The Foundations section is detailed and well-considered."
"Tackling complex components like cards and search is impressive."
Process
From existing pages to system rules.
The process followed four phases. Each phase moved the project from visual evidence toward clearer design decisions.
The audit changed the question from visual inconsistency to missing decision rules.
I used findings to separate visible inconsistencies from deeper system problems.
Finding 01
Navigation patterns were mixed across website and app screens.
Finding 02
Typography sizes had overlapping roles and unclear hierarchy.
Finding 03
Brand colours were used without a consistent hierarchy.
Finding 04
Search changed across product, store and mobile contexts.
Finding 05
CSS styles showed redundancy and repeated decisions.
Finding 06
Some mobile patterns appeared inherited rather than refined.
Insight 01
Inconsistency
Navigation, typography and search patterns did not always share the same rules.
Insight 02
Redundancy
Overlapping styles and unused CSS colours made the system harder to maintain.
Insight 03
Divergence
Some interface elements moved across platforms without enough refinement for their context.
Principles and Scope
A focused system needed clear filters.
The six principles helped decide what to simplify, what to keep and what needed clearer documentation.
Consistency
Maintain uniform styles and behaviours across components.
Clarity
Present information and actions in a straightforward way.
Accessibility
Support people of all abilities and .
Inclusivity
Consider diverse user needs, backgrounds and contexts.
Simplicity
Keep interactions minimal without losing functionality.
Visibility
Make key information and actions easy to notice.
I made a deliberate scope decision. Instead of documenting every possible component, I focused on Search, Cards and Buttons because they carry the core online grocery flow.
Design
Foundations that could become a clearer token structure.
The original assignment did not produce a complete production token library. For this portfolio case study, I describe the work as a token ready foundation, supported by later thinking around primitive, semantic, element and responsive .
Information Architecture
The design system microsite was structured to provide clarity and logical flow. Based on the IA shown in the diagram below, the system is divided into three main sections. This hierarchy ensures users can easily navigate from conceptual understanding to practical implementation.
Component scope
The selected components, Search, Cards and Buttons, were chosen because they represent the core interactions in New World's online shopping flow: searching for products, browsing and selecting items, and taking action to purchase. By focusing on these high-impact elements, the system addresses the most critical user journeys while creating a scalable foundation for future components.
Colour System
Primary red, secondary purple and neutral support.
The colour system preserved New World's primary red and secondary purple, extracted here as the colours most relevant to the system story.
Brand anchors
Primary Red#E11A2Crgb(225,26,44)
Secondary Purple#571060rgb(87,16,96)
Ink#231F20rgb(35,31,32)
White#FFFFFFrgb(255,255,255)
Core scales
Red Light#FCD7D7
Red Base#E11A2C
Red Dark#CB1728
Purple Light#EEE7EF
Purple Base#571060
Purple Dark#460D4D
Feedback samples
Information#004085
Success#155724
Warning#856404
Error#721C24
Typography
Desktop and mobile scales documented as design evidence.
The supporting images below focus on the desktop and mobile scale decisions.
Icon System
Grid rules for consistent icon drawing.
The detail focuses on grid, padding and stroke rules.
Core Components
Component evidence for the main shopping journey.
I did not try to document every interface element. I focused on three components that carry the core online grocery journey: finding products, comparing product information and taking action to add or purchase items.
Search System
The entry point for product discovery.
Search needed to support product discovery, store finding and responsive use cases. The documentation focused on anatomy and result behaviour.
Component details
Search evidence
Card System
A repeatable structure for product decisions.
The card system clarified how product image, price, unit detail and actions should work together in a dense grocery interface.
Component details
Card evidence
Button System
States and hierarchy.
Button documentation covered hierarchy, variants, states and platform behaviour. The evidence images show how the system defined action emphasis.
Component details
Button evidence
Documentation and Variables
A microsite designed as a handoff tool.
Each component page included anatomy, usage guidance, responsive behaviour, interaction states and accessibility considerations. I wanted the microsite to work as a handoff tool, not only a visual presentation.
were an important learning direction. They helped frame how colour, typography and spacing could become more parameterised, although Variables were not fully applied for page control in the original assignment.
Variables were explored as a future direction for making colour, type and spacing more parameterised.
Delivery
See it working, not just read about it.
Rather than a formal usability study, this design system was validated through direct self-testing: checking that navigation stays clear, links resolve correctly, and content reads well across the microsite's pages. The seven pages below are the actual microsite, scroll through each to judge the system's clarity for yourself.
I used this method to turn interface evidence into tangible assets: colour rules, typography, icon grids, responsive layout, and documentation guidelines.
Secondary recipe
Related Projects
More work across service, digital and spatial systems.
Service SystemsAccessibility Support HubA support pathway case focused on clearer access to court assistance.
Service SystemsVictim HubA public sector service improvement case.
Digital SystemsStudierA dashboard project for research task and response management.
Spatial SystemsGuangzhou Baiyun T2An architecture case for complex spatial delivery.