Michael Page

Michael Page

Enabling faster, more consistent design and development at scale

Client

Michael Page
Client

Michael Page
Project type

UI Design, Design Systems, UX Design
Project type

UI Design, Design Systems, UX Design
Role

UI Designer
Role

UI Designer
Tools

Sketch
Tools

Sketch

Visual materials for this project are protected under an NDA and cannot be shown here.

I'm happy to share more context individually upon request


Visual materials for this project are protected under an NDA and cannot be shown here.

I'm happy to share more context individually upon request


Visual materials for this project are protected under an NDA and cannot be shown here.

I'm happy to share more context individually upon request


Problem statement

A leading global recruitment brand with multiple sub-brands and regional websites, faced significant challenges due to inconsistent UI components, fragmented branding, and inefficient design-to-development handovers. The absence of a cohesive design system led to duplication of effort and inconsistent user experiences across platforms.

Problem statement

A leading global recruitment brand with multiple sub-brands and regional websites, faced significant challenges due to inconsistent UI components, fragmented branding, and inefficient design-to-development handovers. The absence of a cohesive design system led to duplication of effort and inconsistent user experiences across platforms.

Problem statement

A leading global recruitment brand with multiple sub-brands and regional websites, faced significant challenges due to inconsistent UI components, fragmented branding, and inefficient design-to-development handovers. The absence of a cohesive design system led to duplication of effort and inconsistent user experiences across platforms.

Goals and objectives

  • Define a flexible design system to support multiple sub-brands and international languages (including RTL and Chinese)

  • Establish a consistent visual and interaction language across all platforms

  • Improve efficiency in design and front-end development

  • Create clear guidelines and documentation to ensure easy adoption by global teams

Goals and objectives

  • Define a flexible design system to support multiple sub-brands and international languages (including RTL and Chinese)

  • Establish a consistent visual and interaction language across all platforms

  • Improve efficiency in design and front-end development

  • Create clear guidelines and documentation to ensure easy adoption by global teams

Goals and objectives

  • Define a flexible design system to support multiple sub-brands and international languages (including RTL and Chinese)

  • Establish a consistent visual and interaction language across all platforms

  • Improve efficiency in design and front-end development

  • Create clear guidelines and documentation to ensure easy adoption by global teams

Discovery and research

Research Methods

  • Interviews with internal product and design teams

  • Audits of existing UI components and live digital products

  • Workshops with development teams to identify technical constraints and requirements


Key Insights

  • Many regions had developed their own UI components, leading to brand inconsistency

  • A lack of reusable design assets increased delivery time and complexity

  • Sub-brands had slight stylistic differences, requiring a flexible but standardised system

  • Multilingual support, including for RTL languages, was not consistently implemented

To kick off the project, I initiated a robust discovery phase that aimed to understand the needs of both ends of the supply chain.


Research Methods

  • Field visits to restaurants and planning offices

  • One-to-one interviews with restaurant managers and planners

  • Remote stakeholder workshops spanning the UK, US, France, and Canada

  • Co-design and ideation workshops to rapidly generate and validate ideas

  • Cross-functional collaboration with a Business Analyst to build a holistic service view


Key Insights

  • Manual stock entry and communication methods led to frequent errors

  • Restaurant managers found the existing tools confusing and burdensome

  • Planners struggled with incomplete or inconsistent data

  • Regional operations varied, so a one-size-fits-all solution would not work

  • A flexible system needed to accommodate global requirements and localisation

Key Outputs

Key Outputs

A shared component library used across all global products

Custom theming for sub-brands without compromising design integrity

Multilingual and RTL-ready components

Full implementation into live products, with updates maintained regularly

Visual materials for this project are protected under an NDA and cannot be shown here.

I'm happy to share more context individually upon request


Visual materials for this project are protected under an NDA and cannot be shown here.

I'm happy to share more context individually upon request


Visual materials for this project are protected under an NDA and cannot be shown here.

I'm happy to share more context individually upon request


Design process

Foundation & Principles

We defined a shared design language that balanced consistency with flexibility. Core principles guided decisions on accessibility, internationalisation, and scalability.

Component Creation

Using Sketch, we created a library of foundational elements (typography, colour, spacing, grids) and scalable components (buttons, forms, navigation, cards) that supported responsive behaviour and localisation.

Sub-brand Theming

Sub-brand variations were supported via themeable tokens and adjustable styles, allowing different regions to maintain their identity while using shared components.

Documentation & Guidelines

I led the creation of comprehensive documentation that included usage rules, accessibility considerations, and brand guidance. This played a critical role in helping teams adopt the system confidently.

Outcomes and impact

  • Brand Consistency: Visual and interaction consistency improved across global touchpoints

  • Efficiency: Faster handoffs and reduced redundancy for design and dev teams

  • Scalability: New products and updates were easier to implement with reusable assets

  • Governance: Clear documentation enabled consistent application and decision-making

Outcomes and impact

  • Brand Consistency: Visual and interaction consistency improved across global touchpoints

  • Efficiency: Faster handoffs and reduced redundancy for design and dev teams

  • Scalability: New products and updates were easier to implement with reusable assets

  • Governance: Clear documentation enabled consistent application and decision-making

Outcomes and impact

  • Brand Consistency: Visual and interaction consistency improved across global touchpoints

  • Efficiency: Faster handoffs and reduced redundancy for design and dev teams

  • Scalability: New products and updates were easier to implement with reusable assets

  • Governance: Clear documentation enabled consistent application and decision-making

Get in touch

To discuss a project or request a copy of my CV

hello@hassankadeem.com

Hassan Kadeem Design

Get in touch

To discuss a project or request a copy of my CV

hello@hassankadeem.com

Hassan Kadeem Design

Get in touch

To discuss a project or request a copy of my CV

hello@hassankadeem.com

Hassan Kadeem Design