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:

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:

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.

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!

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.

"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.

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.

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.

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:

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.

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.

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:

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.

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.

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.

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.