Skip to content

( By / Independent Practice / Freelance UI/UX Designer / 2025 / 8 min read )

Zuma

Delivered and shipped a complete desktop agency website functioning as both portfolio showcase and lead generation tool, designed solo as a direct freelance engagement

The result and the decision behind it

( What it did )

Delivered and shipped a complete desktop agency website functioning as both portfolio showcase and lead generation tool, designed solo as a direct freelance engagement

( The decision behind it )

Differentiate on visual system rather than on claims

Every competitor makes the same claim in the same visual language, so the claim carries no signal. The only differentiator available on first viewport is the design itself. For a studio selling design, an unconventional system that is executed well is stronger proof of capability than any statement about awards, and it is proof the visitor absorbs before reading a word.

Generated schematic standing in for imagery of Zuma. It depicts nothing.
Generated schematic, not a screenshot of Zuma.

Generated schematic, not a screenshot. Real imagery to follow.

( The account )

Context

Zuma Studio is a digital-first creative agency offering branding, website design, product design, development, and ongoing design support, with a client list that includes L'Oreal, eBay, and ABA Bank. The site I designed, branded Wondermake, is the studio's public front door: part portfolio, part sales argument.

An agency website carries a burden most marketing sites do not. It has to sell a service while simultaneously being a sample of that service. A software company can have a mediocre site and a good product. A design studio cannot. Every choice on the page is evidence, which means the site is judged twice, once on what it says and once on how it is made.

The studio was competing for enterprise and mid-market contracts against a saturated field where nearly every competitor makes the same claims in nearly the same visual language: light backgrounds, generous white space, a grid of project thumbnails, the word "award-winning". When the assertions are identical across a category, no site wins on assertion.

The problem

The studio needed a site that worked as a portfolio and as a business development tool at the same time, and those two jobs pull in different directions. Portfolio-first sites optimise for spectacle and lose the visitor before any conversion step. Sales-first sites look like every other agency and undercut the credibility the studio was trying to establish.

Four specific tensions shaped the work:

1. Credibility could not be claimed, only demonstrated. Saying "number one agency" and "award-winning" is what every competitor says. If the design did not embody that claim, the copy actively damaged trust rather than building it. 2. The service range was wide enough to become noise. Branding, website design, product design, development, and support is a lot to communicate. Listed flat, it reads as an agency that does everything and specialises in nothing. 3. Leads arrived with wildly different budgets. An enterprise brand and a first-time founder both fill in the same form. Without qualification, the studio spent sales time on inquiries it would never take, and the visitor spent effort on a conversation that was never going to happen. 4. Social proof was strong but unstructured. Recognisable client names, a 4.8 rating, and 100 or more reviews were all available, and each answers a different kind of doubt. Presented as an undifferentiated logo wall they would have answered none of them well.

What I did

I built the site around a single premise: differentiate on execution, then convert on structure. The visual system does the credibility work and the page architecture does the sales work, so neither has to carry both.

The visual system is a dark editorial one. High-contrast typography on a dark base, with a single neon-green accent reserved for conversion actions, puts the site in a different category from the light, spacious agency convention on the first viewport. Large-scale headlines and kinetic text treatments establish confidence before any claim is read. The differentiation is not decorative: where every competitor looks alike, looking unlike them is the fastest proof of capability available.

The page architecture is a sequenced argument. Work comes first, in a portfolio grid where each project card carries a category tag such as product UI/UX or branding, so a visitor can locate relevant evidence rather than scroll through everything. Services follow, structured as a shallow hierarchy rather than a flat list: branding expands into logo design, social media, brand story, and packaging, alongside website design, product, development, and support. The full scope stays discoverable without arriving all at once. Trust comes next as a deliberate stack of three signals: named testimonials from HR managers and developers at L'Oreal, eBay, and ABA Bank for emotional credibility, a 4.8 out of 5 rating for rational credibility, and a count of more than 100 reviews for consistency. Conversion sits last, once the argument has been made.

The inquiry form is where the sales work concentrates. Rather than a name-and-message box, it asks for budget range across three tiers and service type through checkboxes, so an inquiry arrives already scoped. A comprehensive footer organised by service category, social channel, and contact detail catches visitors who reach the bottom without converting.

