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.
Responsibilities
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.
Sitemap
Paper wireframes
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.
Wireframes
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.
Usability study findings
1.Typography
Improve Typography and layout to more clear and simple to understand.
2. Layout
Add courses pages, make the layout more appealing
3.Information
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.
2.Headings
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
Going forward
Takeaways
Impact
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
RENATA MADUREIRA 