CUSTOMER EVENT

CUSTOMER EVENT

A mobile-first experience enabling attendees to navigate agendas, locations and financial content with clarity and confidence.

Tools: Figma · Adobe Creative Suite

Duration: 2 Weeks (Sprint)

Role: Lead UX/UI Designer - Collaborated with event organisers, translated business materials into mobile structure and balanced branding with usability constraints.

Project Overview

Project Overview

Project Overview

A corporate financial event hosted in Germany required a mobile-friendly experience that attendees could rely on while navigating a two-day programme across multiple venues.

A corporate financial event hosted in Germany required a mobile-friendly experience that attendees could rely on while navigating a two-day programme across multiple venues.

Problem

Problem

Event information was previously fragmented across PDFs, emails and attachments, creating friction for guests who needed fast, on-the-go access during travel and transitions between offices and accommodation.

Event information was previously fragmented across PDFs, emails and attachments, creating friction for guests who needed fast, on-the-go access during travel and transitions between offices and accommodation.

How might we design an interactive mobile prototype present agenda details, venue locations and financial information clearly and visually, enabling attendees to stay informed and move confidently throughout the event?

How might we design an interactive mobile prototype present agenda details, venue locations and financial information clearly and visually, enabling attendees to stay informed and move confidently throughout the event?

Research Insights

Research Insights

Research Insights

Geographical Data Interfaces

Analysis of mapping applications such as Crime Time demonstrated how dynamic visual markers and animated rings can communicate data density effectively on geographical canvases. This reinforced the value of symbolic indicators for map-based interactions.

Cross-Cultural Cartography

Comparing British and German map design revealed differences in purpose, style and visual density. British maps: simplified, public-facing, highly symbolic German maps: technical, layered, formal Blending both approaches enabled culturally inclusive map behaviour aligned with user expectations.

World Cities Dataset

Analysed population patterns through global geographical data. This showed Germany’s distributed urban centres suggesting the need for map designs that support distributed navigation across multiple important locations. In contrast with the UK’s concentrated clusters - supporting more hierarchical or hub-focused mapping styles. This influenced map spacing, pin distribution and layout ergonomics for mobile use.

Information Architecture

Information Architecture

Event content was organised into a simplified three-page architecture:

Event content was organised into a simplified three-page architecture:

Event content was organised into a simplified three-page architecture:

Agenda

Agenda

A structured two-day schedule with clear time blocks, categories and progressive disclosure.

Maps

Maps

Two interlinked map views: city context and office context, with clear symbology and colour cues.

Home

Home

Financial information, event summaries and “find out more” modules presented through scrollytelling.

The IA ensures predictable navigation, clear hierarchy and immediate access to the most time-sensitive details.

The IA ensures predictable navigation, clear hierarchy and immediate access to the most time-sensitive details.

The IA ensures predictable navigation, clear hierarchy and immediate access to the most time-sensitive details.

User Journey

User Journey

A complete user journey was defined to map intentions, transitions and key decision moments across the experience.

This ensured:

  • Every action leads somewhere meaningful

  • No dead ends or broken paths

  • Smooth transitions between scrolling, tapping and map dragging

  • A mental model aligned with real movement through an event

  • Rapid recovery paths for distracted, on-the-go use

A complete user journey was defined to map intentions, transitions and key decision moments across the experience.

This ensured:

  • Every action leads somewhere meaningful

  • No dead ends or broken paths

  • Smooth transitions between scrolling, tapping and map dragging

  • A mental model aligned with real movement through an event

  • Rapid recovery paths for distracted, on-the-go use

A complete user journey was defined to map intentions, transitions and key decision moments across the experience.

This ensured:

  • Every action leads somewhere meaningful

  • No dead ends or broken paths

  • Smooth transitions between scrolling, tapping and map dragging

  • A mental model aligned with real movement through an event

  • Rapid recovery paths for distracted, on-the-go use

The IA ensures predictable navigation, clear hierarchy and immediate access to the most time-sensitive details.

