Navbar — resize window to see mobile menu
Design System
Tokens and styles extracted from Figma — valekpetr.com
Colors
Brand
Background
Text
Semantic Foreground
Neutral / Borders
Gray Primitives
Typography
Font family: Figtree
Spacing
Border Radius
Badge
Variants
Dark variant (for dark backgrounds)
Sizes
With icon
With dot
With pulsing dot
Button
Variants
Sizes
Icon right (default)
Icon left
No icon
Disabled
Card
Variants
Default
Surface + subtle shadow
Standard card for most content.
Elevated
Raised with deeper shadow
Use for interactive or featured cards.
Outline
Border only, no fill
Lightweight, non-intrusive container.
With image — 16/9
Project title
Category · 2024
With overlay + badge
Image slot supports children
Portrait — 3/4 (project card style)
Radius scale
AvailabilityBadge
GradientBackground
Animated blob used behind dark hero sections
TLDRBox
Interactive — click the button to trigger the typewriter reveal
ContactForm
Light (default)
Dark
BlogTeaser
Full-width section component
Content Blocks
Case study & Lab page blocks — rendered with default data
Project overview
We were brought in to redesign a product that had grown faster than its own foundations. Years of incremental additions had left the experience fragmented — users struggled to find what they needed, and the team struggled to maintain consistency.
Our job was to rebuild it from the user's perspective outward. Not a cosmetic refresh — a structural rethink grounded in research, shipped in a way the team could actually maintain.
Role & Scope
From discovery to design system
My work split across two distinct phases. In discovery, I mapped unique user flows across the most complex product areas. In delivery, I led the creation of a unified web design system, consolidating three independent foundations into one source of truth.
- User journey mapping across product verticals
- Stakeholder interviews — insurance, mortgages, compliance
- Wireframing specialised flows
- Web design system for Liferay CMS
- Consolidating design files across three teams
- Accessibility and mobile-first standards
The Challenge
“How might we rebuild the digital experience from the user's intent outward — not from the internal org structure?”
Research & Discovery
Built on one of the richest data sets I've worked with
300+ usability sessions, 1,000+ pieces of live feedback, 10,000+ session recordings, and analytics across all 7,000+ URLs. Three findings shaped everything: users consistently lost confidence mid-flow, common support queries exposed critical information gaps, and mobile drop-off was disproportionately high.
The pivot came when we cross-referenced heatmaps with analytics funnels. Users were reaching the right pages — they just couldn't trust or act on what they found.
Impact
7k+
URLs redesigned
Across five subwebs
8 mo
End-to-end delivery
From kick-off to launch
3×
Teams unified
Web, mobile & internet banking
Reflection
The conversations that don't scale
A project at this scale teaches you that the most valuable discovery work happens in conversations that don't scale — the stakeholder interviews with the insurance product owner, the mortgage specialist, the compliance team.
The design system consolidation was the most under-appreciated part at the start and the most impactful part at the end. I'd make the case for it earlier and louder next time — the business value of a shared foundation compounds over time.
Testimonial
“Working with Petr on the major web redesign was a game-changer. His skill in Figma prototyping and design systems made a big impact. He worked closely with developers, ensuring key components were perfectly set up. Always reliable, on time, and consistently pixel-perfect.”