The Problem

A selection of English language learning books were created by DK to teach adults English as a foreign language in a visually engaging and simple way.

Our goal was to create an online offering to support the books by providing a purchase platform to buy books and exercises, an audio player to listen to supporting audio, online exercises for all devices and a mobile and tablet app for offline use.

The digital process began at the end of book production rather than alongside it, so content wasn’t created with multiple screen sizes and devices in mind. Multiple language support needed to be considered along with limited bandwidth for smaller markets such as Mongolia.

Finally, the books were split and combined into various packages for promotional deals, making content structure and navigation a real challenge.

A spread from one of the books. Making the content responsive was a challenge.

The Process

With the books in production and the target markets already decided our first task was to do a full audit of the content. Our aim was to discover how the content could be displayed online and to create a set number of templates to minimise design/build time and cost.

The books consisted of over 50 different template types, with lots of edge cases and single instances of various elements. Working closely with the content team we grouped content types and created template wireframes in a bid to reduce the number of overall templates. After a lot of back and forth we managed to reduce the template number from 50 to 11.

These templates only covered the exercises from the books so we also created journeys and wireframes for the homepage, audio player, purchase platform, registration and business pages, along with app designs for mobile and tablet.

We worked in an agile process alongside the content team who were working in waterfall, which slowed both teams down as we tried to find a process that worked for everyone. As a result we only had time to complete the full UI and breakpoints for the main landing pages and one exercise template.

To compensate for time lost I created a comprehensive style guide that the developers could apply to the wireframes which brought us back on track and made the proposed launch date feasible.

The Result

There have been many challenges and whilst the site is not as fully realised as it could have been, the Web Solutions team have done an amazing job to ensure the site will be delivered on time.

Next up are the Spanish and Mongolian versions of the site along with a more visual progress tracker and possible gamification.

The fully responsive site design has been well received by the executive board and has helped secure a number of deals with territories around the globe.

User testing will be the primary focus post launch to validate our decisions and to ensure further development is focussed on user pain points rather than assumptions.

Lessons Learned

Agile into waterfall doesn’t go. Working side by side under two different processes requires a huge amount of extra time to try and understand and accommodate everyone’s working patterns. As a result there was quite a steep learning curve for everyone involved.

Although the project was hard and had many obstacles our team worked incredibly well together and we all gained experience we wouldn’t have if the project was straightforward.

Designing a site to suit a number of languages also provided many insights. Having to ensure the site can accommodate translations meant that at all breakpoints and on every device text must fit in all instances. Button text in particular seemed to translate into unfathomably long character lengths in some languages, so allowing room across the board was vital.

An example of the kind of translations we had to accommodate.

These guides have been invaluable in teaching my neighbour English. Clear and easy to understand, they are an excellent teaching and learning tool, especially when used in conjunction with the free audio lessons available online or through their app.

SammiEnglish language learner