The IA ensures predictable navigation, clear hierarchy and immediate access to the most time-sensitive details.

The IA ensures predictable navigation, clear hierarchy and immediate access to the most time-sensitive details.

CUSTOMER
EVENT

A mobile-first experience enabling attendees to navigate agendas, locations and financial content with clarity and confidence.

Role: Lead UX/UI Designer

Tools: Figma · Adobe Creative Suite

Duration: 2 Weeks (Sprint)

Key Themes

Key Themes

Cross-Cultural Usability

Cross-Cultural Usability

Cross-Cultural
Usability

Universal icons, culturally recognisable labels and blended mapping principles ensured the experience remained intuitive for an international audience.

Universal icons, culturally recognisable labels and blended mapping principles ensured the experience remained intuitive for an international audience.

Accessible Event Documentation

Accessible Event Documentation

Clear session categories, structured time blocks and scannable venue information supported quick comprehension during event movement.

Clear session categories, structured time blocks and scannable venue information supported quick comprehension during event movement.

Clear Financial Information

Clear Financial Information

High-level summaries and modular content facilitated easy scanning, enabling attendees to explore solutions without cognitive overload.

High-level summaries and modular content facilitated easy scanning, enabling attendees to explore solutions without cognitive overload.

Design Prioritisation Matrix

Design Prioritisation Matrix

A prioritisation matrix highlighted high-value, achievable features for the first prototype iteration. This enables:

A prioritisation matrix highlighted high-value, achievable features for the first prototype iteration. This enables:

A prioritisation matrix highlighted high-value, achievable features for the first prototype iteration. This enables:

A focused,

user-centred scope

A focused,

user-centred scope

A focused,

user-centred scope

Realistic delivery within time constraints

Realistic delivery within time constraints

Realistic delivery within time constraints

Strong alignment with attendee needs

Strong alignment with attendee needs

Strong alignment with attendee needs

Clarity on what to implement versus defer

Clarity on what to implement versus defer

Clarity on what to implement versus defer

Applied UX Laws

Applied UX Laws

Increased tap targets to support one-handed use during commuting scenarios.

Increased tap targets to support one-handed use during commuting scenarios.

Increased tap targets to support one-handed use during commuting scenarios.

Scrollytelling Model

Scrollytelling Model

Scrollytelling was incorporated to allow narrative pacing and layered content reveal.

Scrollytelling was incorporated to allow narrative pacing and layered content reveal.

Scrollytelling was incorporated to allow narrative pacing and layered content reveal.

Financial Information: Vertical scroll accommodates long-form content

Financial Information: Vertical scroll accommodates long-form content

Financial Information: Vertical scroll accommodates long-form content

Solution Cards: Horizontal scroll enables comparative exploration

Solution Cards: Horizontal scroll enables comparative exploration

Solution Cards: Horizontal scroll enables comparative exploration

Maps: Drag interactions allow spatial discovery

Maps: Drag interactions allow spatial discovery

Maps: Drag interactions allow spatial discovery

Agenda: Two vertical scroll tracks separate each day with structured, digestible segments

Agenda: Two vertical scroll tracks separate each day with structured, digestible segments

Agenda: Two vertical scroll tracks separate each day with structured, digestible segments

Accessibility & Inclusivity

Accessibility & Inclusivity

WCAG 2.2 guidelines informed enabled design decisions:

WCAG 2.2 guidelines informed enabled design decisions:

WCAG 2.2 guidelines informed enabled design decisions:

  • Applied alt text for icons, maps and imagery

  • Icons contain a 24×24px minimum touch target sizing within frame to improve user actions.

  • Cognitive load reduction through chunking map address containers

The prototype supports a broad range of users and interaction contexts.

Ideation

Ideation

Visual Design System

Visual Design System

Visual Design System

Colour Palette

Colour Palette

Utilised primary (blues), secondary/accent colours (green/purple) to support hierarchy, branding consistency and visual clarity.

Typography

Typography

