From Tokens to Templates

From Tokens to Templates

From Tokens to Templates

ROLE

Lead UX Designer

CLIENTS

GateGroup, Vodafone Hungary

Design systems come knocking from many directions. Two different problems, two different approaches, same result: users, product, and business all came out ahead.

For GateGroup, I rebuilt the fragmented iOS library for Ecrew into a fully atomic system, a single Source of Truth. This consolidated the feature-set, cut design times in half, lightened the development load, and made onboarding new airlines ~30% faster.

At Vodafone Hungary, I turned the underused Global Design System into working local practice across every digital product, aligning UX/UI across channels, streamlining handover and development, and earning the Group's excellence recognition. Not by building the Source of Truth, but by putting it to use.

ROLE

Lead UX Designer

CLIENTS

GateGroup, Vodafone Hungary

Design systems come knocking from many directions. Two different problems, two different approaches, same result: users, product, and business all came out ahead.

For GateGroup, I rebuilt the fragmented iOS library for Ecrew into a fully atomic system, a single Source of Truth. This consolidated the feature-set, cut design times in half, lightened the development load, and made onboarding new airlines ~30% faster.

At Vodafone Hungary, I turned the underused Global Design System into working local practice across every digital product, aligning UX/UI across channels, streamlining handover and development, and earning the Group's excellence recognition. Not by building the Source of Truth, but by putting it to use.

ROLE

Lead UX Designer

CLIENTS

GateGroup, Vodafone Hungary

Design systems come knocking from many directions. Two different problems, two different approaches, same result: users, product, and business all came out ahead.

For GateGroup, I rebuilt the fragmented iOS library for Ecrew into a fully atomic system, a single Source of Truth. This consolidated the feature-set, cut design times in half, lightened the development load, and made onboarding new airlines ~30% faster.

At Vodafone Hungary, I turned the underused Global Design System into working local practice across every digital product, aligning UX/UI across channels, streamlining handover and development, and earning the Group's excellence recognition. Not by building the Source of Truth, but by putting it to use.

Building a Foundation

Design System Architecture for GateRetail (GateGroup)

Building a Foundation

Design System Architecture for GateRetail (GateGroup)

Building a Foundation

Design System Architecture for GateRetail (GateGroup)

THE SETUP

Ecrew is an iOS-native app for in‑flight catering, bistro, and retail – used worldwide by airlines such as WizzAir, JetBlue, Air France, and SAS through GateGroup.

Airline Standard Operating Procedures, technical constraints (like using iOS 11 for certification and stability reasons), and per-airline feature sets meant most of the app had been developed with a "build‑as-you‑go" stance. The design library was fragmented, with drifting patterns and one-off components.

THE SETUP

Ecrew is an iOS-native app for in‑flight catering, bistro, and retail – used worldwide by airlines such as WizzAir, JetBlue, Air France, and SAS through GateGroup.

Airline Standard Operating Procedures, technical constraints (like using iOS 11 for certification and stability reasons), and per-airline feature sets meant most of the app had been developed with a "build‑as-you‑go" stance. The design library was fragmented, with drifting patterns and one-off components.

THE SETUP

Ecrew is an iOS-native app for in‑flight catering, bistro, and retail – used worldwide by airlines such as WizzAir, JetBlue, Air France, and SAS through GateGroup.

Airline Standard Operating Procedures, technical constraints (like using iOS 11 for certification and stability reasons), and per-airline feature sets meant most of the app had been developed with a "build‑as-you‑go" stance. The design library was fragmented, with drifting patterns and one-off components.

THE WORK

As Lead UX Designer, I owned the transformation from that fragmented library into a fully atomic design system, spanning four layers:

  • Lean token system: for instance, standardized color slots that let any airline's brand drop in without touching UX.

  • Atoms & molecules: all iOS-native, some picked from Apple's iOS library, some purpose-built along Apple HIG.

  • Templates: several of them built for unique, sector-specific features like signature capture, seat selection, etc.

  • Screen templates: for core flows, built to fork cleanly for custom features.

Several hard calls needed to be made in many areas, such as:

  • Connected device management (printers, card readers): I consolidated the bespoke versions into one standardized template with airline-specific feature flags.

  • Inventory management: with our service designer, we distilled every SOP into two flows serving two pools of airlines, with feature flags on top so every airline could fit.

Underneath it all sat Apple's Human Interface Guidelines (HIG) as a working reference. Strict compliance wasn't a client requirement, but I treated it as one, since for a native Swift app, ignoring the framework's principle-set would have been leaving good design on the table.

THE RESULTS

Results were meaningful across the board:

  • Standardized interaction patterns made the app easier for flight crew to navigate, cutting errors and onboarding time.

  • The leaner app structure and modular library made shipping to new airlines ~30% faster, and gave GateGroup a more confident path to pitching features to new and existing clients.

  • Design time on Ecrew itself dropped by roughly half.

The patchwork of bespoke solutions became a coherent, scalable foundation the whole product could grow on.

THE RESULTS

Results were meaningful across the board:

  • Standardized interaction patterns made the app easier for flight crew to navigate, cutting errors and onboarding time.

  • The leaner app structure and modular library made shipping to new airlines ~30% faster, and gave GateGroup a more confident path to pitching features to new and existing clients.

  • Design time on Ecrew itself dropped by roughly half.

