ABA English Website

ABA English Campus is an online platform which lets users learn English wherever they are. The company has a freemium business model whereby basic services are provided free of charge while more advanced features must be paid for.

Their methodology is the key of their course, based on visualizing short films where students could watch similar conversations to real life ones. Popular topics in those films are work, friendship, love and family. Once a short film has been watched, students will find seven sections with exercises related to the film.

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 our web experience?

The approach

Content is king


The old webpage tried to communicate too much information to different targets, had a confusing navigation and made it hard to find the key points to decide why to try the product.

The principal aim of this project was to make information easy to read and to understand. The objective of the website was to show information in order to motivate users to try the product, so we decided to show quality instead of quantity. Ordered quality information is always the best way to inspire and to trigger user’s curiosity.

Furthermore, the site was not prepared for being visualized on mobile devices, which closed the door to potential users who were searching for English online courses on their tablets and/or smartphones.

The approach

Content is king


The old webpage tried to communicate too much information to different targets, had a confusing navigation and made it hard to find the key points to decide why to try the product.

The principal aim of this project was to make information easy to read and to understand. The objective of the website was to show information in order to motivate users to try the product, so we decided to show quality instead of quantity. Ordered quality information is always the best way to inspire and to trigger user’s curiosity.

Furthermore, the site was not prepared for being visualized on mobile devices, which closed the door to potential users who were searching for English online courses on their tablets and/or smartphones.

The approach

Content is king


The old webpage tried to communicate too much information to different targets, had a confusing navigation and made it hard to find the key points to decide why to try the product.

The principal aim of this project was to make information easy to read and to understand. The objective of the website was to show information in order to motivate users to try the product, so we decided to show quality instead of quantity. Ordered quality information is always the best way to inspire and to trigger user’s curiosity.

Furthermore, the site was not prepared for being visualized on mobile devices, which closed the door to potential users who were searching for English online courses on their tablets and/or smartphones.

Constraints

Over-busied content team


Content creation task was divided between Customer Service team and the teaching staff. Therefore that task was slower than usual because both teams had to deal with their daily tasks + the copywriting task.

Constraints

Over-busied content team


Content creation task was divided between Customer Service team and the teaching staff. Therefore that task was slower than usual because both teams had to deal with their daily tasks + the copywriting task.

Constraints

Over-busied content team


Content creation task was divided between Customer Service team and the teaching staff. Therefore that task was slower than usual because both teams had to deal with their daily tasks + the copywriting task.

Research

Some findings


We requested to Customer Service team to create a list with the most common issues our customers were struggling on the site, and we realised the vast majority of them were issues related with the product's messy information. Even a couple of times some users called asking about learning English abroad.
We also compared this information with Google Analytics data, detecting pages with little traffic and higher bounce rate.

Research

Some findings


We requested to Customer Service team to create a list with the most common issues our customers were struggling on the site, and we realised the vast majority of them were issues related with the product's messy information. Even a couple of times some users called asking about learning English abroad.
We also compared this information with Google Analytics data, detecting pages with little traffic and higher bounce rate.

Research

Some findings


We requested to Customer Service team to create a list with the most common issues our customers were struggling on the site, and we realised the vast majority of them were issues related with the product's messy information. Even a couple of times some users called asking about learning English abroad.
We also compared this information with Google Analytics data, detecting pages with little traffic and higher bounce rate.

Information architecture

The magic of organization


We mainly kept in mind user’s behaviour when they landed on the website in their exploratory phase. At this point, users wanted to find some reasons to try this product and the main reasons we wanted to show were: the course methodology (based on watching short films) and the assigned teacher (a teacher who helps you through the course).

In order to make information searching easier, we decided to organize it. First of all, we made an inventory of all the existing pages on the site. We detected the most relevant information which was offering to users unique, useful and quality content and we redistributed it. In this way, we reduced the huge number of pages with the purpose of making navigability easy when users are searching for information about the product and also to avoid cognitive load caused by pages located in more than two levels depth.

For those users convinced to register and to try this product, we highlighted a call to action button on the header, presented all around the navigation through the site, in order to make it easily accessible.

Old structure (left) vs. new proposal (right).
Information architecture

The magic of organization


We mainly kept in mind user’s behaviour when they landed on the website in their exploratory phase. At this point, users wanted to find some reasons to try this product and the main reasons we wanted to show were: the course methodology (based on watching short films) and the assigned teacher (a teacher who helps you through the course).

