Portfolio | Andie Kolbeck

Online Learning for the 21st Century.

Emile is a 1:1, blended learning platform for full-time secondary school.

View Prototype

Rethinking the IA
Styles and UI
Wireframes to Hifi Mockups
The Final Prototype
Key Takeaways

The Problem

Both parents and teachers want a more efficient and effective way to both track and ensure student outcomes.

Private tutors often find it hard to track their student's progress, with many relying on hand-written notes from the session to remember what was taught. Consequently, many tutors struggle to recall exactly what was covered in previous sessions.

This organizational problem makes it time-consuming to create progress reports for parents, and challenging to ensure that all of their students are achieving mastery.

illustration of two students climbing a hill

illustration of a student smiling while studying at home in front of a laptop

The Solution

Give all users full visibility of a students' progress in an intuitive, real-time format.

Emile is a revolutionary one-on-one remote learning platform that offers student, parent, and tutor views into:

Progress through curriculum modules
Checks on content mastery and skill development
Independent work assigned and completed

By giving tutors an intuitive, easy-to-use system for scheduling sessions and tracking progress with individual students, they can better focus their energy on being effective instructors. This data can then help parents monitor whether their child is staying on track without any extra work required from the tutor.

Role:

Lead UX/UI Designer

Team:

CEO, Director of Curriculum and Instruction, Full-Stack Engineer, Junior UX Designer

Deliverables:

User Personas, User Stories & Flows, Wireframes, Usability Testing, High Fidelity Mockups, Clickable Prototypes, Style Guide

Tools:

Figma

Duration:

110 hours

Project Background & Design Process

When I joined the Emile team, the CEO and Education Director were looking to pivot the MVP from a university test prep program to a full time, remote secondary school program.

Emile began as a university test prep business serving students both in-person and online. While they had a long-term plan to expand into full-time remote schooling, the widespread school closures in the US during the coronavirus pandemic inspired them to refocus their initial product offering to serve parents seeking an alternative to remote public school classes.

A previous designer had done some work on the MVP, including some user interviews, user flows, and wireframes. However, these deliverables were designed for the university test prep program — not full-time secondary school. The Emile team was hesitant to toss out the work done by the previous designer, but I had a sense that many features would need to be redesigned.

I began my design process with a thorough review of the previous research and new program materials. From here, I consulted with key stakeholders to generate a new list of user stories and redesigned the user flows to better align with the requirements of the full-time school program. These were translated into new wireframes, HiFi mockups, interactive prototypes, a style guide, and a final version ready for handoff to the developer.

Part One

Rethinking the Information Architecture

I kicked off the project with a deep analysis of the work done by the previous UX Designer, which included qualitative interviews with tutors, proto-personas, and user testing on the initial wireframes.

From here, I consulted with key stakeholders to generate a new list of user stories.

Then, I redesigned the user flows to better align with the requirements of the full-time school program.

View All User Flows

Part Two

Style Guide & UI

Before translating these new user flows into wireframes and HiFi mockups, I worked to clarify the branding and style for the Emile desktop and tablet apps. Since I was designing for two very different user groups, I set out to create a flexible color palette — brighter colors for kids, and more muted tones for the tutors.

UI Elements

To speed up the design process, I pulled some of the foundational UI elements, such as alert boxes and buttons, from the Tailwind UI kit for Figma. I also designed some custom elements from scratch to give the interface a more distinctive style.

Typeface

Inter UI is a typeface specially designed for user interfaces with a focus on high legibility of small-to-medium sized text on computer screens. I used this typeface for text elements in Emile so that tutors and students could focus their energy on the class session, not on deciphering paragraphs of hard-to-read text.

View the Complete Style Guide

Part Three

Iterating on the Wireframes and Hifi Mockups

While the previous designer had created wireframes and low fidelity mockups for a significant number of user flows, these were designed for the university test prep program — not full-time secondary school. The Emile team was hesitant to toss out the work done by the previous designer, but I had a sense that many features would need to be redesigned.

Rethinking the Session Builder

One of the most complex, yet central functions of the Emile app is the Session Builder. Tutors use this tool to assemble class sessions for individual students or groups made up of learning activities, mastery activities (such as in-class quizzes, where students demonstrate competence), and homework assignments.

Tutors plan out all of the activities for a specific class session before the class begins, using it as a road map for instruction.

After the class session, tutors return to the Session Builder to record how students performed in the mastery activities and to finalize the list of activities that they taught in that session.

When the Session Preview reflects what happened in the class, the tutor can Publish the session. Only then is a record of the class session, the student's progress, and associated homework assignments or resources made available for the student and parent to see.

This is one of the low-fidelity mocks of the Session Builder I received at handoff.

This is one of the low-fidelity mocks of the Session Builder that I received at handoff.

It had a few problems.

One of the primary issues with this layout is that users can intentionally or unintentionally exit the flow by clicking on any of these navigation elements.

The session-building progress typically involved 20 or more screens, and I knew we didn’t want users to navigate away from this flow unless they deliberately chose to do so. There are also so many elements on this screen that it’s difficult for the user to understand what they need to do next.

My first new iteration, after reworking the user flows and wireframes.

Still room for constructive feedback.

My new mid-fi mockups included multiple significant changes.

In this new version of the Session Builder, all high-level navigation elements are hidden, and the next action is marked with arrow buttons in the bottom navigation. With the addition of clear Publish and Save and Exit buttons, users can now save their work and exit the flow whenever they like.

I also added some simple icons to the class topic hierarchy levels here, as user interviews indicated that people were confused as to how classes, big ideas, and concepts related to one another. The new icons show these as smaller and smaller elements of a whole.

When I ran this by the education team, which included some seasoned tutors, they asked if the session preview could show more detail about the different class elements, such as the grading status of homework assignments. I incorporated this feedback into the final iteration.

Screen from the final Session Builder flow

In the final MVP version of the Emile session builder, the session preview window on the right shows which learning, mastery, and homework activities have been added to an upcoming class session. Each section includes detail about which topics and activities will be covered in each category. Now, tutors can remove activities, or go back and add more at any point in the flow.

View the Session Builder Prototype

Part Four

The Final Prototype

Detailed tracking of every class session helps tutors accurately monitor each student's progress.

Parents can track their child's progress at a glance across class sessions and homework assignments.

Students can find classroom resources and upload homework assignments in one place.

Every student achieves mastery based on their ability to articulate the concept, not just a quiz score.

View Desktop Prototype

Part Five

Key Takeaways

Don't be afraid to start over when necessary.

Had I tried to mold the new MVP scope into the designs previously created for the old MVP concept, the product would not be as intuitive, there would be more clicks required to find necessary content, and the structure would be quite different. By letting go of attachments to previous work, I could design a better product.

Dashboards should simplify, not complicate.

The student overview, curriculum overview, and session overview pages contain a lot of dense information, which can quickly become overwhelming to users. Getting rid of unnecessary labels and extraneous information helped testers complete tasks more quickly.

While it was tempting to fit as much information as possible onto these screens, the ultimate purpose of a dashboard is to save users time and help them see the most critical data at a glance.

Final thoughts.

Emile was an incredibly exciting project to work on. Not only does Emile solve common problems faced by private tutors and parents, it's unique Socratic teaching method helps students succeed in a remote-learning format. Learn more at hiemile.com.