Brand Identity · Web Design

SAPT Solutions: a brand that refuses to blend in.

End-to-end website design for a software consultancy. Brand voice, visual system, and five production-ready screens.

SAPT

Design. Develop. Code.

UI/UX Design SEO Mobile App Web Dev Digital Marketing

My Role

UI/UX Designer

Type

Freelance Project

Year

2023

Deliverable

Full Website Design

The Problem

Most agency sites look the same: dark background, buzzword hero, grid of service icons, "Book a Call" CTA. Technically fine. Completely forgettable.

Every agency site is identical

SAPT had a strong technical offering and a clear personality. What they were missing was a visual identity that actually communicated who they were before a visitor reads a full sentence.

Eight services, no clear structure

Too many services for a nav dropdown. Too few to need a dedicated page. The design needed to surface all eight in the first viewport without overwhelming it.

Strong personality, no visual voice

The founders were direct, a bit irreverent, and the kind of people clients actually want on a project. The visual system had to match that energy from the first pixel.

My Approach

Structured discovery sessions, straight to high-fidelity. The founders were hands-on reviewers, so we iterated directly on real designs — no wireframe rounds.

Brand Discovery

Structured sessions: who they're targeting, how competitors look, what a visitor should feel in 10 seconds, and landing on the right tone (direct, confident, a little playful).

Visual Direction

Defined typography, illustration style, colour palette, and spacing system. Heavy condensed typeface as the primary UI element — the type is the hero.

Information Architecture

Mapped the five-page structure and prioritised content hierarchy on each page. Eight services surfaced without a nav dropdown or dedicated services page.

High-Fidelity UI

Iterated directly on full-resolution screens with the founders as reviewers. Faster, more honest feedback loop with no wireframe distraction.

Key Design Decisions

Every call came back to one question: does this feel like SAPT, or does it feel like every other agency site?

Typography

Type as the primary UI element

A heavy condensed display typeface for the headlines — not for aesthetics alone. A font that loud communicates confidence before the user processes a single word. The oversized "WE" on the homepage removed the need for a hero image. The type is the hero.

Illustration

Hand-drawn over stock photography

Stock photography was off the table from day one — it flattens everything. I went with hand-drawn illustrations throughout: a coding hand, two friends high-fiving, a telephone. Each one is specific to a moment on the page rather than decorative filler. Imagery should support comprehension, not just fill space.

Navigation

Service tags floating in the hero

Eight services is too many for a nav dropdown and too few to need a dedicated page. I solved this with pill-shaped tags scattered across the homepage hero text. Full service breadth visible in the first viewport, no extra click required, consistent with the playful visual tone.

Contact Form

Fill-in-the-blank instead of fields

The standard contact form pattern feels like filling out a tax form. I redesigned the contact page as a sentence the user completes. Same interaction model, lower cognitive load, and the experience matches the brand voice at a high-intent touchpoint.

Final Screens

Each screen uses the same typographic scale, colour tokens, and component patterns — coherent as a system, distinct page by page.

SAPT Solutions — Home screen final design

Home — Final design

Outcomes

What the design delivered

When clients have a strong personality, the best thing a designer can do is get out of the way and let the design say it clearly.

Prabhangini Varshney — Designer

Delivered

A reusable design system — type scale, colour tokens, spacing, and component patterns any developer can build from

Eight services surfaced in one viewport with no nav overload — the pill-tag component scales if the offering grows

A fill-in-the-blank contact UX that lowers cognitive load at a high-intent touchpoint

Brand voice consistent from hero to thank-you state across all five pages — no screen defaults to generic

Reflection

Design decisions are communication decisions. These are the gaps worth closing next.

Track where conversion breaks

Are visitors bouncing before the contact page? Reaching it but not submitting? Funnel analytics would isolate whether drop-off is a design problem or an expectation gap.

Test the service tag scannability

Floating pill tags are visually distinctive but untested with users. A second round of observation would confirm whether visitors parse all eight services or just register "there are options."

A/B test the contact form

The fill-in-the-blank pattern is a hypothesis. A traditional form alongside it would confirm whether the lower cognitive load actually moves the needle on submission rates.

Next project

Richard Bod Photography

View case study →