Remote tutoring — Student app UI/UX Case Study

How we helped Easy A spread a team of world-class tutors to the world

All of the world’s most tutoring is communicated verbally every day in classrooms. Until now, it’s been difficult to capture, review, and share these important moments accurately, all in one place.

When Easy A came to us with their plan to bring world-class teachers in the pockets of millions of students, we couldn’t wait to create a fun, beautiful product for students to start using.

With wireframes (low-fi simplified designs that allow you to get a full scope of the entire app), we tackled app specific flows and went deep into interactions without compromising core product decisions from the get go.

This allowed us to separate the nice-to-have from the must-have, getting closer and closer to creating an MVP — a Minimum Viable Product. For Easy A, this meant excluding searching conversations and focusing exclusively on users completing a lesson.

Even though an MVP means compromising and leave potentially great features out of the product, it also increases the time to market and leaves room to later improve the product based on real customer feedback.

Old methods, new ways

For Easy A we designed a native app available for both iOS and Android that allows users to focus entirely on Math help. Users in the current scenarios face difficulty in understanding where to ask, when to ask, and most importantly, what to ask. With only a few clicks, users are able to ask a question and receive guidance from tutors.

The front door of the Easy A app. A simple, seamless onboarding followed by a standard login-register process. Users can enter the app with their email address, phone number, or save time by using their favorite social platforms.

Pain points and breakthroughs

User #22 It’s like student tutoring apps are made for robots. I shouldn’t have to need a tutor myself to learn using these things

User #41 It’s confusing and this app does not give feedback. I’m stuck wondering is anything happening?

User #43 Where do I find my last conversation?

Evolving the look and feel

We put our “evolution, not revolution” hypothesis to the test in our creative exploration of Easy A’s visual identity. We wanted to represent the modern, energetic potential of what a tutor app could be. We proposed a happy medium between the two, relying on a friendly color palette and custom illustration for visual interest and personalization without going overboard on playfulness.

Typography

Two different platforms, two different fonts. Inter UI for that bold modern personality of the website. San Francisco, as the system font for macOS, is optimized to give you unmatched legibility, consistency, and performance on the Web App.

Playful vibes to brighten any and every interaction

Easy A is for studies, so we didn’t want the experience to feel like studies. Using a clean interface with interjections of friendly colors and typography, our designs aim to delight users.

Reflecting the tutors who come together to teach on EasyA, our colorful shapes and animations represent the building blocks of all conversations.

Home

With Easy A, users can start asking questions immediately. As the most likely scenario, it made sense to present the camera upfront to click and get started with the journey. With two taps and without losing context, the user can be on their way to connect with their tutor. A right-swipe away is a birds-eye-view that, at a glance, allows users to immediately view their last lessons and go back to them.

Tutor Profile

With a recently updated Tutor Profile, students now get a dedicated page to see more about who’s teaching them, both active and past. A very convenient piece of information to establish trust in the Easy A ecosystem.

Search & Activity

Placed directly on the new conversation page, the search tab allows users to search for subject names, all the way down to mentions.

Subject Recaps

There are quick story-sized recap cards sent by the tutors relevant to the subject. These recaps come in handy and take care of the small doubts and clear the air when starting with a new concept.

Reactions

Some words are better left unspoken. To end a student’s thought-pampering on what to respond to a certain message, it’s way quicker to react when understanding a concept or express confusion using an emote, so we built it right in.

Whiteboard

To bring the classroom to your phone, we built-in a whiteboard mode for the tutor to work a sum out live for the student with push to talk.

Feedback

The app works in favour of you and we paid attention to details everywhere, to make the feeling that it’s actually listening to your thoughts. Feedback works for you in a clever way. You can rate your tutor from 5 levels of satisfaction. If you’ve not had a great experience, Easy A itself shows an option to immediately start looking for a new tutor so you don’t have to go back to the camera and get to clicking a photo.

We created a design system that served as a visual guideline for consistency on the entire platform. We also kept detailed documentation that we updated regularly throughout the design process as single source of truth that ensured efficiency in our workflow.

The complete application is built over an 8-pt grid. It scales beautifully across pixel densities and thousands of Android devices.

Have a project in mind?

Thanks for reading!

Solving Product problems with Intelligent & Neat Design. http://www.brucira.com/