ECoach - Personalised online training

Role

UX Research and Design, User Testing

Team

Jaee Apte, Jessa Bartley-Matthews, Marisa Xheka, Heidi Wong

Client

University of Michigan

Timeline

May 2016 - May 2017

Problem

ECoach is an online personalized training tool that was developed by a research team at UofM as a way to create personal connection between students and instructors. It was especially aimed at large classes with over 1500 students, where providing personalized attention become nearly impossible for the instructors. A noble intention completely marred by its design, or lack thereof. When the team conducted a series of user interviews and usability testing for ECoach, we realized that users were not being exposed to the full power of ECoach and its central theme, personalization, didn't resonate with most of the users.

Solution

Our biggest challenge therefore was to take everything that ECoach has to offer and present it to users in such a way that it comes together as one whole personalized tool. We redesigned the architecture and UI of ECoach and successfully launched the new version to students for the Winter 2017 semester.

How did it all start?

University of Michigan has several introductory courses that serve thousands of students. The most popular course on campus, Introductory Statistics, has a strength of over 2000 students each semester. Yeah! These classes typically have 5-6 instructors and over 20 student instructors.


Imagine you are a student attending this class, your classroom will typically look like this:


Classroom for large introductory courses

These course are quite tough for a lot of the students, Statistics, Physics - not easy. So without proper guidance a lot of the students lost motivation to perform better and would start to lag behind in their coursework. The sheer scale of the class also made it almost impossible for the instructors to reach out to each student personally. So the instructors needed a way to reach out to these students and provide them personalized feedback.


That's how ECoach came into existence. For instructors - ECoach kept a track of every student, their grades, attendance, submissions - all the data useful to the instructor to evaluate the student's performance and figure out the most critical students, their weaknesses and channel their feedback accordingly. For the students - ECoach was a go-to person who understood them and provided tips, tools and resources that will help them perform better.


Why did ECoach need a redesign?

However, when ECoach was launched in 2014, it looked like this:


ECoach V1

Apart from the very obvious look and feel of the interface which brings back memories of the 90s websites, there were a lot of fundamental issues with its design. A fellow designer and I uncovered these issues through a heuristic evaluation of the website. The insights from that evaluation were:

1. There was lack of hierarchy in its structure.
2. Information was just being pumped into the system and it was stacking up.
3. There no clear call to action or any guidance to navigate through the site.
4. The purpose of ECoach wasn't coming through. When I looked at the interface, I couldn't tell what is Ecoach or what does it do?


Actually ECoach consisted of several tools and resources for various purposes. It had todo lists and daily challenges to help you form habits, also had exam planning and prep tools to help students prepare for a particular exam.


ECoach architecture

We were curious to know what did the students think about ECoach? We then conducted a series of 1:1 interviews with students. When we asked them about their overall experience with ECoach, the answers depended on whom we asked!


Ecoach meant different things to different students

Now, ECoach was in fact each one of that, but it was also ALL of that. And we realized that the users did not see Ecoach as whole system that was capable to doing all of the above, but instead they saw it only as the tool THEY used the most.


Sure, not every tool is applicable to each student, but the interface shouldn't make that choice for them. The interface should be discoverable and accessible, encourage exploration and let the students decide for themselves.


We had a HUGE affinity wall at the end of our research, and wrote down every little comment, issue or idea that we discovered that could help our redesign. We presented our findings to the broader team of engineers, PMs and faculty advisors and we brainstormed as a team. Through this exercise, we prioritized critical issues and formed a design plan. We had our design goal for ECoach.


ECoach affinity wall exercise.

"Make ECoach discoverable and accessible and help students get maximum benefit from it."


Design Decisions

Our redesign was restructuring the information architecture and giving a UI refresher to ECoach's homepage.


INTRODUCED A HIERARCHICAL STRUCTURE


We created a new navigation flow for ECoach and introduced a hierarchical structure to it.


ECoach sitemap

We used levels of scale, inspired from architecture, to promote a) Discoverability - To expose everything ECoach has to offer and b) Hierarchy - So that the students are not overwhelmed by the information and the interface itself can guide their path.


Levels of scale on ECoach homepage.

UNIVERSALLY ACCESSIBLE NAVIGATION BAR


We introduced a top navigation for the three scales - Personalization, Messages and Tools, accessible from anywhere within ECoach. The idea behind this is to give them universal access to exit from current context whenever they need to. Combined with a breadcrumb trail inside students can know exactly where they are at any given point until they are familiar with the system.

Universal navigation bar.

EMPHASIZING PERSONALISATION IN ECOACH.


Personalisation and tailored communication was central to ECoach. We needed the personalisation section to communicate to each user their personal progress and how ECoach can help them get better. We had a couple of concepts to tap into this area:

Exploring personalisation alternatives within ECoach.

We decided on the third version, a direct goal driven approach. It resonated with most of the students we tested with. It was consistent across courses, unlike the competency model which was very subjective to the course, syllabus and the instructor. It uses a scare tactic to motivate students to take action, it was not my personal favorite because it can have negative implications for weaker students, but it was liked by ALL the instructors and there was enough evidence to support that a direct goal driven action works.


Goal-driven personalisation.

UI REFRESHER FOR ECOACH.


A crucial design decision was to give a UI refresher to ECoach. The old interface had a Maize and Blue color scheme, a default color scheme for a lot of tools at UofM, It was also very text-heavy interface with almost no visuals or images.


Old color scheme with text heavy interface and no visuals.

The students disliked the old color scheme, it reminded them of administrative tools they have to use for a lot the official interactions at UofM. They basically said:

"Why does everything have to be maize and blue at UofM?"


And it was true, there was no obligation to stick to maize and blue and we didn't want them to think of ECoach as just another university tool. We wanted something fun and inviting but still professional. We explored a few different color schemes:


Experimenting color schemes.

We finally settled on this color scheme - it's also used by companies like Microsoft, Google, Ebay - representing diversity and inclusion and our student community is a classic example of those things.

New color scheme for ECoach representing diversity and inclusion.

We also designed new icons for the tools offered within ECoach to make them discoverable within the interface and in external communications such as emails.


Identity icons for ECoach tools.

Summary

To recap, we uncovered architecture and usability issues in the old interface through heuristic evaluation and user research. We proposed a new hierarchical information architecture to make ECoach more discoverable, accessible and intuitive. We also redesigned the UI elements of ECoach with a new color scheme and introduction of icons and visuals.


The redesign of ECoach against the old interface.

Launch and Impact

We launched ECoach to over 15,000 students at the start of the fall semester. ECoach is also being used by over 75 instructors and GSI's to help their students perform well on their courses.

Designing for ECoach was one of the most gratifying experiences. I strongly believe in accessible education, the size of the classroom should not be a disadvantage to any student or affect their performance. Interviewing students of different academic capabilities shed light on how each student has a different style of studying and personalized education is a powerful way to help them achieve their goals.