ABA English Campus

ABA English Campus is an online platform which lets users learn English wherever they are. The course is split into levels which are divided into units, where users can practise listening, speaking and writing after having watched a short film, improve their vocabulary, understand grammar and also contact with their assigned teacher.

In this project, I worked as a UX / UI designer in a team with a Content manager and a UI designer.

CompanyAmerican & British AcademyRoleUX / UI designer

The challenge

How may we improve students learning experience?

The approach

Inside student’s mind


We put ourselves in the student’s shoes to localise friction points and to improve them. The key element of a good online learning experience is the quality of both methodology and platform's experience, therefore we implemented an easy and quick way to collect feedback from students without distracting them from the course flow and allowed the company to be able to constantly improve the platform.

The approach

Inside student’s mind


We put ourselves in the student’s shoes to localise friction points and to improve them. The key element of a good online learning experience is the quality of both methodology and platform's experience, therefore we implemented an easy and quick way to collect feedback from students without distracting them from the course flow and allowed the company to be able to constantly improve the platform.

The approach

Inside student’s mind


We put ourselves in the student’s shoes to localise friction points and to improve them. The key element of a good online learning experience is the quality of both methodology and platform's experience, therefore we implemented an easy and quick way to collect feedback from students without distracting them from the course flow and allowed the company to be able to constantly improve the platform.

Constraints

The inalterable course


We were not allowed to modify or alter the course structure. The methodology had been created by teaching professionals, therefore we only could rethink the way users interacted with the course.

Constraints

The inalterable course


We were not allowed to modify or alter the course structure. The methodology had been created by teaching professionals, therefore we only could rethink the way users interacted with the course.

Constraints

The inalterable course


We were not allowed to modify or alter the course structure. The methodology had been created by teaching professionals, therefore we only could rethink the way users interacted with the course.

Research

Personas


We analysed the potential user’s profile and we created personas to design having always the current student’s experience in mind.

Demographic data had been determined from reader’s blog and Facebook followers (an active page with more than 1K followers with an average of 10 - 50 answers on each post). We also extracted data from Google Adwords and Google Analytics.

Psychographic data had been collected through reader’s blog comments and Facebook followers comments and messages. We also extracted data from users subscriptions from the web, from help centre issues and from some online forums.

Behavior data had been collected through forums, Facebook comments and from the blog.

Data collection.
Research

Personas


We analysed the potential user’s profile and we created personas to design having always the current student’s experience in mind.

Demographic data had been determined from reader’s blog and Facebook followers (an active page with more than 1K followers with an average of 10 - 50 answers on each post). We also extracted data from Google Adwords and Google Analytics.

Psychographic data had been collected through reader’s blog comments and Facebook followers comments and messages. We also extracted data from users subscriptions from the web, from help centre issues and from some online forums.

Behavior data had been collected through forums, Facebook comments and from the blog.

Data collection.
Research

Personas


We analysed the potential user’s profile and we created personas to design having always the current student’s experience in mind.

Demographic data had been determined from reader’s blog and Facebook followers (an active page with more than 1K followers with an average of 10 - 50 answers on each post). We also extracted data from Google Adwords and Google Analytics.

Psychographic data had been collected through reader’s blog comments and Facebook followers comments and messages. We also extracted data from users subscriptions from the web, from help centre issues and from some online forums.

Behavior data had been collected through forums, Facebook comments and from the blog.

Data collection.

A product could not be successful in its duty without a clear understanding of what it does, what problems it solves or to whom it solves those problems.
Our goal was to make sure the platform solved typical online learning issues in a clear and simple way.

Creating personas.

A product could not be successful in its duty without a clear understanding of what it does, what problems it solves or to whom it solves those problems.
Our goal was to make sure the platform solved typical online learning issues in a clear and simple way.

Creating personas.

A product could not be successful in its duty without a clear understanding of what it does, what problems it solves or to whom it solves those problems.
Our goal was to make sure the platform solved typical online learning issues in a clear and simple way.

Creating personas.

User journey


Once personas were created, we designed the user journey keeping in mind the student’s flow since entering for the first time into the platform until finishing the course, in order to analyze and to find pain points.
To achieve this goal, we analysed a complete direct journey, corresponding with a highly motivated user, vs. a journey with some breaks, corresponding with an average user who studies with more or less motivation.

We contrasted this information through a guerrilla test among the newest employees since they didn’t have too much information about the company and could have a much more impartial vision.

Direct journey (top) vs. journey with breaks (bottom).

User journey


Once personas were created, we designed the user journey keeping in mind the student’s flow since entering for the first time into the platform until finishing the course, in order to analyze and to find pain points.
To achieve this goal, we analysed a complete direct journey, corresponding with a highly motivated user, vs. a journey with some breaks, corresponding with an average user who studies with more or less motivation.