Consisted of 72 Brand font for a structured type scale ensures legible headings, clear body text and predictable mobile behaviour.

Iconography

Iconography

Created a custom icon system communicates categories, locations and actions with clarity across both map and content modules.

Low-Fidelity Wireframes

Low-Fidelity Wireframes

Low-Fidelity Wireframes

Wireframes established layout, scrollytelling flow, symbology placement and content structure before moving into visual refinement.

Wireframes established layout, scrollytelling flow, symbology placement and content structure before moving into visual refinement.

Wireframes established layout, scrollytelling flow, symbology placement and content structure before moving into visual refinement.

Prototype

Prototype

High-Fidelity Screens

High-Fidelity Screens

High-Fidelity Screens

The final screens merge maps, agendas, financial content and scrollytelling into a unified mobile-first interface.

The final screens merge maps, agendas, financial content and scrollytelling into a unified mobile-first interface.

The final screens merge maps, agendas, financial content and scrollytelling into a unified mobile-first interface.

The design emphasises clarity, cultural inclusivity and navigational confidence.

The design emphasises clarity, cultural inclusivity and navigational confidence.

The design emphasises clarity, cultural inclusivity and navigational confidence.

Prototype Walkthrough

Prototype Walkthrough

Prototype Walkthrough

Invite Details Screen

Invite Details Screen

Invite Details Screen

Introduction

Introduction

Scrollable Schedule

Scrollable Schedule

Agenda

Agenda

Toggle Between Heildelberg & Office Locations

Toggle Between Heildelberg & Office Locations

Toggle Between Heildelberg & Office Locations

Map

Map

Explore Financial Solutions

Explore Financial Solutions

Explore Financial Solutions

Home

Home

Before

Before

  • PDFs, emails, fragmented content

  • Static agenda

After

After

  • Unified mobile-first prototype

  • Reduced navigation friction

Outcome

Outcome

Solution

Solution

Solution

The prototype transforms fragmented event materials into a structured, intuitive mobile experience tailored for real-world, on-the-move use.
It clarifies navigation, consolidates essential details and enhances attendee understanding through a cohesive, story-driven design.

The prototype transforms fragmented event materials into a structured, intuitive mobile experience tailored for real-world, on-the-move use.
It clarifies navigation, consolidates essential details and enhances attendee understanding through a cohesive, story-driven design.

The prototype transforms fragmented event materials into a structured, intuitive mobile experience tailored for real-world, on-the-move use.
It clarifies navigation, consolidates essential details and enhances attendee understanding through a cohesive, story-driven design.

The experience combines agendas, map interactions and financial insights into a unified flow that supports users throughout a multi-venue event.

The experience combines agendas, map interactions and financial insights into a unified flow that supports users throughout a multi-venue event.

The experience combines agendas, map interactions and financial insights into a unified flow that supports users throughout a multi-venue event.

Impact

Impact

Impact

The prototype demonstrated a clear shift from static documents to a dynamic, user-centred mobile format. Consolidation of agendas, maps and financial content reduced friction, improved information clarity and supplied a single, reliable touchpoint for attendees navigating the event.

The prototype demonstrated a clear shift from static documents to a dynamic, user-centred mobile format. Consolidation of agendas, maps and financial content reduced friction, improved information clarity and supplied a single, reliable touchpoint for attendees navigating the event.

The prototype demonstrated a clear shift from static documents to a dynamic, user-centred mobile format. Consolidation of agendas, maps and financial content reduced friction, improved information clarity and supplied a single, reliable touchpoint for attendees navigating the event.

Furthermore, it is now an established a scalable template for designers utilise in the company - extended to future event types, enabling more consistent, accessible and intuitive communication across digital touchpoints.

Furthermore, it is now an established a scalable template for designers utilise in the company - extended to future event types, enabling more consistent, accessible and intuitive communication across digital touchpoints.

Furthermore, it is now an established a scalable template for designers utilise in the company - extended to future event types, enabling more consistent, accessible and intuitive communication across digital touchpoints.

Thanks for viewing