CUSTOMER EVENT
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)
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
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.
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.
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
Fitts’s Law
Large, clearly positioned tap targets support one-handed mobile use.
Large, clearly positioned tap targets support one-handed mobile use.
Hick’s Law
Limited visible choices per screen streamline user decision-making.
Limited visible choices per screen streamline user decision-making.
Miller’s Law
Chunked agenda, financial cards and map information reduce cognitive load.
Chunked agenda, financial cards and map information reduce cognitive load.
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 decisions around:
WCAG 2.2 guidelines informed decisions around:
WCAG 2.2 guidelines informed decisions around:
Alt text for icons, maps and imagery
24×24px minimum touch target sizing
Predictable navigation patterns
Cognitive load reduction through chunking
High-contrast colour pairing
The prototype supports a broad range of users and interaction contexts.
Ideation
Ideation
Moodboard
Moodboard
Moodboard
A curated moodboard established visual direction to align with company branding and customer branding
A curated moodboard established visual direction to align with company branding and customer branding
A curated moodboard established visual direction to align with company branding and customer branding
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.
Crazy 8's
Crazy 8's
Crazy 8's
Rapid sketches explored multiple agenda structures and interaction possibilities, leading to early clarity on hierarchy, organisation and tap behaviour.
Rapid sketches explored multiple agenda structures and interaction possibilities, leading to early clarity on hierarchy, organisation and tap behaviour.
Rapid sketches explored multiple agenda structures and interaction possibilities, leading to early clarity on hierarchy, organisation and tap behaviour.
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
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.
Lets connect!
