[Business Name]
Website Redesign
[One-sentence summary: what the business does, what was wrong with the old site, and what the redesign achieved.]
Role
[UX/UI Designer]
Timeline
[X weeks · Month–Month YYYY]
Tools
[Figma, FigJam, Notion]
Client
[Industry · Location]
Hero image · Final homepage mockup on desktop + mobile · 1200×600
02
Overview
The business
[Who they are, what they sell, who their customers are, and how the website fits into how they get business.]
The problem
[What was broken: outdated visuals, unclear services, no mobile support, hard-to-find contact or certification info, etc.]
The outcome
[The headline result in one or two sentences — ideally tied to a metric below.]
03
Project Constraints
Designing within real limits
Small-business projects are shaped by budget, time and what the owner can maintain afterwards. These constraints drove the scope.
Budget
$[0,000]
[Design + build. Hosting/CMS costs noted separately.]
Timeline
[0] weeks
[Hard launch date tied to a season / event / campaign.]
Team
[0] people
[Designer, developer / no-code builder, owner as content provider.]
Platform
[CMS]
[Squarespace / WordPress / Webflow — chosen so the owner can edit.]
Other constraints
[Existing brand assets must be kept · limited photography · owner has no technical background · content had to be rewritten from scratch · must integrate with existing booking / payment tools.]
04
Goals & Success Metrics
What success looks like
Metrics were defined before design began so the redesign could be judged on outcomes, not taste.
Goal 01
[Increase enquiries]
+[00]%
Contact form submissions / month
Goal 02
[Reduce bounce rate]
−[00]%
Homepage bounce rate
Goal 03
[Faster time to key info]
[00]s
Time to find services / certifications
Goal 04
[Mobile usability]
[00]/100
Lighthouse mobile score
05
Research & Audit
Understanding the existing site
Screenshot · Old homepage (desktop)
Screenshot · Old site on mobile
Heuristic audit
[Key usability issues found: navigation, hierarchy, readability, accessibility, load speed.]
Stakeholder interview
[What the owner wanted to keep, what customers ask about most, what the site needs to do for the business.]
Analytics review
[Where traffic came from, which pages were abandoned, mobile vs. desktop split, top search queries.]
06
Target Customer
Who the site is for
Photo
Primary persona
[Name], [age]
[Occupation · Location · Device: mostly phone]
Goals
[Find a trustworthy local provider quickly; confirm they're certified; get a quote without a phone call.]
Frustrations
[Sites that hide prices, no mobile layout, unclear whether the business is still operating.]
How they find the business
[Google search, Maps listing, word of mouth.]
Quote
"[I just want to know they're legit and how to book.]"
Photo
Primary persona
[Name], [age]
[Occupation · Location · Device: mostly phone]
Goals
[Find a trustworthy local provider quickly; confirm they're certified; get a quote without a phone call.]
Frustrations
[Sites that hide prices, no mobile layout, unclear whether the business is still operating.]
How they find the business
[Google search, Maps listing, word of mouth.]
Quote
"[I just want to know they're legit and how to book.]"
Image · Customer journey map (awareness → research → contact → booking)
07
Competitor Comparison
Where the gap was
[2–3 local or industry competitors] were reviewed against the features customers said mattered most.
Feature
Mobile-friendly
Certifications explained
Clear primary CTA
Pricing / quote info
Reviews / testimonials
Online booking / contact form
Accessibility (WCAG AA)
Old site
✕
Partial
✕
✕
✕
Partial
✕
Competitor A
✓
✕
✓
✕
✓
✓
✕
Competitor B
✓
Partial
✕
✓
✓
✕
✕
Competitor C
✕
✕
✓
✕
✓
✓
Partial
New site
✓
✓
✓
✓
✓
✓
✓
Screenshot · [Competitor A]
Screenshot · [Competitor B]
Screenshot · [Competitor C]
08
What Stayed · What Was Added
Respecting what worked, fixing what didn't
What stayed
Certification information
[Why it was kept — trust signal customers rely on.]
Branding
[Logo and mark retained for recognition.]
Font
[Typeface kept, hierarchy and sizing refined.]
Color scheme
[Core palette kept, contrast fixed for accessibility.]
Some images
[Selected photos reused; low-quality ones replaced.]
What was added
Sub-links to certification details
[Each certification now has its own explainer page.]
Clear primary call to action
[Book / Call / Get a quote visible on every page.]
Services overview
[Structured service cards replacing a wall of text.]
Responsive mobile layout
[Site now works on phones, where most traffic comes from.]
Testimonials & social proof
[Reviews surfaced near the CTA.]
09
Information Architecture
Restructuring the site
The old site had [00] pages with overlapping content and buried certifications. The new structure has [00] pages, grouped by what customers look for, with certifications promoted to their own branch.
Before
Old sitemap · [00] pages
Home
About Us
Our History
Team
Services
[Long single page]
Contact
Gallery
News
Links
Problems
[Certifications buried inside About · Services was one long page · Gallery and News unmaintained · No clear path to contact · Flat structure with no hierarchy.]
After
New sitemap · [00] pages
Home
Services
[Service A]
[Service B]
[Service C]
Certifications
[Cert 1]
[Cert 2]
[Cert 3]
About
Reviews
Contact
Get a quote
Changes
[Certifications promoted to top level · Services split into individual pages for clarity and SEO · Gallery, News and Links removed or merged · Quote form given its own page.]
Root
Kept
Added
Removed / merged
[00] → [00]
Total pages
[0] → [0]
Clicks to reach certification detail
[0] → [0]
Top-level nav items
Image · Card-sorting or tree-testing results
Image · Primary user flow (Home → Certification → Quote)
10
Process
From sitemap to high fidelity
Image · User flows / task flows
Structure
[Flows built from the new sitemap above; primary path is Home → Certification → Quote.]
Image · Low-fi wireframes
Skeleton
[Key layouts tested with the owner before visual design.]
Image · Hi-fi mockups
Surface
[Final visual design applying the refreshed system.]
11
SEO & Content Strategy
Getting found, then being understood
For a small business the website is only useful if people can find it. Content was rewritten around what customers actually search for.
Target keywords
[service] near me
[service] [city]
certified [service]
[certification name]
[service] cost
[Chosen from Search Console data and owner's knowledge of customer questions.]
Content changes
· One page per service instead of one long page
· Certification sub-pages target long-tail searches
· Location and service area stated in plain text
· FAQ section answering real customer questions
· Page titles and meta descriptions rewritten
Technical SEO
· Proper heading hierarchy (one H1 per page)
· Descriptive alt text on all images
· Compressed images, target LCP under 2.5s
· LocalBusiness schema markup
· Google Business Profile linked and matched
Image · Content inventory / audit spreadsheet
Image · Before/after copy comparison for a key page
12
Design System
A small system for a small team
Color
#18181B
Primary
#6366F1
Accent
#10B981
Success
#E7E5E4
Surface
#FFFFFF
Background
[Note which colors were inherited from the original brand and which were added; contrast ratios checked to WCAG AA.]
Typography
Heading 1
[Font] Bold · 48/56
Heading 2
[Font] Bold · 32/40
Heading 3
[Font] Semibold · 20/28
Body — The quick brown fox jumps over the lazy dog.
[Font] Regular · 16/26
Components
Primary button
Secondary
Text link →
Service card
Short description of the service.
[Buttons, cards, nav, form fields, certification badge — all built as Figma components with variants.]
Imagery & iconography
[Photo style guidelines, treatment, and icon set used. Note which original images were retained.]
13
Accessibility
Audit against WCAG 2.2 AA
The old site was checked, issues logged, and each one resolved in the redesign. Verified with [axe / WAVE / Lighthouse] plus manual keyboard and screen-reader testing.
[00]
Issues found on old site
[00]
Issues remaining after launch
[00]/100
Lighthouse accessibility score
[0.0]:1
Minimum text contrast ratio
Issue
WCAG criterion
Severity
Fix
Low text contrast on brand color
1.4.3 Contrast
High
[Darkened accent shade; added dark text variant]
Images missing alt text
1.1.1 Non-text content
High
[Descriptive alt on all images; decorative marked empty]
No visible focus state
2.4.7 Focus visible
Medium
[2px focus ring on all interactive elements]
Skipped heading levels
1.3.1 Info & relationships
Medium
[Logical H1–H3 hierarchy per page]
Small tap targets on mobile
2.5.8 Target size
Medium
[Minimum 44×44px on all buttons and links]
Form fields without labels
3.3.2 Labels or instructions
High
[Visible labels and inline error messages]
14
Before & After
Key screens, side by side
Before
After
Homepage
Before
Before · Homepage
After
After · Homepage
Certifications page
Before
Before · Certifications
After
After · Certifications with sub-pages
Mobile
Before
Before · Mobile
After
After · Mobile
15
Usability Testing
Testing the prototype with real customers
[0] participants matching the primary persona completed [0] tasks on the clickable prototype. Sessions were [remote / in person], [00] minutes each.
Participants
[0]
[Mix of existing and prospective customers]
Overall task success
[00]%
Up from [00]% on the old site
Ease rating (SEQ)
[0.0]/7
Average across all tasks
Task
Success
Avg. time
Key observation
Change made
Find what [certification] means
[0]/[0]
[00]s
[Users expected to click the badge itself]
[Made badges clickable to sub-pages]
Request a quote for [service]
[0]/[0]
[00]s
[Form felt long on mobile]
[Cut form to 4 fields]
Find opening hours and location
[0]/[0]
[00]s
[Looked in footer first]
[Added hours to footer and contact page]
Identify which services are offered
[0]/[0]
[00]s
[Two service names were unclear]
[Renamed in plain language]
Image · Testing session / affinity map of observations
What participants said
"[Quote about certifications being easier to understand.]"
"[Quote about finding the contact button quickly.]"
"[Quote highlighting a remaining pain point.]"
16
Why It's Better
Six ways the new site is better
01
Clearer navigation
[Fewer top-level items; certifications and services one click away.]
02
Works on mobile
[Fully responsive; tap targets and readable type at every breakpoint.]
03
Trust up front
[Certifications, reviews and credentials visible above the fold.]
04
Obvious next step
[One primary CTA repeated consistently across the site.]
05
Accessible and findable
[WCAG 2.2 AA compliant and structured for local search.]
06
Easy to maintain
[Component-based design so the owner can add pages without breaking it.]
17
Results
Measured against the goals
Chart · Before vs. after metrics
Metric
Before
After
Change
Enquiries / month
[00]
[00]
+[00]%
Bounce rate
[00]%
[00]%
−[00]%
Organic search traffic
[00]
[00]
+[00]%
Time to find certifications
[00]s
[00]s
−[00]%
Mobile Lighthouse score
[00]
[00]
+[00]
Usability test task success
[00]%
[00]%
+[00]%
"[Client testimonial about the new site.]"
— [Owner name], [Business]
18
Handoff & Maintenance
Built so the owner can run it
A redesign only works if the business can keep it up to date without a designer. Handoff covered the build, the CMS, and a short training session.
Platform & build
[CMS name] chosen for [cost / ease of editing / existing hosting]. Built by [me / developer / no-code]. Design tokens and components mapped 1:1 to CMS styles so edits stay on-brand.
What was delivered
· Figma file with components, variants and dev-mode specs
· Page templates: home, service, certification, contact
· Style guide PDF (colors, type, imagery, tone)
· Content spreadsheet with final copy and alt text
· Analytics and Search Console set up and verified
Owner training
· [00]-minute walkthrough recorded as video
· One-page guide: add a service, update hours, post a review
· Do / don't rules for images and text length
· Monthly checklist: check forms, analytics, broken links
Image · Figma component library / dev-mode handoff
Image · CMS editing view or owner's quick-start guide
19
Reflection & Next Steps
What I learned
[Working with a small-business owner, balancing brand continuity with improvement, designing for limited content and budget.]
What I'd do differently
[e.g. test the certification sub-pages with real customers earlier; involve the developer before hi-fi.]
Next steps
[Online booking, blog / SEO content, follow-up analytics review at 90 days, second round of usability testing on the live site.]
Case study template · 19 sections · Replace all [bracketed] text and dashed placeholders
Issue
WCAG criterion
Severity
Fix
Low text contrast on brand color
1.4.3 Contrast
High
[Darkened accent shade; added dark text variant]
Images missing alt text
1.1.1 Non-text content
High
[Descriptive alt on all images; decorative marked empty]
No visible focus state
2.4.7 Focus visible
Medium
[2px focus ring on all interactive elements]
Skipped heading levels
1.3.1 Info & relationships
Medium
[Logical H1–H3 hierarchy per page]
Small tap targets on mobile
2.5.8 Target size
Medium
[Minimum 44×44px on all buttons and links]
Form fields without labels
3.3.2 Labels or instructions
High
[Visible labels and inline error messages]