Outcomes

  • Built a custom dark editorial visual language from scratch with no existing design system, differentiating the studio from a category of visually near-identical light-minimal agency sites
  • Converted the inquiry step from a contact form into a qualification instrument, capturing budget tier and service type upfront so inquiries arrive scoped and sales time is spent on viable conversations
  • Structured social proof as three complementary signals, named enterprise testimonials, a 4.8 out of 5 rating, and a review count above 100, so brand recognition, working experience, and consistency are each addressed
  • Sequenced the page as a conversion argument running from demonstrated work through service depth and trust to a qualified inquiry

What I learned

When a category is visually homogeneous, the aesthetic decision is a positioning decision. I went in treating the dark editorial direction as an art direction choice and came out understanding it as the strategy. Nothing in the copy could differentiate the studio, because the copy in this category is interchangeable. The visual system was the only argument the site could make that a competitor could not also make, which is a useful reframe for any project where the words are commoditised.

Friction placed correctly is not friction. The budget-tier question is the most counterintuitive part of the page and the one most likely to be argued about, since standard conversion thinking says remove every field you can. But conversion rate is the wrong metric when the cost of a bad lead is a wasted call. Optimising for qualified inquiries rather than total inquiries changed what the form was for, and once it is a qualification instrument the extra fields stop being obstacles and start being the point.

Consistency matters more than peak quality when the site is the sample. A long agency page has maybe fifteen sections, and a prospect evaluating craft grades on the weakest one, not the best one. That inverts the usual instinct to pour effort into the hero and let the lower page coast. Working solo with no design system, the practical answer was to build the visual language as a small, strict set of rules early, so the last section holds the same standard as the first without needing the same attention.

The full record / 4 decisions
My role
Freelance UI/UX Designer
Timeline
2025
Platform
Web (desktop)
Category
Creative Services / Digital Agency / Marketing and Lead Generation Website
Status
New design, delivered

Tools Figma

Team Solo, working directly with the client

Decisions

Differentiate on visual system rather than on claims

What
Designed a dark editorial system with high-contrast typography, large-scale kinetic headlines, and a single neon-green accent, in a category where the convention is light backgrounds and generous white space.
Alternatives
The category-standard light minimal aesthetic, which is safe, reads as premium by convention, and is what enterprise buyers expect from an agency site.
Why
Every competitor makes the same claim in the same visual language, so the claim carries no signal. The only differentiator available on first viewport is the design itself. For a studio selling design, an unconventional system that is executed well is stronger proof of capability than any statement about awards, and it is proof the visitor absorbs before reading a word.

Make the inquiry form qualify rather than collect

What
Structured the project inquiry around a budget range selection across three tiers and service type checkboxes, capturing scope upfront.
Alternatives
A minimal name, email, and message form, which is the lowest-friction option and maximises raw submission volume.
Why
The studio's constraint was sales time, not lead volume. An unqualified inquiry costs a discovery call to discover it was never viable. Asking about budget does cost some submissions, but the ones it loses are largely the ones that would have been declined anyway, and the ones it keeps arrive scoped enough to answer properly. It also sets expectations honestly at the point of contact rather than three emails in.

Stack three kinds of social proof rather than one

What
Paired named individual testimonials from L'Oreal, eBay, and ABA Bank with a quantified 4.8 out of 5 rating and a count of more than 100 reviews, in one section.
Alternatives
A client logo strip, which is the category default and requires no maintenance.
Why
These three signals answer different doubts and are not interchangeable. Recognisable brand names answer "is this studio operating at my level". Named people with job titles answer "what is it actually like to work with them". A rating with a review count answers "is this consistent or did they cherry-pick three good ones". A logo wall only answers the first, and an enterprise buyer needs all three before shortlisting an unfamiliar studio.

Structure services as a hierarchy rather than a list

What
Organised the offer into categories with expandable exploration, so branding opens into logo design, social media, brand story, and packaging, alongside website design, product, development, and support.
Alternatives
A flat list of every service, which is simpler to build and puts the full range in view at once.
Why
Full breadth stated flat reads as a generalist, which is the opposite of what an enterprise buyer wants. A hierarchy communicates depth within each category instead, so the studio reads as several deep practices rather than one shallow one. It also lets a visitor who arrived for one service discover the others without the page having to sell all five simultaneously.

( Tags )

  • Information Architecture
  • Art Direction
  • Brand Identity
  • Editorial Design
  • Marketing Website
  • Conversion Design