03 — Project Goals
Business Goals
Increase qualified leads.
Strengthen brand trust and positioning.
Communicate expertise through strong UX, copy, and visuals.
User Goals
Understand what Coding Sphere does within 5 seconds.
Explore services effortlessly.
Feel assured through testimonials, case studies, and proof points.
Convert quickly via clear pathways.
Ref. image: Zoomed sections from the design
04 — Discovery & Insights
User Insight 01 — People don’t buy services; they buy trust
Clients visiting agency websites scan for:
Portfolio
Testimonials
Clear scope/process
Pricing indicators
Expertise tags
User Insight 02 — Agency clients want speed & clarity
Through benchmarking, we found top-performing agencies follow:
Single value proposition
Crisp 2–3 line description
Modular sections
Strong visual identity
User Insight 03 — Language = conversion
UX writing needed to shift from generic to:
Value-driven
Outcome-focused
Industry-aware
Ref. Image: A dribble short mockup here
05 — Strategy
I built the redesign around three pillars:
1. Clarity : One hero line + subtext + 2 primary CTAs.
Clear service breakdown using modular cards and icons.
2. Trust : Case studies, testimonials, metrics, clients, and process—placed early and repeated throughout the scroll.
3. Conversion : CTA repetition, sticky contact strip, “project inquiry” button, and lead form optimization.
07 — Visual & System Design
Design System
Typography: Raleway + Inter pairings
Colour System: Dark mode default with #5955FB accents
Spacing System: Consistent 8px baseline grid
Components:
Cards
CTAs
Filters
Bento grids
Accordion (for FAQs)
CTA banners
Motion
Soft, subtle micro-animations to bring life without overwhelming.
Accessibility
Contrast-checked colours
Button labels for conversion-led ux
Keyboard-friendly focus states
Ref. Image : Pricing layout using bento grid that expands with each hover state.
06 — Final Experience
Hero Section
“We build digital experiences that help brands grow.”
Supporting line: outcome-focused, not task-focused.
Two CTAs: Book a Free Consultation and Start a Project.
Followed by the other sections of the website.
Ref. Image : A mockup showreel of the design
After — Redesigned Website
The redesign introduces a modern, high-contrast, credibility-first visual identity aligned with agency expectations.
The new experience focuses on clarity, trust, and conversion pathways.
Key improvements:
Bold dark theme with strong contrast & sharper hierarchy
Modern illustrations aligned with tech/agency storytelling
Clear messaging and structured sections
High-trust components: featured work, metrics, founder block, pricing
Modular card components & scalable design system
Polished, premium visual language representing a serious agency
Stronger CTA placement (primary button, booking flow, lead funnel)
Testimonials, FAQ & consultation call structured for conversion
Overall experience feels premium, intentional, and high-confidence
The redesigned version transforms Coding Sphere from a generic service provider into a modern, credible, and conversion-focused digital agency.
08 — Impact
41% increase in time on site
2.8× more portfolio interactions
Higher lead quality from pre-qualified inquiries
Better brand perception across social channels
The redesign didn’t just make Coding Sphere look better; it transformed their digital presence into a growth engine.
09 — What I Learned
Agency websites need simplicity, modularity, and credibility more than visual fireworks.
UX writing dramatically influences perception.
A strong IA can double the clarity of an agency’s brand story.
Continuous iteration leads to a sharper, cleaner product.
Explore more
works.
View all
View all
