Case Study: English Academy


CHALLENGE

ELL needed to add a new product to an already successful line of English learning products. This time the product was to target International primary school students ages 8 to 12 studying ESL and EFL. ELL was looking to create a product that would not only help tweens learn English but also engage them and entertain them.

Project type: Interactive storytelling experience

MY ROLE

  • Creative Director
  • UX Designer
  • Product Manager

WHAT I DID

  • Requirements Gathering
  • Concept Ideation
  • Market Research
  • Course Curriculum
  • Course Map
  • Wireframes
  • Style Guide
  • User Interface Design
  • Creative Direction

Requirements Gathering

To start the project, I needed to determine and understand the overall stakeholder and business goals. We did this by conducting interviews and staging group sessions were we could identify all requirements.

The top requirements were:

  • Scalable and Modular framework (for adding more content and mixing and matching content types)
  • Lesson framework: Users can take lessons and access learning tools
  • Student dashboard: User has the ability to access the course map, practice activities, view progress and achievements, play games, practice speaking and have access to learning tools (such as a dictionary and flashcards)
  • Placement Test to gauge the user’s level of the English language
  • Cross-browser and OS compatibility
  • Tablet compatibility

Concept Ideation

As the students using this product were attending primary school, we decided the context for the course would also be a school. The school theme would ensure the topics are familiar and resonate with the children’s own experiences and life-stages. Working with the Director of Pedagogy, we came up with the concept to use different school classrooms for each unit. The theme of each unit would be a typical subject area: English, Math, Science, the Arts, Social Studies or Physical Education.

To really help submerge the user into the course we came up with the concept to deliver an interactive storytelling experience in which a set of characters (with distinct personalities, similar to those of the tween demographic) would guide/accompany the user through a series of activity screens (exercises, games, comic books, animations, songs, flashcards etc.) that take place in different locations.

To help keep the user engaged and motivated to complete lessons, we decided to maximize the advantages of Game-Based Learning, using rewards, achievements, leaderboard, and collectibles.

Concept Ideation

As the students using this product were attending primary school, we decided the context for the course would also be a school. The school theme would ensure the topics are familiar and resonate with the children’s own experiences and life-stages. Working with the Director of Pedagogy, we came up with the concept to use different school classrooms for each unit. The theme of each unit would be a typical subject area: English, Math, Science, the Arts, Social Studies or Physical Education.

To really help submerge the user into the course we came up with the concept to deliver an interactive storytelling experience in which a set of characters (with distinct personalities, similar to those of the tween demographic) would guide/accompany the user through a series of activity screens (exercises, games, comic books, animations, songs, flashcards etc.) that take place in different locations.

To help keep the user engaged and motivated to complete lessons, we decided to maximize the advantages of Game-Based Learning, using rewards, achievements, leaderboard, and collectibles.

Market Research

We conducted interviews with students in Canada, but since we knew our product would be mostly used abroad we took advantage of our contacts in China to help gain insights and user needs. Additionally we were able to source research papers that had a lot of useful information we could leverage.

We learned quite a bit, but most importantly, that tweens really liked the idea of using games for learning and testing their knowledge, and prefer to jump right in and figure things out. They also like a clean, simple-to-use interface and looked at the computer more for entertainment than learning.

Course Curriculum

Working with the Director of Pedagogy, we created Storyboards to outline each lesson of the course.

The purpose of the Storyboards were to:

  • Present the structure and flow of each lesson
  • Illustrate how the lesson objectives are being met
  • Provide a visual representation of the lesson
  • Document the audio and text presented on each page
  • Describe and present the images and interactions the user will see and experience
  • Communicate on-screen animation, design requirements and developer notes to production teams

Each page within a lesson was given an ID number that we could later use within our wireframes and course map. This helped connect the storyboards directly to our working files.

Course Curriculum

Working with the Director of Pedagogy, we created Storyboards to outline each lesson of the course.

The purpose of the Storyboards were to:

  • Present the structure and flow of each lesson
  • Illustrate how the lesson objectives are being met
  • Provide a visual representation of the lesson
  • Document the audio and text presented on each page
  • Describe and present the images and interactions the user will see and experience
  • Communicate on-screen animation, design requirements and developer notes to production teams

Each page within a lesson was given an ID number that we could later use within our wireframes and course map. This helped connect the storyboards directly to our working files.

Course Map

Once we determined that the course was going to be linear experience and completed an outline for each lesson, I was able to construct an overall course map showing an overview of how the course would flow and what was involved within each unit/lesson. This tool become very useful to all team members as it was very easy to see the course at a high level and help break down the amount of work that was involved for production.

Wireframes

Lesson Framework

Using the course storyboards and course map as a starting point, I was able to design the wireframes for each screen type, as well as the Lesson Framework and Placement Test.

Wireframes

Lesson Framework

Using the course storyboards and course map as a starting point, I was able to design the wireframes for each screen type, as well as the Lesson Framework and Placement Test.

Student Dashboard

Based on the requirements for the Lesson Framework, I had a good idea of what was needed for the Student Dashboard and was able to jump right in. The idea was to give the user access to a course map, progress and certain activity types (games, comics, songs, flashcards). We decided since the course was linear we would lock these activities in the dashboard. As the user completed lessons, the activities would get unlocked. Once unlocked the user could practice the activity at any time through the dashboard. To make navigation easy, I created a sitemap that created sections based on these specifications.

Style Guide

Launching a new product targeting the tween market, we needed to
ensure we had the right colour scheme and font options. We worked
through several different options, before getting feedback on a few. We
finally landed on a great colour scheme that was fun, bold and really
helped draw the user into the product.

Style Guide

Launching a new product targeting the tween market, we needed to
ensure we had the right colour scheme and font options. We worked
through several different options, before getting feedback on a few.

We finally landed on a great colour scheme that was fun, bold and really
helped draw the user into the product.

User Interface Design

Using the brand guidelines and wireframes we moved into the UI design phase.

Creative Direction

As Creative Director I lead our team in creating the characters,
animations, assets and icons for the course. It was important that all
items were based on real life objects that would commonly be found in
a school setting or in a user’s everyday life. The animations played a key
part in the course as they were used as the basis of each lesson. Each
character also had to be created with a distinct personality that our
target users could identify with.

Creative Direction

As Creative Director I lead our team in creating the characters,
animations, assets and icons for the course. It was important that all
items were based on real life objects that would commonly be found in
a school setting or in a user’s everyday life. The animations played a key
part in the course as they were used as the basis of each lesson. Each
character also had to be created with a distinct personality that our
target users could identify with.