Hitting start: A UI-focused exploration of clarity, hierarchy, and system consistency
CeX has a strong personality, but its outdated interface often gets in the way.
Cluttered menus, clunky navigation, and frequent dead ends make browsing and comparing items harder than it needs to be, something I’ve experienced first-hand as a long-time customer.
This UI exploration keeps CeX’s identity intact while introducing more clarity, structure, and visual polish. Focusing on layout, consistency, and accessibility, the goal was to make the shopping experience feel smoother, more intentional, and easier to navigate.
Role
UX/UI Designer
Platforms
Web
Design tools
Figma
Visual audit
Before diving into redesign, I ran a quick visual and structural audit to identify where the existing interface was falling short. I wasn’t aiming for a deep UX teardown, just a focused review of key screens to spot visual inconsistencies, weak hierarchy, and layout issues.
Homepage overview
The page lacks a clear visual hierarchy, with too many elements competing for attention.. Every element - banners, product cards, carousels, buttons - competes for attention, resulting in a noisy and overwhelming interface. Without a clear hierarchy or scannable layout, users struggle to understand what to do next or what’s most relevant to them. A more structured layout, stronger typographic scaling, and deliberate visual pacing would help guide focus and improve overall usability.
CeX's navigation needs a refresh. The current menus are confusing and lack intuitiveness, making it difficult for users to find what they're looking for.
Liam, 18
First-time seller
CeX's navigation needs a refresh. The current menus are confusing and lack intuitiveness, making it difficult for users to find what they're looking for.
Paula, 23
Sustainability-focused buyer
Browse products
The browse page lacks structure and scanability. A dominant banner, flat grid of categories, and stacked product carousels all compete for attention without clear visual hierarchy. Important content is hidden behind "Show more" buttons, and users can't filter games by genre or popularity without selecting a platform first, creating friction and making it harder to explore freely.
CeX's navigation needs a refresh. The current menus are confusing and lack intuitiveness, making it difficult for users to find what they're looking for.
Neil, 50
The deal-hunting collector
CeX's navigation needs a refresh. The current menus are confusing and lack intuitiveness, making it difficult for users to find what they're looking for.
Gabby, 30
The Bargain-Seeking Gamer
Product details page
This page carries the highest decision load in the CeX experience. It combines product information, condition grading, pricing, trust signals, and actions in a single view. While all the necessary information is present, the lack of clear hierarchy and grouping makes it harder than necessary for users to confidently understand what they’re buying and move forward.
I get nervous buying phones because I’m never 100% sure what condition I’m actually getting.
Alex, 31
Repeat buyer
There’s a lot of info, but it takes time to work out what really matters.
Sam, 26
First-time second hand buyer
Same task, different experiences
From a UI and design system perspective, similar purchase decisions are presented through different patterns, increasing cognitive load and reducing predictability across the experience.
This inconsistency informed my approach to the redesign, focusing on a single, flexible product detail pattern that could adapt to grading differences without changing the underlying structure.
Key takeaway
This quick visual audit helped me prioritise which layout and content decisions to challenge in the redesign, especially around spacing, typography, and visual hierarchy. Rather than overhaul every screen, I focused on creating a more focused, scannable experience while maintaining CeX’s recognisable identity.
Early structure exploration
Early wireframes covered the core CeX experience, from discovery through to checkout and selling. I restructured the homepage, browse and product pages, franchise sections, store finder, basket, and sell flow to establish clearer hierarchy and more consistent layout patterns.
Working at low fidelity allowed me to test structural decisions quickly and align key journeys before developing the visual system.
Scroll to see more
Visual identity
I wanted to bring structure and consistency to a site known for its chaotic charm. While exploring cleaner layouts, tighter grids, and clearer behaviours, I was careful to preserve CeX’s bold, playful energy. The result is a UI system that feels more intentional and usable, while remaining unmistakably CeX, full of colour, character, and pop-culture flair.
To support this, I built a scalable Figma library from the ground up, focused on reusable, flexible components. This approach makes it easier to maintain visual consistency across the site, while still allowing room for expressive moments in high-content, fast-changing areas.
Foundation
A clear foundation defines the visual language and allows the design system to scale confidently across different screen types and content volumes, without diluting CeX’s personality.
Colours
A high-contrast, bold palette that honours CeX’s existing identity while improving legibility and accessibility.
Colour is applied with intent. Primary red anchors brand moments and key actions, category colours guide navigation and wayfinding, and neutrals create breathing room for content-heavy screens.
Typography
Sharp, readable type choices to bring hierarchy and rhythm to content-heavy pages.
Font: Manrope
Extra bold
Aa123
Regular
Aa123
Iconography
Simple, recognisable icons to aid navigation and reinforce meaning without visual noise.
Their use is consistent and purposeful, helping users scan and understand the interface without competing with content. In some areas, icons are also used playfully to add personality and visual rhythm, supporting CeX’s bold, expressive character.
Library: Lucide
Spacing
The spacing system follows a 4px base grid and adapts across breakpoints, supporting both horizontal and vertical alignment. It helps create clear relationships between elements, keeping layouts readable, balanced, and easy to scan across different screen sizes.
Rather than relying on rigid column grids, layouts use flexible auto-layout rules and responsive spacing. This allows components to adapt fluidly across devices without being constrained by outdated layout structures.
Elevation
Adds depth through shadows and layering, helping prioritise content and guide user focus while maintaining a playful tone.
Elevation 0
e.g. Buttons, banners, text areas, forms
elevation.0
Elevation 1
e.g. Product cards, info panels, list items
elevation.1
Elevation 3
e.g. Open dropdowns, wishlist icon
elevation.3
Elevation 6
e.g. Drawers, toast notifications
elevation.6
Elevation 8
e.g. Modals, dialogs, overlays
elevation.8
Radius
Rounded corners add softness and visual approachability. A consistent radius scale keeps components visually aligned while echoing CeX’s playful energy.
Radius 0
e.g. Table cells, dividers
radius.none
Radius XS
e.g. Containers, panels
radius.xs
Radius SM
e.g. Buttons, forms, dropdowns
radius.sm
Radius MD
e.g. Cards, modals
radius.md
Radius XL
e.g. Tooltips, playful elements
radius.full
Radius Full
e.g. Avatars, playful button, search
radius.full
UI Kit snapshot
A structured overview of the reusable components built from the visual foundation.
Focused on navigation, interaction patterns, and commerce-specific modules.
Inputs & Actions
Buttons
A hierarchical action system balancing emphasis and restraint.
Primary actions lead, secondary and tertiary variants support, and utility styles enable contextual control, all shaped by consistent spacing and interaction states.
Below:
Buttons
Inputs & drop-downs
Core input components used for search, selection, and data entry.
Each pattern follows consistent focus states, spacing, and elevation to maintain clarity across contexts.
Clickable prototype
Checkboxes, radio buttons, switches & tags
Selection controls supporting single and multiple, decisions.
Checkboxes enable multi-select, radio buttons enforce single choice, and switches represent immediate on/off states. Tags act as compact visual labels used to categorise products and reinforce content hierarchy across the interface.
Navigation
Global header
The header acts as the primary navigation hub. It combines brand presence, search, category access, and account utilities into a responsive container that adapts across contexts.
Below:
Global header atoms & variations
Below:
Search atoms & components
Type Pik to try 😏
Below:
User menu dropdown & final component
Secondary navigation patterns
Supporting patterns reinforce orientation and hierarchy across browsing and transactional contexts.
Below:
Tabs atoms & animated component
Clickable prototype
Below:
Page navigation breadcrumbs
Below:
Pagination atoms & component
Commerce patterns
Product cards
A scalable commerce component designed to surface essential product information and primary actions within a consistent layout. Each card includes image, category tag, rating, pricing, and contextual actions, adapting to different content types while maintaining visual hierarchy and clarity.
Below:
Product cards details and behaviour
Clickable prototype
Scroll to see more