We contrasted this information through a guerrilla test among the newest employees since they didn’t have too much information about the company and could have a much more impartial vision.

Direct journey (top) vs. journey with breaks (bottom).

User journey


Once personas were created, we designed the user journey keeping in mind the student’s flow since entering for the first time into the platform until finishing the course, in order to analyze and to find pain points.
To achieve this goal, we analysed a complete direct journey, corresponding with a highly motivated user, vs. a journey with some breaks, corresponding with an average user who studies with more or less motivation.

We contrasted this information through a guerrilla test among the newest employees since they didn’t have too much information about the company and could have a much more impartial vision.

Direct journey (top) vs. journey with breaks (bottom).
Design

Improving the experience


With all of this information, we started creating wireframes.
After the analysis, we detected that studying a complete unit without any breaks contributed to increasing student's cognitive load considerably, so user's morale decreased at the end of each lesson.
We proposed to recommend users to take a break every two lessons and to congratulate them every time users finished a section in order to improve their motivation.
On the other hand, with the purpose of improving the platform in an easy and quick way, as before mentioned, at the end of each level we allowed users to give us feedback.

Design

Improving the experience


With all of this information, we started creating wireframes.
After the analysis, we detected that studying a complete unit without any breaks contributed to increasing student's cognitive load considerably, so user's morale decreased at the end of each lesson.
We proposed to recommend users to take a break every two lessons and to congratulate them every time users finished a section in order to improve their motivation.
On the other hand, with the purpose of improving the platform in an easy and quick way, as before mentioned, at the end of each level we allowed users to give us feedback.

Design

Improving the experience


With all of this information, we started creating wireframes.
After the analysis, we detected that studying a complete unit without any breaks contributed to increasing student's cognitive load considerably, so user's morale decreased at the end of each lesson.
We proposed to recommend users to take a break every two lessons and to congratulate them every time users finished a section in order to improve their motivation.
On the other hand, with the purpose of improving the platform in an easy and quick way, as before mentioned, at the end of each level we allowed users to give us feedback.

Wireframing stage.

We tried to reduce the visual load on the information shown, giving priority to white space and making exercises more intuitive, therefore they were easier to understand.
We implemented the teacher’s presence on the dashboard with the purpose of giving a human touch to the platform and to feel that, even if students would be studying on their devices by their own, they would go through the learning adventure with the assigned teacher on their side.

We also implemented the presence of character's faces during those lessons where users interpreted a short film's dialogue, to increase engagement with the exercise and to made students feel as an actual participant of the dialogue.

We tried to reduce the visual load on the information shown, giving priority to white space and making exercises more intuitive, therefore they were easier to understand.
We implemented the teacher’s presence on the dashboard with the purpose of giving a human touch to the platform and to feel that, even if students would be studying on their devices by their own, they would go through the learning adventure with the assigned teacher on their side.

We also implemented the presence of character's faces during those lessons where users interpreted a short film's dialogue, to increase engagement with the exercise and to made students feel as an actual participant of the dialogue.

We tried to reduce the visual load on the information shown, giving priority to white space and making exercises more intuitive, therefore they were easier to understand.
We implemented the teacher’s presence on the dashboard with the purpose of giving a human touch to the platform and to feel that, even if students would be studying on their devices by their own, they would go through the learning adventure with the assigned teacher on their side.

We also implemented the presence of character's faces during those lessons where users interpreted a short film's dialogue, to increase engagement with the exercise and to made students feel as an actual participant of the dialogue.

A complete lesson with 8 exercises + congrats page.
Onboarding flow (left), dashboard (center) and FAQ's page.

Finally, we designed the platform responsive, to give an opportunity to those students who prefer to keep studying on their smartphones when they are on their way home after work or even on their tablets when they are laying on the sofa.

Finally, we designed the platform responsive, to give an opportunity to those students who prefer to keep studying on their smartphones when they are on their way home after work or even on their tablets when they are laying on the sofa.

Finally, we designed the platform responsive, to give an opportunity to those students who prefer to keep studying on their smartphones when they are on their way home after work or even on their tablets when they are laying on the sofa.

Future

Next steps


Next steps would be the front-end development and implementation of the new site and gather data about user's behaviour, to validate hypotheses and iterate on them.

Future

Next steps


Next steps would be the front-end development and implementation of the new site and gather data about user's behaviour, to validate hypotheses and iterate on them.

Future

Next steps


Next steps would be the front-end development and implementation of the new site and gather data about user's behaviour, to validate hypotheses and iterate on them.