Pacemakers — Case Study

Overview

Context

Pacemakers is a conceptual landing page for an urban running community built around shared city runs, performance data, and collective energy. My very first design project, developed as part of the UI Academy program.

The challenge:

Two distinct audiences in one visual language: a data-driven experienced runner and a community-seeking beginner
UI-focused assignment: wireframe and research were provided, my work concentrated on visual decisions: typography, colour, imagery, and atmosphere

Mentor feedback shaped critical decisions at every stage.

Project type: Concept Project
My Role: UI Designer
Tool: Figma
Year: 2025
Type: Concept project
Platform: Web (Desktop)

Empathize

Research was based on the program brief rather than independent interviews. Two primary personas were provided, each representing a distinct archetype within the running community.

The urban tempo runner

Máté

"If the community expects me and doesn't slow my rhythm, I'm in."

Male, 28. Works and lives and breathes data. His identity is built around pace, heart-rate zones, and his 12K personal best.

Motivations

· Top performance progress
· Finding the right pace group
· Urban running energy
· Competing with peers
· Healthy competition
· Community recognition

Fears

· Groups that are too slow
· Bad route organisation
· Poor communication structures
· Chaotic data sharing
· No serious feeling community

The community-seeking beginner

Flóra

"I don't care about pace — I just want to run with people who make it feel easy."

Flóra is a new runner, motivated by experience rather than pace. She lives in the city and is always looking for social activities.

Motivations

· Belonging to a community
· Physical and mental health
· Simple, low-pressure entry
· Outdoor and more openness
· Meeting new people

Fears

· Feeling exposed or judged
· Shame if she can't keep up
· Too much information upfront
· Overly technical interfaces

Key tension

Máté needs performance, data, and speed. Flóra needs warmth, simplicity, and reassurance. Every section had to carry signals for both, without either feeling like an afterthought.

Reflection

If revisiting this project, I would conduct independent qualitative research with real runners from both archetypes to validate and deepen these assumptions.

Define

The wireframe and content hierarchy were pre-defined. My role was to translate the brief's strategic direction into clear design intent.

Core design question

How do you communicate the energy of urban running to two completely different people, at the same time?

Design principles:

Urban energy: the pulse of the city, evening lights, runners in motion. Structured, not chaotic
Community strength: every visual reinforces that you're never alone
Inclusive entry, performance-ready depth: beginner and advanced coexist without either feeling like an afterthought
Modern and sporty: athletic and contemporary, no fitness-app clichés

Reflection

Next time I would revisit the wireframe with a UX lens, questioning whether section order, content priority, and CTA placement truly serve both personas equally.

cipő

5 perc olvasás

Nike Alphafly 3
futócipő teszt

Újdonságok és fejlesztések az ikonikus Nike Alphafly sorozatban

Ideate

With structure fixed, ideation focused entirely on visual atmosphere.

The conceptual anchor: evening running as a post-work decompression ritual. After sunset, under streetlights, in the neon-lit pulse of the city.

Key decisions:

Lime-on-black palette — high-energy contrast that reads as athletic and urban, differentiating from a category dominated by blues, reds, and muted earth tones
AI-generated imagery (Weavy, Nano Banana, ChatGPT) — custom visuals for each section, keeping the lime-glow atmosphere consistent without relying on generic stock photography

Prototype

Built in Figma as a single-page desktop landing.

Design system highlights:

Colour — near-black canvas (#0A0F00), lime signal (#A8BF00), off-white text (#FDFFFA), deep blue (#006AFF) for secondary depth
Typography — Bebas Neue for display (modern, athletic, all-caps), Geologica for body and UI (neutral, legible)
Principles — glow and depth, card-based layout for scannability, lime on black as a consistent visual signature

Colour Palette

Black and lime creates high contrast energy. Blue adds depth for secondary elements

#0A0F00

#FDFFFA

#A8FF00

#006AFF

Pacemakers

Bebas Neue — Display / Headlines

Every run tells a story.

Geologica — Body / UI Text

Design Principles

Glow & depth
Card-based layout
Lime on black

Mentor involvement

Feedback shaped critical decisions throughout, from validating the lime-on-black direction to balancing atmospheric imagery with interface clarity.

Key Screens

Selected Screens

Pacemakers hero screen — The hero section pairs a bold Bebas Neue headline ("Futni jobb együtt") with a single lime CTA, over an image of two runners lit by glowing route data: a composition that reads as both performance and companionship.

Pacemakers virtual races catalogue screen — The challenges section uses a card-based layout to make events scannable and easy to browse at a glance.

Pacemakers routes discovery screen — The routes section uses an immersive full-width image of a runner with a lime-glowing route painted along the city street. This is one of the most atmospheric moments on the page.

Pacemakers closing join screen — The closing section reinforces the Strava integration with a high-energy full-width design, ending the page on a strong community call to action.

Reflection

What I learned

Pacemakers taught me how to balance two very different user needs within a single visual language: Máté needed speed and data, Flóra needed warmth and belonging. The challenge was making the design feel welcoming without losing its urban edge.

Key learnings:

Atmosphere is a UI decision: colour, light, and imagery carry as much emotional meaning as copy
Typography carries identity: Bebas Neue and Geologica locked in the sporty direction in a way no other pairing would have
Personal instinct is a valid starting point: lived familiarity makes direction feel natural, not speculative
AI-generated imagery is a legitimate design strategy for maintaining visual consistency without stock photos
Wireframes deserve scrutiny: every section order is itself a design decision worth questioning

What I'd do differently

Return to it with a UX lens first: validate the wireframe against both personas, conduct independent user research rather than relying solely on the brief.

This was my first project. The visual confidence came first. The UX rigor is what I'm building next.