A full-cycle UX redesign and frontend implementation of an international online English school - from heuristic audit to a live, responsive codebase. Self-initiated while working as QA Manager.
"A website that didn't match the school's ambition - until it did."
Global Speak Academy is an international online English school with a global student base. Despite having strong teaching quality and genuine student results, its website was actively harming growth - low trust signals, poor navigation, and no clear conversion path. I identified this as QA Manager and proposed a complete redesign.
The school had genuine results and loyal students, but its website communicated the opposite. The visual quality, navigation logic, and content structure did not align with user expectations for a modern international education platform - directly harming student acquisition.
This was a self-initiated project - not assigned. I proposed the redesign, designed the full system in Figma, and then implemented it as a complete responsive codebase. The founder, Brandi Stephens, reviewed the redesigned structure and provided positive feedback on the navigation and visual clarity.
Before touching Figma, I conducted a full heuristic evaluation of the existing site. The screenshots below show the original globalspeak academy website - a Wix-built site with heavy stock imagery, flat navigation, and no clear conversion hierarchy.
Original homepage - stock imagery as hero, flat nav, no clear CTA hierarchy
Redesigned homepage - editorial layout, clear hierarchy, $10 trial CTA as primary action
"The original site had the right content - programs, testimonials, pricing, about - but no structure to carry users through it. Every section felt like a separate page. The redesign's primary job was to create one coherent journey."
I conducted a full heuristic evaluation against Nielsen's 10 principles, extended with conversion-focused analysis. These were the issues with measurable impact on business outcomes.
All elements had equal visual weight. Users couldn't identify what to read first or what action to take.
All program types listed as top-level nav items. No grouping, no hierarchy, no logical progression for users.
No consistent primary conversion action. "Book trial" was buried, competing with decorative elements.
Multiple font sizes with no scale system. Dense text blocks, low contrast, reduced readability.
Buttons, cards, and sections all styled independently. Zero visual consistency across pages.
Courses listed without comparison logic. Users couldn't determine which program fit their level or need.
Large uninterrupted text blocks with no visual breathing room. High cognitive load, low engagement.
Inconsistent color usage, no visual rhythm. The site didn't visually communicate premium education.
No Google Analytics, no tracking events, no conversion measurement. Zero visibility into user behavior.
Dense content, complex navigation, poor readability on small screens - critical for a global student base.
The school serves a genuinely diverse international audience. Understanding each user type shaped every structural and visual decision in the redesign.
Professionals and adults learning English online. Motivated but time-poor - they need clear information fast and zero friction to book a trial.
Parents researching English programs for their children (ages 4-12). High trust threshold - they need reassurance about teacher quality and structure.
Non-English speakers from various countries comparing platforms. Language clarity and visual structure matter more than long text - they skim heavily.
Cold traffic landing from search or social. No prior knowledge of the school. Need to understand the offering within the first 5-8 seconds.
Users evaluating multiple English learning services. Decision-driven - they need clear differentiation, structured pricing, and a reason to choose GSA.
HR or L&D managers exploring corporate English training. Need a professional presentation of business solutions with scalability information.
The original site had no navigational logic - program types were listed as individual top-level items. I rebuilt the entire IA around user decision stages, creating a predictable progression from awareness to conversion.
⚠ All programs as equal top-level nav items - no hierarchy or grouping
✓ Logical grouping → clear journey: Programs → Pricing → Trial
"The redesigned navigation created a natural user journey: Discover programs → Compare pricing → Book a trial. This sequence mirrors how users actually make decisions about online education, and every page now hands off to the next step."
Mapping the end-to-end journey of a first-time visitor - from initial awareness through post-trial conversion - revealed critical drop-off points in the original site and informed every structural decision in the redesign.
|
Stage 1
Awareness
|
Stage 2
Consideration
|
Stage 3
Evaluation
|
Stage 4
Decision
|
Stage 5
Post-Trial
|
|
|---|---|---|---|---|---|
|
Actions
|
Searches "online English school" · Sees Google result · Lands on homepage
|
Scrolls homepage · Clicks into Programs · Reads program descriptions
|
Opens Pricing page · Compares plans · Reads FAQ · Checks reviews
|
Clicks $10 Trial · Reads what's included · Completes booking form
|
Attends trial · Receives follow-up · Converts to paid plan
|
|
Touchpoints
|
Google SERP
Homepage hero
Nav bar
|
Programs page
Program tabs
Testimonials
|
Pricing page
FAQ accordion
Trust badges
|
Trial page
Booking form
Price clarity
|
Email follow-up
Trial session
Upsell offer
|
|
Emotion
|
😐
Neutral curiosity
Just looking
|
🤔
Interested but unsure
Building understanding
|
😟
Anxious about cost
Comparing options
|
😌
Reassured, ready
Low-risk commitment
|
😊
Satisfied, converting
Ready for full plan
|
|
Pain Points
Before redesign |
✕Stock photo hero - no value prop visible
✕No clear "what this site is" within 5 seconds
|
✕All 5 programs as flat nav items - overwhelming
✕No comparison logic between program types
|
✕15+ plans with no structure - decision paralysis
✕No FAQ - objections unresolved on page
|
✕Trial page buried - no dedicated high-trust page
✕Price not prominent - anxiety unresolved
|
✕No post-trial email flow or upsell path
✕No analytics to measure any of this
|
|
Solutions
After redesign |
✓Editorial hero: headline + sub + primary CTA above fold
✓Trust signals (4.9★, student count) visible instantly
|
✓Programs grouped in dropdown - one decision at a time
✓Tab layout with "who it's for" per program
|
✓Tab switcher isolates plan categories - 2–5 cards at a time
✓FAQ accordion resolves objections on-page
|
✓Dedicated trial page: $10 price hero + what's included grid
✓Lesson schedule timeline removes pre-purchase anxiety
|
✓GA4 infrastructure recommended + conversion tracking spec
✓Clear path from trial → paid plan in Pricing page
|
Each page was rebuilt from scratch with a clear role in the user journey. Here are the most strategically important ones.
The original programs page displayed fragmented information. The redesign introduces a tab-based structure - one tab per program type - with consistent card layouts, skill breakdowns, and direct CTAs. Users can now compare options without cognitive overload.
The pricing page required the most structural work. It now uses a tab-based plan switcher (Adult Monthly, Kids, Group, Pay-As-You-Go, etc.), featured card highlighting for the recommended plan, structured feature comparison lists, and a persistent "Not sure?" trial banner - all in a responsive grid.
The trial page is the primary conversion point. The redesign uses a split hero with the $10 price prominent left and an image right, a 6-card "What's included" grid, and a timeline schedule of the 90-minute lesson - so users know exactly what they're getting before they pay.
A completely new page with no equivalent in the original site. Weekly vocabulary, idioms, and phrasal verbs - always free, no login. The editorial layout uses sticky sidebar labels, numbered vocabulary lists, and quote-style feature blocks. Serves dual purpose: user value and organic search traffic.
One of the root causes of the original site's inconsistency was the absence of any design system. I built a complete UI kit in Figma before writing a single line of code - then translated it into CSS custom properties for scalable implementation.
All components built in Figma with Auto Layout and variants - then translated directly into reusable CSS classes.
Consistent spacing system, generous whitespace, and section-level padding defined as CSS variables for easy scale.
After completing the design system, I implemented the entire website in HTML, CSS, and vanilla JavaScript - no frameworks, no build tools. The result is a fast, maintainable codebase that a developer could take over immediately.
All design tokens (colors, font sizes, spacing, line-heights) defined as CSS variables in main.css. One source of truth across all 6 pages.
CSS Grid used throughout - responsive auto-fill grids for pricing cards, programs grid, and editorial layouts without JavaScript layout logic.
Tab-based navigation on Programs and Pricing pages - vanilla JS, URL param support (?tab=adult) for deep linking and shareable URLs.
8 breakpoints from 320px to 1920px. Each layout reconfigures cleanly: stacked mobile → 2-col tablet → full desktop editorial.
IntersectionObserver-based reveal animations on cards and list items - staggered delays for natural feel. Zero external dependencies.
Full custom mobile menu with burger toggle, nested dropdown support, keyboard accessibility, and body scroll lock when open.
Each page ships with 8 responsive breakpoints, from 320px to 1920px+. The layouts don't just "shrink" - they reconfigure. Key patterns like two-column grids, editorial sidebars, and tab navigation all have purpose-built mobile variants.
Full editorial layouts with sticky sidebar labels, 120px horizontal padding, multi-column grids up to 4 columns.
Grids collapse to 2 columns. Sticky sidebars become static. Navigation dropdown becomes scrollable. Two-column heroes stack to single column.
Full single-column layout. Custom mobile menu with nested dropdowns. Pricing tabs scroll horizontally. CTAs expand to full width.
This project had two layers of complexity - design decisions and organisational constraints. Both required deliberate solutions.
The school has significantly more plan types than a typical subscription product - Adult Monthly (5 tiers), Kids programs, Group Classes, Pay-As-You-Go, Class Packages, and Self-Guided. Showing all on one page without overwhelming users was the hardest design problem in the project.
I designed a tab-based switcher that shows only one category at a time - reducing visible complexity to 2-5 cards per view. Within each category, a "Most Popular" featured card provides a strong default choice. The tab state persists via URL params (?tab=adult) so users can share or return to specific views.
This was a self-initiated project - I had no formal brief, no UX research budget, no scheduled stakeholder sessions, and no ability to conduct user testing. All decisions had to be grounded in the heuristic audit, standard conversion design patterns, and direct observation of the existing site's structural failures.
Every design decision maps back to a specific problem from the UX audit. Where I couldn't test with users, I applied established conversion design principles - clear CTA hierarchy, trust signals above the fold, friction reduction at key decision points, and progressive disclosure on complex pages like Pricing.
Outcome
Six pages, one design system, a full responsive codebase - delivered as a self-initiated project while working as QA Manager. The redesign demonstrates full-cycle capability: from identifying the business problem, through UX audit and IA restructuring, to production-ready HTML/CSS/JS implementation.
Project status note: The redesigned website was completed and approved visually by the founder, Brandi Stephens. Deployment was not finalised due to unresolved contractual and payment issues. The project is presented here as an independent portfolio piece demonstrating full-cycle UX and frontend capability.