User Interface redesign

I met Alasdair Harris, founder at All-In in 2015 in London. I was immediately impressed at his commitment to solving a challenge he faced every day. Many secondary school children in the centres where he taught in East London did not speak English as a first language, which meant many struggled in his German, Spanish and French lessons. While he wanted to help them succeed, the stress of setting exams, marking and doing admin tasks barely left him time for basics.

To solve these problems, he decided to build a web application called All-In where students can learn vocabulary in 30 languages, engage in learning activities, practice and take their exams all from the same platform. This is turn would save hundreds of hours every year to overworked teachers.

When our paths crossed again in the summer of 2019, I was doing Content and Product management with teams of diverse talent I managed remotely. It was the perfect timing as he needed someone who could redesign the web application to increase retention rates. In four years of development, only he and his team of engineers had worked on it. The challenge was huge, as we needed to be ready before the school year started again in September, the budget was limited, and the app had a lot of features! However, with more than 3,000 students benefiting from this product, we decided we would do our best to make it happen! Here is how:

Phase One: defining the scope of work

After a couple of sessions with Alasdari Harris and Paola Séptimo (Josh.SeVe), the Product Designer, I put together a requirements document detailing the scope of the work and the user stories. This is something I always work on thoroughly with customers to make sure we have both understood each other clearly. There is nothing more expensive or disappointing than realising mid-project that you got the scope wrong!

User stories help translate requirements into actions users can take on the app

Once we agreed on what we could do — given the time and budget constraints — I did an information architecture analysis to make sense of the body of knowledge there was in the app. I quickly realised the team had put a lot of effort into adding new features without really thinking of how the students would progress from one to the other in a logical way. There were a lot of child pages from which it was difficult to figure out how to go back or continue. Much of the content was replicated unnecessarily and quite a few screens could be brought together to simplify things.

For two weeks, Paola and I brainstormed on paper, post-it notes and mind-mapping tools to figure out what new flows, interactions and visuals would make the experience a lot easier.

In the meantime, I defined two principles that would guide the design:

Clarity: it was important that users knew what they needed to achieve in order to meet the app´s goal: to experience learning as a continuing process that would help them not just take tests and pass but also improve their skills! Therefore, the design of the interface needed to be clean and clear: we included a lot of white spaces, numbered steps and messages to avoid users drifting from the recommended path.

Encouragement: while the app tries to make it fun to learn a language, it is still hard work! This is why we knew it was important to accompany users with encouraging messages, tooltips and a points’ system to gamify the learning process and reward them as they learned.

While I was working on the concept, Paola created a beautiful visual guide:

All-In´s visual style guide

Once we had the journey sketched and the customer approved our flows, we started working on the design!

Phase Two: design, test, iterate!

As Product Manager, a key aspect of my work is to organize the design in Sprints. Every second Friday, the Product Designer and I held a retrospective session where we saw whether we had completed the user stories we planned to. To make the most of our meeting, we also planned the next sprint that same day. I then updated the customer by email to manage his expectations, and let him know whether there were any roadblocks or delays he needed to be aware of.

Every time a screen was completed during the sprint, I would share it with the customer to get his feedback or approval. Paola and I would do a stand-up twice a week where I could understand what she was working on and share relevant changes the customer asked for. This was agile at its best!

Here are some of the most impactful changes we made:

A connected learning flow

The user journey was highly disaggregated. When students made a choice from the dashboard, they were taken to disconnected pages and often ended very far from where they had begun, in a cul-de-sac. When they hit the back button on the navigation menu, they would be taken back to the dashboard instead of to the previous screen. This made it very difficult to understand the path they had taken and where they needed to go next.

This journey is mapped on the left side of the image, under “ORIGINAL”:

User Journey Flow before the redesign (left) and after (right)

This happened because the development of the application had been done under a feature-first approach where design thinking had not been applied to integrate new features as part of a learning journey.

When we started the redesign, we knew the most important thing was to help students achieve their goals: to have good grades in their language exams by practising continuously. With this in mind, we streamlined the experience considering how the learning paths were all connected and we made it easy for users to navigate from one activity to the other, earning points as they learned. This journey is mapped on the right side of the image, under “NEW”

Less is more! Grouping information for clarity

During our information architecture exercise we realised there were items in the original menu that could be grouped together:

We reduced the menu to just three items and designed new icons as entry points to three journeys within the platform:

1. My Tests: go to the tests the teacher has prepared for you. Take the learning path suggested to make sure you succeed!
2. Effort Points: see how many effort points you have earned by completing activities and practising tests. There is a leaderboard where you can see your position in comparison with the rest of the class!
3. My report: check all your exam results in one screen.

We also changed the order of the icons to help students understand visually that this is the most important thing they need to do: practice!

Helping students learn!

In My Tests, the students find the tests teachers have set up for them.

There are up to three new tests, plus the pending ones if students are behind, and the past ones in case students want to review their work.

For every test there are:

Vocabulary lists students need to know before taking the test

Activities they can complete to practice their grammar and vocabulary skills

A mock-test to practice before the real tests

Prior to our redesign, the learning path was unclear, which resulted in a lot of students getting low marks as they did not get enough practice. Also, there was too much information on the screen. This is what it looked like:

After we applied the principles of clarity and encouragement, this is what the screen looks like:

What are the unique design and content elements that made the journey clear and encouraging?

1. Timeline: we highlighted every step of the journey so that users view it as a linear process.

Recommended steps on the top of every page

Recommended steps at the bottom of every page

2. Colours: We used colours to guide the users´ journey by highlighting in purple, the darkest colour from the palette, what the next steps are.

3. Structure of content: within each test, we also displayed the order students should follow to get a better grade from top (View Vocabulary) to bottom (Take test), reinforcing what the recommended steps indicate at the top and bottom of the page.

Which test would you take first?

3. Progress bar: we wanted to motivate students and give them a sense of purpose as they were completing each learning activity, which is why we introduced a progress bar with the percentage of completion in every vocabulary list, activity and test.

4. Messages!

Celebratory ones to let users know when they got effort points!

Informative ones, to guide the users through the learning journey which would guarantee them better results

Positive feedback ones, even when students had a grade lower than 50% we showed encouraging messages so they would want to practice again. When mistakes were made, we included an explanation or advice to ensure we met the learning objective:

Phase three: looking at the data and getting feedback!

Fast-forward five months when we touched base again with Alasdair Harris and here is what he shared with us.

1. The number of new users had increased and the retention rate was a lot more stable:

2. There were lots of happy students and teachers!

“We’ve been using All-In for GCSE and recently introduced it at KS3. I recently had brilliant feedback from a parent who contacted me at school to say she loved doing the activities with her son, they enjoyed the competitiveness of it and they were both becoming addicted!” K Seazel, Head of Dept, Grace Academy Solihull (Dec 2019)

“I just set a vocab test for my S3 Spanish class and they loved it — even the lower ability, difficult boys trying to outdo each other and keen to see where they were on the leaderboard. Some girls even requested another test! Mrs Bewick, Principle Teacher, Renfrew High School, on her class’ first attempt! (Jan 2020)

In retrospect

During this project, I had the opportunity to test everything I learned about Content and Product Design during the years I have worked at startups as a writer, product marketing manager and project manager amongst other roles. This was a challenging piece of work because the original application had many disconnected features and it was difficult to make sense of the learning journey. An additional challenge was that the customer was based in London, the Product Designer was based in Mexico City and I was based in Madrid. However, through very clear communications, responsibility and trust, we transformed not just the web application but hopefully the lives of thousands of students who can now learn languages in an easy, fun way!

Thanks Josh.SeVe for daring to take this learning journey with me!1