Case Study 1:

Connect Students’
Website and app Design


Project Overview

The problem

Busy EFL teachers lack the time to plan exciting lessons and need to learn new technology tools to motivate students and improve their  students English skills.

The goal

Design an app providing EFL teachers with free resources, informational content, courses to improve their professional lives and also the opportunity to collaborate in a global project.

The product

The Connect Students’ mission is to help teachers to use technology tools and project development, connecting their students with students from other schools across the world to teach, learn and collaborate.

My role

UX designer designing a website for Connect Students  from conception to delivery.


Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Project duration

April 2021 to May 2022.

Understanding the user

User research: I created an empathy map

In order to participate in free webinars for EFL for teachers I asked teachers to respond to my google form questions such as: what are their biggest challenges, fears and dreams in their work. 153 teachers responded the questions.

User pain points

1.Pain point

Teachers feel they are failing to lead students to language learning and skills development, unable to stream content, not being able to solve the difficulties of the students, not able to work the content of English classes, not reaching educational goals, lack of motivation.

2. Pain Point

They want to be respected as a teacher, be a very successful professional, quality public education with equity and appreciation of teachers, achieve their goals, and grow professionally.

3.Pain Point

Educators need to prepare creative classes in the online context for children, to get students to practice English when alone, spark interest in students, motivate participation in remote class, Keep students focused, prepare attractive classes and always keep up to date with innovative resources.

4.Pain Point

They need to reinvent themselves, using means to focus the attention of their teenagers students. They also feel they are failing to be clear and can’t get students to see the use of English language in everyday life.

Persona & problem statement

Simone is a busy elementary EFL teacher who needs easy to use teaching resources and also to learn about new tech tools to use in the classroom because she wants to plan lessons to motivate and improve her students English skills.

User journey map

I get them into clients’ journey maps, starting with getting them interested in global connection subjects and free pedagogical tools and learning more about how to use technology in the classroom and motivate their students.

Starting the design

Our users need to find in our app a better way to

Make their students learn more, motivate and promote new experiences to their students.

because: They want to help their students to accept learning as something cool, interesting and become a better professional.


Paper wireframes


Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.

Screen size variations 

I started to work on designs for additional screen sizes to make sure the site would be fully responsive. 

Digital wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen I created a page for the users to access free resources to download and my courses.


Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was home+ nav page, about, resources page, login and courses page and more  so the prototype could be used in a usability study. 

Low fidelity Prototype

Usability study findings


Improve Typography and layout to more  clear and simple to understand.

2. Layout

Add courses pages, make the layout more appealing


Insert social media and footer with more informations and credibility.

Refining the design

Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was to revise the design and  typography to look readable, cleaner as it look a bit cluttered before.

Accessibility considerations

1.Screen Readers

Provided access
to users who are vision impaired through adding alt text to images for screen readers.


I used headings with different sized text for clear visual hierarchy 

Screen size variations

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users access from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible. 

High-fidelity Prototype

Link to high Fidelity Prototype

Going forward



The website makes users feel like Connect Students really thinks about how to meet the users needs. 

What I learned

While designing the Connect Students’ website, I learned that the first ideas are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the designs.

Next steps

1. Testing

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

2. Ideation

Identify any additional areas of need and ideate on new features