Mike M.

Overview

The Challenge

There was a need for Amco, an English as a Second Language (ESL) company, to develop a new learning product aimed at students in grades K-9.

These were primarily native Spanish speakers taking, administering and grading the test, so the English used needed to be instructive, concise and keep the attention of both children and adults.

Solution

Team up with some of the most talented UX & UI practitioners I've ever met. As the dedicated developer on the team, we were able to iterate and prototype unusually fast. This led to many dead-ends that turned out to have hidden pathways. 10/10 would work like this again.

My Role

UX Design & UI Development

Timeline

Dec. 2015 - Sep. 2016

Tools

Balsamiq, Invision, Photoshop, Illustrator, Ruby on Rails, HTML, CSS, SVGs, Javascript

Approach

We started with one premise: it's a lot different being a kid, and a student, than it was when we were growing up. We saw this first-hand in a trip to a school in Mexico to do some user testing - general observation and hallway testing. We wanted to start at a place of compassion even if we couldn't reach complete understanding.

There were some well-formed bad habits that had developed before this engagement. We needed to clear the air with designers and engineers to ensure everyone was on the same page. After brainstorming with the design team we began working in design sprints. These were usually one week in length and would be anywhere from 2 weeks to 3 months ahead of engineering sprints.

Research was key in supporting both the business goals and achieving success with the students and administrators using the software.

Taking cues from apps like Duolingo and busuu I began reading as much as I could on topics such as how children learn; how people learn a second language, and which screen displays work best for test-takers.

Process

Discovery

The first step our team took was to interview the stakeholders. This included the executive team and the various country liaisons for the schools. They gave us the sign-off to conduct competitor analysis and tailor solutions that made sense for the ESL space.

This helped steer us towards synthesizing the vision for the product and how it aligned with the overall business goals, and how success (and failure) will be measured.

After that we had the unique ability to travel to Guadalajara to interview and observe the customers in their environment. We observed 6 schools and conducted over 30 interviews with faculty, staff and students.

Identifying potential concepts and the different types of copy needed.

Research

I was new to the education space. So I needed to learn what a rubric was and how a teacher's teaching style would influence my choices. Research was key in supporting both the business goals and achieving success with the students and administrators using the software.

Taking cues from apps like Duolingo and busuu I immediately began reading as much as I could on topics such as how children learn; how people learn a second language, and which screen displays work best for test-takers.

We made choices based on research from sources such as the article shown above and this paper.

The Tools

This project was a first for Amco since they hadn't tried defining the user experience before the code.

Instead of addressing design and usability needs after an initial build, the project owners were open to listening to ideas, discussing options, and incorporating recommendations made by my team.

Some of the tools I used were:

Communication: Slack, Skype
Wireframes: Balsamiq
Prototypes: Bootstrap, Invision
UI Elements: Photoshop, Sketch, Illustrator
Front End: Haml, SCSS, CoffeeScript
LMS: Ruby on Rails

Design Direction

Wireframing

Since not all students in the same grade were at the same level, we needed a way to group the students based on ability; and that's how we grouped the skill-levels of the students uniformly.

School administrators needed an easy way to add students after an initial import. This modal was suggested since it let the administrators remain on the page they were working on, maintaining their work-flow.

It was necessary to allow proctors of the exam to update multiple records on the fly since the exams were a timed event.

While I don't adhere to a design dogma, there are proven techniques at certain points of the process that allow greater insight into possible solutions to the problem.

Everything starts with a sketch. When you need to generate lots of ideas quickly, working through a problem in lo-fi speeds things up.

The Build

With the research concluded, theories tested, wireframes torn down and then built up again, it was time to put the pieces together.

While I was building out the front end in Bootstrap, a back end engineers were crafting the Learning Management System built with Ruby on Rails.

Outreach Initiatives

The user experience would not start with the app or the site. The majority of people's first interactions with this product would be through an email.

It was necessary to create informative and confidence-building introductions that would leave potential customers with a positive impression.

We created style guides for the distributed team and future team members. While this would be available in git, not everyone would or could have access if they needed it.

We were able to build a responsive template that conveyed exactly the right message at the right time for various groups.

Plain text emails were not sufficient if this was to be a successful launch. An email was the first place potential customers had with the product. And it needed to matter to each recipient.

Final Thoughts

While I wasn't able to be part of the EoS launch, it was a fascinating look into what my team did in order to put the user first while balancing the business needs.

I'm very greatful for the people I met and the work we did. Everybody took pride in the product and it showed.

This was a first for almost everyone involved in the project. There were issues that could have been addressed earlier, but we need to factor in hind-sight . I would have been more insistant about decisions early on if the outcomes those paths led us down were clearer. There is no point in wondering if you can ask.

Once it's launched, EoS will achieve the mission of helping students learn English and motivate teachers to inspire their students.

EoS from Amco