Launch
english
A responsive website focused on making English test practice easy and effective.
TIMELINE
12 weeks
ROLE
UX/UI Designer
TOOLS
Figma, Figjam, Google docs, read ai
Project Overview
The project began with a defined set of requirements, and our team's goal was to understand how similar test platforms currently operate, how is the test experience, and what patterns are commonly used. This helped us identify which gaps in the market align with our value proposition and where our design could genuinely improve the study experience.
Competitive Analysis
I conducted a competitive analysis of four online testing platforms: Cambridge Assessment, EF SET, Test-English, and Aptitude-test. I examined their visual design, test page layouts, test features, question formats, results pages, and overall content structure.
I created different comparison tables for each aspect to figure out what worked well and where the experience could be improved in different parts of the user experience.
I summarised the insights from the competitive audit into a list of improvement opportunities such as missing features and common design issues, focusing on the sections that aligned with the project brief.
01 Unclear Test Progress
Sometimes there is no clear guide to show how many questions are answered or left.
02 No Learning Support
The focus is on the final score rather than on learning part of taking a test.
03 No Flexibility
One-size-fits-all test modes that don't match users' different goals or study habits.
04 Missing Review Features
None of the platforms allow users to mark a question and revisit it later.
05 Poor Results Detail
Results pages are too basic and they don’t provide detailed explanations on answers.
06 Distracting Interface
Distracting interfaces that make it hard for learners to focus on the test.
In this stage, I created a persona to show who our users are and what they need. I also shaped a clear problem statement to outline exactly what challenge we were trying to solve. This helped me stay focused through the project and check each decision against our goals.
Persona
Our main persona is a high-school student who has been slipping behind in English. She is anxious about her performance, and over the past year, she has relied heavily on AI tools to complete her homework. While this helped her keep up short-term, it has weakened her performance on exams.
At home, Mia tries to study, but she gets easily distracted and long courses overwhelm her. Her parents are becoming worried about whether she will be able to get into a good college if her grades continue to fall, and this concern adds even more pressure on her.
Problem Statement
Many students struggle to prepare for English exams because the education system does not give them the support they need to learn effectively. As a result of this faulty system, students fall behind, lose confidence, and often do not perform well on exams. This causes low scores, tension at home, and rising concern from students and parents about how it will affect their chances for higher education.
After outlining the users and their needs, we focused on shaping how the test experience should work. We created user flows to outline every step from starting a test to completing it. Then we created wireframes and refined them through several iterations.
Test Mode Logic
In the early stages of the project, all requested features were placed into a single test experience. This caused structural issues: features designed for practice were mixed with features intended to simulate real exams. The result was an inconsistent experience that did not clearly support user's needs.
To resolve this, I divided the test experience into Practice Mode, supporting flexible learning, and Real Test Mode, simulating a real exam environment. Each mode now follows its own logic and gives learners the clarity they need: one space to study, and one space to measure their readiness.
Practice Mode
For Flexible Learning
No Time Limit: Reduces pressure while learning.
Answer All Questions: Helps users practise every item without skipping.
View Answer: Allows immediate checking and provides clear explanation for every question.
Send Feedback: Lets users report issues with questions.
Real Test Mode
Similar to Real Exam Conditions
Limited Time: Offers optional timer that can be turned on or off.
Mark for Review: Helps users mark difficult questions and come back to them later.
No Immediate Answers: Prevents checking answers before submitting.
Skip Questions: Following real exam rules.
We started with low fidelity wireframes to see how the existing codebase designs could be improved. At this stage, we focused only on a small set of features. The goal was to understand the overall structure of the test pages and how different question types should work before adding more features and different test modes.
After making sure we were on the right track, we added more details and features step by step. The example below shows the main stages we went through to reach the final designs. It starts with the original codebase layout, then the early low-fidelity wireframes. Next came mid-fidelity wireframes with more features and an initial colour palette. After that, we created several updated versions based on feedback from designers and stakeholders. Finally, we tested the designs with real users and used their input to shape the final results.
After finalising the design details, we moved into high-fidelity prototyping. This stage allowed us to show the motion and interactions. We also created a basic design system to maintain consistency across the product and enable a clearer development handoff.
Test Features
Practice Test Mode
Practice Mode is designed for learning without pressure. Users go through all questions, check answers instantly, and focus on understanding mistakes with clear explanations. It is ideal for study and skill-building.
Real Test Mode
Real Test Mode is designed to simulate real exam conditions. Time is limited, answers are hidden until submission, and users can use the Mark for Review feature to manage difficult questions. It helps learners measure their readiness and experience the test as it would happen in reality.
I designed a set of reusable components in order to adjust elements across different screens without rebuilding everything from scratch. For example, I created component sets for question tags and answer blocks with different states. These reusable components helped us move faster in later iterations.
Since we were introducing a set of new features, it was important to test the designs with users to confirm that everything worked as expected. This step helped us validate the experience, spot any issues early, and ensure the designs were ready for a smooth developer handoff.
usability test
I took responsibility for running the usability test for this project. Before starting, I created a plan to make sure we didn’t lose focus and were clear about what we wanted to learn.
We ran a set of moderated tests with 4 participants on Google Meet. Participants were asked to complete tasks step by step, and talk through what they expected to happen. After each task, they were asked follow-up questions about how easy the task felt, whether anything was confusing, and what they thought about specific features on both desktop and mobile screens. This helped us spot where users were getting stuck and what needed to be improved.
test results
To analyse the results of the usability test, I created an affinity map. I added each observation and user comment to an individual sticky note and then grouped them into related themes.
The insights highlighted several areas for improvement. For example, an important drop-down menu was not visible enough, and a key icon was consistently misunderstood by users. Some copy was also refined to make instructions clearer and easier to understand.
Working on this project as part of a real team for the first time helped me understand that one of the key areas I need to improve is explaining my design decisions to teammates and stakeholders. That’s why I’m now reading the book "Articulating Design Decisions" to learn how to explain my thinking better in future projects.
Another challenge was bringing what I had learnt in my course into a real project that already had requirements, features, and design work in place before I joined. I had to quickly understand the scope, suggest changes to earlier designs, and get approvals. Doing this every day helped me see how design actually moves through a team, how requirements shift, and how important communication is when working with different roles. This process taught me a lot about how UX work happens in real situations.
The product is not live yet, however, if it were, I would plan to take the additional actions outlined below.
Next Steps
Post-Launch Testing
Run usability tests after development and track KPIs such as test completion rates, return rates, and score improvements.
Interview Real Students
Talk to high-school students to learn how they want to practise English and what they expect.
Evaluate Test Modes
Understand which mode users find easier and more convenient to use, and assess whether the existing modes need any changes or if additional modes should be introduced.
Explore Monetisation
Look into simple, user-friendly ways the company could earn from the test experience.
Link Weaknesses to Lessons
Use user performance data to direct students to relevant lessons.
Progress Tracking
Design the profile screen and add a progress section to help users see their improvement over time.
Fix Smaller Issues
Revisit the smaller problems found in early tests and run focused follow-up testing.
Accessibility Review
Evaluate the test experience for accessibility gaps and adjust the UI and interaction patterns accordingly.