The patchwork of bespoke solutions became a coherent, scalable foundation the whole product could grow on.

THE RESULTS

Results were meaningful across the board:

  • Standardized interaction patterns made the app easier for flight crew to navigate, cutting errors and onboarding time.

  • The leaner app structure and modular library made shipping to new airlines ~30% faster, and gave GateGroup a more confident path to pitching features to new and existing clients.

  • Design time on Ecrew itself dropped by roughly half.

The patchwork of bespoke solutions became a coherent, scalable foundation the whole product could grow on.

Earning the Ground

Alignment and Adoption at Vodafone Hungary

Earning the Ground

Alignment and Adoption at Vodafone Hungary

Earning the Ground

Alignment and Adoption at Vodafone Hungary

THE SETUP

Vodafone Group defines a shared design system (DS) across markets, which evolved through three generations from 2014 to 2020 (here's a quick interactive breakdown of them).

Adoption varied widely. In Hungary, first-gen platforms drifted apart, and while WS2.0 platforms tried, they remained loose. This meant dozens of primary elements competing per screen, cards clipped or stacked, sections drowning each other, etc. The DS was there for the taking, but no one was holding to it.

THE SETUP

Vodafone Group defines a shared design system (DS) across markets, which evolved through three generations from 2014 to 2020 (here's a quick interactive breakdown of them).

Adoption varied widely. In Hungary, first-gen platforms drifted apart, and while WS2.0 platforms tried, they remained loose. This meant dozens of primary elements competing per screen, cards clipped or stacked, sections drowning each other, etc. The DS was there for the taking, but no one was holding to it.

THE SETUP

Vodafone Group defines a shared design system (DS) across markets, which evolved through three generations from 2014 to 2020 (here's a quick interactive breakdown of them).

Adoption varied widely. In Hungary, first-gen platforms drifted apart, and while WS2.0 platforms tried, they remained loose. This meant dozens of primary elements competing per screen, cards clipped or stacked, sections drowning each other, etc. The DS was there for the taking, but no one was holding to it.

THE WORK

I joined Vodafone Hungary in spring 2017 as its first internal UX designer, serving also as SPOC with the Group Design team. Alongside building an internal design team, one of my early mandates was to get the digital portfolio in order design-wise.

Turning the Group DS into a working practice was a crucial first step. I defined three tracks for pushing the adoption:

  • Organized workshops for product, dev, marketing, framed around one plain idea: we have a strong set of Lego pieces that will interconnect visually and functionally.

  • Created a bespoke wiki on Confluence carrying DS basics.

  • Set a default stance: every meeting, kickoff, and hallway conversation started with the DS – anything requested outside it needed justification.

The guidelines I set on how we're using and implementing the DS were also made clear both externally and internally:

  • Reach for existing components and templates.

  • If not covered, build it only with DS tokens, atoms, and primitives.

  • Strictness is scaled by level

    • a new color is off the table;

    • a new font size needs to be argued for;

    • a new module is entirely possible, adhering to the DS baseline.

THE RESULTS

By early 2018, the Design System wasn't a reference anymore. It was the default.


  • Two projects showed the discipline in fruition first: Red Phoenix (the Vodafone Hungary webshop 'rescue', have a look at my case study on it) and the parallel migration of the main website to a new CMS, together spanning 15+ base journeys.

  • Group and local metrics analyzed a 98% WS2.0 compliance across 600+ pages of the two platforms.

  • Through these our team earned the "Leading by excellence" spot at Group's Q2 2018 global town hall.

  • In late 2019, when the Bridge strategic transformation project launched, DS discipline was already the company-wide operating mode.

  • Within Bridge, my team migrated the Sketch-based DS into Figma. Vodafone Group would eventually use it for their own Figma transition.

THE RESULTS

By early 2018, the Design System wasn't a reference anymore. It was the default.


  • Two projects showed the discipline in fruition first: Red Phoenix (the Vodafone Hungary webshop 'rescue', have a look at my case study on it) and the parallel migration of the main website to a new CMS, together spanning 15+ base journeys.

  • Group and local metrics analyzed a 98% WS2.0 compliance across 600+ pages of the two platforms.

  • Through these our team earned the "Leading by excellence" spot at Group's Q2 2018 global town hall.

  • In late 2019, when the Bridge strategic transformation project launched, DS discipline was already the company-wide operating mode.

  • Within Bridge, my team migrated the Sketch-based DS into Figma. Vodafone Group would eventually use it for their own Figma transition.

THE RESULTS

By early 2018, the Design System wasn't a reference anymore. It was the default.


  • Two projects showed the discipline in fruition first: Red Phoenix (the Vodafone Hungary webshop 'rescue', have a look at my case study on it) and the parallel migration of the main website to a new CMS, together spanning 15+ base journeys.

  • Group and local metrics analyzed a 98% WS2.0 compliance across 600+ pages of the two platforms.

  • Through these our team earned the "Leading by excellence" spot at Group's Q2 2018 global town hall.

  • In late 2019, when the Bridge strategic transformation project launched, DS discipline was already the company-wide operating mode.

  • Within Bridge, my team migrated the Sketch-based DS into Figma. Vodafone Group would eventually use it for their own Figma transition.

Let's untangle
Let's untangle
Let's untangle

something.

Copy component

Copied

HELLO@DENESHETENYI.COM

Made in Budapest