Case study · 2024 · 1 month
UI Design | Marketing Agency | Single-page Website
My role
UI Designer
Timeline
1 month · 2024
Team
1 Designer
1 Webflow Developer
Platform
Website
Status
Website
Introduction
The client
Fuel Fox is a digital marketing agency helping businesses grow their presence online. It needed a website of its own that felt as confident as the work it does for clients.
My role
I was the UI designer and owned the full visual design, from the visual direction to the final screens for every breakpoint. A Webflow developer built the site.
Impact
The site went live on Webflow. It is one of my favourite projects, with a strong visual direction I would change the least if I redesigned it today.
month from first idea to live site
creative freedom on the visual direction
breakpoints: ultra-wide, desktop, tablet and mobile
on Webflow
01 — The brief
Fuel Fox helps other businesses look good online, so its own website had to prove it. The brief came with complete creative freedom and one page to say everything that matters.
Presence
First impressions count
Visitors judge an agency by its own website in seconds, so the look had to feel bold and current.
Focus
Say enough, and nothing more
Ten services, a mission, client quotes and contact details all had to fit on one page without feeling crowded.
Freedom
No brand rules to follow
With full creative freedom, I had to set the visual direction myself and keep it consistent everywhere.
The challenge
02 — Who it's for
The site speaks to two kinds of visitors. Some are curious and want a quick feel for the agency. Others are ready to talk and want the services and contact details fast. One page had to work for both.
Website
Business owners checking out agencies, often arriving from social media or a referral.
What they need
• Understand what Fuel Fox does in seconds
• See the range of services
• Get a feel for the people behind it
What frustrates them
• Long, wordy agency websites
• Generic, template-looking layouts
• Contact details that are hard to find
Website
Marketing leads who already know what they need and want to start a conversation quickly.
What they need
• Check the services match their needs
• See that clients are happy
• Get in touch in one step
What frustrates them
• Contact forms with too many fields
• No quick way to book a call
• Digging through many pages
03 — Research & strategy
With full creative freedom, I let visual exploration and instinct lead. I looked at how modern agencies present themselves, then mapped what the one page had to do: grab attention, build trust, show the offer and turn visitors into leads. The goal was minimal but informative.
What the research told me
Insight 01
Type can carry the brand
Big, confident type says more about an agency than decoration, so it became the hero of the page.
Insight 02
One page is enough
Everything a visitor needs fits on one well-ordered page, with the nav jumping to each section.
Insight 03
Trust needs a human tone
Client quotes feel more real as a friendly chat than as formal testimonial cards.
How I worked
Moodboarding
Content mapping
Page structure
Visual direction
Typography
Design system
Responsive layouts
Webflow handoff
04 — Page structure
I ordered the sections so the page reads from top to bottom: grab attention, build trust, show the offer, then make it easy to get in touch. The nav simply jumps to each part.
Step 1
Hook
Section
Hero with big type and a capsule image.
Goal
Grab attention in seconds.
Step 2
Trust
Section
Why FuelFox? and the analytics banner.
Goal
Explain who they are.
Step 3
Offer
Section
Services list and team contact.
Goal
Show the full range at a glance.
Step 4
Values
Section
What, why and how, plus mission and vision.
Goal
Give the agency a voice.
Step 5
Convert
Section
Client voices, contact form and booking.
Goal
Turn visitors into leads.
05 — Key decisions
Each one came back to the same idea: use very few elements, and make each one count.
The problem
Agency websites often lean on stock photos and effects, and end up looking the same.
Options I weighed
A busy, image-led hero, or let large type carry the message.
What I chose
Big Urbanist headlines with key words highlighted in orange, and a photo set inside the line of text.
Why it worked
The page feels confident and recognisable without needing extra decoration.
The problem
With so few elements on the page, the design needed something to tie the sections together.
Options I weighed
Different shapes for buttons, images and highlights, or one shape repeated across everything.
What I chose
A capsule shape used for images, highlights, buttons and icons across the whole page.
Why it worked
The repeated shape gives the site a clear visual language that is easy to remember.
The problem
Classic testimonial cards feel formal and are easy to skip.
Options I weighed
A standard quote slider, or client quotes shown as a friendly chat.
What I chose
Client quotes shown as message bubbles, with the agency replying, in a simple slider.
Why it worked
The quotes feel more human and match the friendly tone of the brand.
06 — Visual direction
I paired a warm coral orange with near-black and a soft off-white. Spacious layouts, big type and one repeated capsule shape give the site a lot of character with very few elements.
07 — Design system
A small, consistent set of colours, type and components, designed for ultra-wide, desktop, tablet and mobile.
Colour
Fox Orange
#FF7F50
Peach
#FFE9DF
Charcoal
#1D1D1D
Stone Grey
#969696
Off-white
#FAFAF8
Typeface
A friendly geometric sans that looks bold at large sizes and stays clear in body text.
Visual language
Capsule shapes, bold typography and spacious layouts, repeated across every section.
Components
Service cards, capsule buttons, navigation, the analytics highlight, value cards, chat bubbles, the contact form and the footer, each designed for every breakpoint.
08 — Final designs
A spacious one-page site where bold type, a recurring capsule shape and an orange-and-black palette create a distinctive look on every screen size.
On tablet
Hero
Big type and the capsule image lead the page.
Services
The analytics banner and the full list of services.
Contact
Contact form, booking card and footer.
On mobile
Mobile hero
The same bold headline, sized for small screens.
Analytics and services
The dark banner with its orange capsule highlight.
Mission and voices
Mission, vision and chat-style client quotes.
09 — Outcome
The website went live on Webflow within a month. With very few elements, it gives Fuel Fox a distinctive look that feels confident and modern on every screen size.
month from first idea to live site.
breakpoints designed, from ultra-wide to mobile.
on Webflow, built by a Webflow developer.
10 — Looking back
Plan motion early
I would design the scroll and hover animations alongside the layouts, so the site feels as lively as it looks.
Test with real visitors
I would watch a few business owners use the page, to check the order of sections works as well as I believed.
Shape the copy together
I would work on the headlines with the client earlier, since the type does so much of the visual work.
Learnings
Less can be more distinctive
A website does not need many elements to feel distinctive.
Consistency makes it memorable
Strong type, a clear visual language and consistency make a site stick.
Trust your instincts
Creative freedom taught me to trust my design instincts.
Enjoyed this case study?
© 2024 Fuel Fox. All rights reserved. Designed by Shreya Pandya.