In order to make information searching easier, we decided to organize it. First of all, we made an inventory of all the existing pages on the site. We detected the most relevant information which was offering to users unique, useful and quality content and we redistributed it. In this way, we reduced the huge number of pages with the purpose of making navigability easy when users are searching for information about the product and also to avoid cognitive load caused by pages located in more than two levels depth.

For those users convinced to register and to try this product, we highlighted a call to action button on the header, presented all around the navigation through the site, in order to make it easily accessible.

Old structure (left) vs. new proposal (right).
Information architecture

The magic of organization


We mainly kept in mind user’s behaviour when they landed on the website in their exploratory phase. At this point, users wanted to find some reasons to try this product and the main reasons we wanted to show were: the course methodology (based on watching short films) and the assigned teacher (a teacher who helps you through the course).

In order to make information searching easier, we decided to organize it. First of all, we made an inventory of all the existing pages on the site. We detected the most relevant information which was offering to users unique, useful and quality content and we redistributed it. In this way, we reduced the huge number of pages with the purpose of making navigability easy when users are searching for information about the product and also to avoid cognitive load caused by pages located in more than two levels depth.

For those users convinced to register and to try this product, we highlighted a call to action button on the header, presented all around the navigation through the site, in order to make it easily accessible.

Old structure (left) vs. new proposal (right).
Design

Less is more


Once the information was organized, we started creating wireframes.

As previously mentioned, we synthesized the information and focussed on reducing the number of pages which didn’t show persuasive arguments to try this product, making sure to reduce distractions. The aim was to show the minimum information to help users to make the decision to subscribe.

After that, we made a low-quality interactive prototype to make a guerrilla test among the newest employees, since they had a more objective view about this product, compared to the oldest ones. With the data we obtained, we made some adjustments to correct issues and as a final step, we made this prototype responsive.

Design

Less is more


Once the information was organized, we started creating wireframes.

As previously mentioned, we synthesized the information and focussed on reducing the number of pages which didn’t show persuasive arguments to try this product, making sure to reduce distractions. The aim was to show the minimum information to help users to make the decision to subscribe.

After that, we made a low-quality interactive prototype to make a guerrilla test among the newest employees, since they had a more objective view about this product, compared to the oldest ones. With the data we obtained, we made some adjustments to correct issues and as a final step, we made this prototype responsive.

Design

Less is more


Once the information was organized, we started creating wireframes.

As previously mentioned, we synthesized the information and focussed on reducing the number of pages which didn’t show persuasive arguments to try this product, making sure to reduce distractions. The aim was to show the minimum information to help users to make the decision to subscribe.

After that, we made a low-quality interactive prototype to make a guerrilla test among the newest employees, since they had a more objective view about this product, compared to the oldest ones. With the data we obtained, we made some adjustments to correct issues and as a final step, we made this prototype responsive.

Wireframing process.

We also reduced the visual load during the designing stage and we didn't forget about the importance of white space, so the user could be much more focussed on scanning information and the content would be more attractive to read.

We also reduced the visual load during the designing stage and we didn't forget about the importance of white space, so the user could be much more focussed on scanning information and the content would be more attractive to read.

We also reduced the visual load during the designing stage and we didn't forget about the importance of white space, so the user could be much more focussed on scanning information and the content would be more attractive to read.

We designed keeping in mind the main feature of the product: short films. Therefore we used large and carefully edited photos of those short films to transmit a movie atmosphere, keeping in mind that many of those pictures were used in some of the marketing campaigns.

We designed keeping in mind the main feature of the product: short films. Therefore we used large and carefully edited photos of those short films to transmit a movie atmosphere, keeping in mind that many of those pictures were used in some of the marketing campaigns.

We designed keeping in mind the main feature of the product: short films. Therefore we used large and carefully edited photos of those short films to transmit a movie atmosphere, keeping in mind that many of those pictures were used in some of the marketing campaigns.

The highlight of the new website was the fact that we took care of making it fully responsive. It is always important to have a great experience with any device.

The highlight of the new website was the fact that we took care of making it fully responsive. It is always important to have a great experience with any device.

The highlight of the new website was the fact that we took care of making it fully responsive. It is always important to have a great experience with any device.

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.