Zentral – Website & Platform UI/UX Design for B2B and B2C Services
Role
Duration
Team
Platform
Key Metric 1
Pages designed end-to-end
Key Metric 2
Breakpoints - Desktop, Mobile, Tablet
Key Metric 3
Dual user types served in one system
Summary
Overview
Zentral needed a website that could do two things most sites fail at simultaneously — speak clearly to business clients while staying approachable for individual users. I designed and structured 30+ pages from the ground up, building a shared design system, a clear information architecture, and booking flows that made the difference between their one-time and recurring service offerings actually legible. The result is a professional, scannable web presence built to convert.
30+ pages, two distinct user types, one coherent experience - designed to make Zentral's services impossible to misunderstand.
Problem Framing
The Core Problem
Zentral's existing web presence buried the distinction between their one-time services and recurring plans. B2B and B2C visitors were landing on the same pages with no clear path - pricing wasn't transparent, booking was fragmented, and the overall experience felt more like a brochure than a platform. Leads were dropping off before they even understood what was on offer.
Why it mattered
For a service business, confusion at the pricing and booking stage is a direct revenue problem. Every visitor who can't figure out the difference between a one-time engagement and a subscription plan is a conversation that never happens. Zentral needed the website to do the sales work - not just describe the company.
Supporting data / evidence
Discovery research identified that users struggled to compare service tiers side by side. Booking and service capture flows were not separated by user intent. Pricing lacked the transparency needed to support confident purchasing decisions. These gaps were consistent across both B2B stakeholder feedback and B2C user walkthroughs.
Role & Team
My Role
I handled the full design scope - user research synthesis, information architecture, wireframes, design system build, and all final UI across desktop, mobile, and tablet. Every layout decision, component, and interaction pattern was mine from brief to handoff.
Team Composition
Solo designer. Zentral's internal team provided business context, content direction, and review feedback throughout the process.
Stakeholders & decision-makers
Zentral's product and business leadership. Design decisions were reviewed directly with the client at wireframe and high-fidelity stages, with particular focus on how the site handled the B2B versus B2C split.
Approach
Strategy & framework
The core design challenge was separation without fragmentation - B2B and B2C users needed distinct journeys, but the site had to feel like one coherent brand. My approach was to build the information architecture first, mapping every page type and its relationship to user intent, before designing a single screen. Booking and service capture flows were treated as the critical conversion points - everything else on the site was designed to funnel toward those moments clearly.
Research methods used
Stakeholder interviews to understand the service model and sales process. User flow mapping for both B2B and B2C entry points. Competitive audit of comparable service platforms. Content audit of existing pages to identify what was working and what was creating friction.
Key insight(s)
The pricing page was doing too much work and failing at all of it. One-time services and recurring plans need to be separated into genuinely comparable, side-by-side options - not listed sequentially. The moment I restructured the pricing flow around that decision, the entire information architecture snapped into place.
Challenges
Primary challenge
Designing 30+ pages consistently without the UI drifting. At that scale, without a locked design system from the start, components quietly diverge - spacing assumptions shift, type scales get eyeballed, button states get invented on the fly. I've seen it happen, and on a project this size it compounds fast.
How I navigated it
I built the design system before designing any page beyond the homepage. Work Sans was established as the primary typeface early - its geometric clarity at both heading and body weights gave the system a professional tone that held across all 30+ pages. The grid was locked at 2 columns / 120px column / 30px gutter, and every component was built to sit within it. That investment upfront meant the later pages went faster and stayed consistent.
What I Did differently
I'd push for a content-first wireframe session with the client earlier — specifically for the B2B landing pages. Some of the messaging hierarchy decisions were made by assumption at wireframe stage and revised late after copy was introduced. Getting placeholder copy agreed in structure, if not in final words, would have saved a revision cycle.
Solution
What I designed
A full 30+ page responsive website covering the complete Zentral service offering - landing pages, service detail pages, pricing, booking flows, and lead capture - across desktop, mobile, and tablet. The site separates B2B and B2C user journeys at key decision points while maintaining a unified brand and visual system throughout.
Key design decisions
1. Separated booking and capture flows by intent. Rather than routing all users through the same conversion path, I designed distinct flows for one-time bookings and recurring service sign-ups. Each has its own pricing presentation, CTA logic, and confirmation state - reducing decision friction for both user types. 2. Work Sans as the system's anchor. The typeface choice was functional, not decorative. Work Sans holds legibility at small sizes across mobile, scales cleanly to large display headings, and reads as modern without feeling trendy. It gave the design system a stable typographic baseline that didn't need revisiting at any breakpoint. 3. Impact-first hero layout across key pages. Hero sections were designed around a single, scannable outcome statement - not a tagline. Key actions and quick-navigation elements were surfaced immediately, keeping important information accessible without requiring scroll.
Results & Impact
Quantitative results
30+ pages delivered across 3 breakpoints (desktop, mobile, tablet). Full B2B and B2C journey coverage from landing to conversion, with distinct booking and service capture flows for each user type.
Qualitative outcomes
Client feedback highlighted that the pricing separation - one-time vs. recurring - was the clearest it had ever been in any version of their site. The step-by-step booking flow was described as "finally making the process feel manageable" during review. The responsive system held visual consistency across all tested devices without component-level rework.
Business impact
Zentral now has a web presence built to support both their B2B sales conversations and direct B2C conversions from the same system. The transparent pricing structure and separated booking flows remove the two biggest points of drop-off identified in discovery - giving the business a genuine tool for lead management rather than a static brochure.
Next Steps
What's next (and why)
The design system is in place and the pages are built - the logical next phase is tracking how the two user journeys actually perform post-launch. Heatmaps and session recordings on the pricing and booking pages specifically would quickly reveal whether the B2B / B2C separation is working as intended, or whether users are still crossing into the wrong flow.
Open questions / hypotheses
Does the current homepage hierarchy lead B2B visitors to their relevant entry point without intervention? And for returning B2C users - does the booking flow support repeat engagement, or does it feel like starting from scratch each time?
Learnings
Building the design system before touching page-level layouts was the right call and I'd make it again on any project over 10 pages. The other thing this project confirmed: pricing page structure is a UX problem, not a copywriting problem. How you arrange the options matters more than what you say about them.