English Language School Website Redesign
Overview
While living and working at an English Language School in Vietnam, I redesigned, prototyped, and implemented live updates to the website.
Role Product Designer & Front-End Developer
Duration 3.5 weeks
Tools Figma, HTML/CSS
Deliverable Live responsive website
Background
Ngoại Ngữ Trần Tiến is an English language school for children in Vietnam where lessons are supported by a team of international volunteers including native English speakers.
Project Brief
Create a trustworthy, premium online presence that positions the school as a national provider of Cambridge exam preparation for students across Vietnam.
Goals
1 Build trust
2 Increase enquiries
3 Clarify courses
The starting point
Before beginning the redesign, I reviewed the school's existing website to identify usability, visual design, and content issues. The redesign focused on the three highest-traffic pages: Home, About Us, and Courses.
Unspecific headline and unclear photos
Course cards hidden behind horizontal scroll
Missing CTA and obvious next steps
Lack of clear hierarchy and structure
Process
The redesign followed an iterative process, moving from competitor research and strategic recommendations through wireframing, visual design, and implementation. Insights from the audit guided design decisions, ensuring the final website improved trust, usability, and the student enquiry journey.
Competitor Audit
To translate the project goals into actionable design decisions, I analysed six direct and indirect competitor schools. The audit evaluated first impressions, navigation, accessibility, visual identity, content structure, course clarity, and trust-building elements.
I identified common patterns among successful national academies and consolidated these findings into recommendations for the three key website areas: Home, About Us, and Courses.
Design Insights
The competitor audit highlighted three key opportunities for improvement, focused around the website pages with the greatest impact on user trust and conversion.
Homepage
Build trust and encourage enquiries
The homepage needed to immediately communicate quality and guide parents towards taking action.
Key improvements:
High-quality hero imagery showcasing the learning environment
Clear, compelling headline communicating value
Prominent enquiry call-to-action
About Us
Establish credibility and emotional connection
The About Us page needed to reassure parents that their children would receive high-quality education from a trusted organisation.
Key improvements:
Founder introduction and message
Academy growth timeline
Teacher profiles
Clear values and mission
Student reviews and success stories
Courses
Reduce decision-making friction
Course information needed clearer structure to help parents understand which programme best suited their child.
Key improvements:
Clear learning pathway from beginner to IELTS
Stronger connection to Cambridge qualifications
Age-based course organisation
Course-specific testimonials
Course recommendation tool
Wireframe Concepts
Following discussions with the school director, I translated the recommendations into mobile-first wireframes. Since most parents accessed the website on mobile devices, I prioritised the smaller screen experience before adapting layouts for desktop.
Creating the wireframes helped define the page structure, identify missing content, and plan the required photography. I collaborated with the school's social media content lead to capture images suited to the new layouts.
High-Fidelity Mockups
With the structure established and new photography available, I developed high-fidelity mockups in Figma. These allowed the school director to visualise the proposed changes and review how the updated branding, imagery, and content hierarchy worked together before implementation.
Implementation
After approval, I transitioned from designer to developer, implementing the redesigned website using HTML and CSS. Working directly on the live site strengthened my understanding of the relationship between design and development, including practical considerations such as responsive layouts and version control.
Solution
As I was also responsible for developing the website, the final solution was not just a prototype but a live website. I implemented my design using HTML and CSS, building on and adapting the existing code.
Homepage
The homepage was redesigned to create a stronger first impression, build trust, and encourage parents to explore the school’s offerings.
About Us Page
The About Us page shifted from describing the school to demonstrating its credibility and personality.
Courses Page
The courses page was restructured to reduce decision-making effort and guide parents towards enrolment.
