Best Security Training & Associates Inc.
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, Framer, AI]
Client
[Security ·Washington DC/Maryland/Virginia]
02
Overview
The business
The best security training programs combine hands-on instruction with real-world scenarios, covering areas like physical security, asset protection, and emergency response.
The problem
Outdated visuals, unclear services, no mobile support, multiple broken links, and confusing UI elements with repetitve features.
The outcome
A new redesign built with clarity, credibility, and a personable visual.
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
$[1,200]
Timeline
[6] weeks
Team
Me
Platform
[Framer]
Other constraints
Limited information from old site · Limited photography · Owner has no technical background · Much of content had to be rewritten from scratch · Business had to be claimed from Google
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 Google Ranking]
Top 5 in
Contact form submissions / month
Goal 02
[Reduce bounce rate]
−[00]%
Homepage bounce rate
Goal 03
[Faster time to key info]
5-10s
Time to find services / certifications
Goal 04
[Mobile usability]
100/100
Users tested are able to achieve the same outcome in approx same amount of time
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