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
The prototype shows the structure of the Figma microsite, including introduction, foundations and design elements.
Problem
How might we create a unified, scalable design system that helps teams work efficiently, while improving clarity, accessibility and brand consistency across digital platforms?
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.
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.
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.
The final microsite worked as a visual showcase and a practical reference for system documentation.
Course 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.”
The process followed four phases. Each phase moved the project from visual evidence toward clearer design decisions.
Discover
I audited screenshots and inspected CSS across the website and app.
Define
The findings became stakeholder needs, a problem statement and six principles.
Develop
I organised the microsite structure and limited the component scope.
Deliver
The system became a Figma microsite with foundations and component guidance.
System Audit
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 assistive technologies.
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.
Token Ready Foundations
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 token structures.
Colour
Typography
Iconography
Colour System
Primary red, secondary purple and neutral support.
The colour system preserved New World’s primary red and secondary purple. The full colour page is shown above, while this summary extracts 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 microsite preview shows the full typography page. The supporting images below focus only on the desktop and mobile scale decisions.
Icon System
Grid rules for consistent icon drawing.
The detail focuses on grid, padding and stroke rules. The full icon library remains visible in the microsite preview above.
Core Components
Component evidence for the main shopping journey.
These components carry the core online grocery journey: finding products, comparing product information and taking action.
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
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.
Figma Variables 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.
Retrospective
What I would carry forward.
Value
This project strengthened my understanding of design systems as living documents and improved my ability to analyse complex interface environments.
Learning
The main improvement would be time management. The core documentation needed focus before deeper technical experiments with Variables.
Next
If continued, I would refine the Variables structure, unify remaining visual styles and expand the component library through clearer governance rules.
I used this method to turn interface evidence into tangible assets: colour rules, typography, icon grids, responsive layout, component anatomy and documentation guidelines.
PerceptionMeaningMatter
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.