Tutoring, every day — Tutor-facing web app for a Student Homework app UI/UX case study

How we helped Easy A define its standard for tutors

Easy A’s tutor panel is an easy to use Tutor dashboard and teaching solution, for tutors using the Easy A platform, and the fastest method to allow for student-tutor communication and instantaneous settlements.

Establishing one source of design truth

Our main color palette relies heavily on the contrast between bright and vibrant colors. We defined specific colors for certain states and purple as a connection point to Students, with orange as the main color used for highlights and calls to action. For the backgrounds, we used lighter versions of the main ones.

We went back to the basics by first establishing consistency across Tangelo then building upon the foundations of the product to create a memorable experience for the user. With a UI kit and design system built for a large dynamic team, we included Sketch symbols, text styles, motion guidelines, and color palette to allow designers to work faster while maintaining strong consistency.

Meaningful experiences through motion

The navigation framework we worked on with the Easy A team visualizes how tutors move through the web app. We used this to make interactions meaningful and intuitive. Interactions on the same level, like a chat to profile, have subtle transitions, while we added more fundamental interactions for movements between levels.

Attention, please!

Finding a student is always a special moment. You’re connected with them and they trust yourself in their studies, the concepts, and the answers. With exciting animation garnishes, tapping into a student in Easy A can share that special feel.

Mobile

Even as a product for the future, we must not forget today’s devices. We took that to heart and had special care when we designed the responsive version. The function was key when adapting the experience for on-the-go.

Onboarding

Not every change we made was a visual one! Even though we were building a brand new Web App we couldn’t disregard older Easy A tutors. For usability sake, we needed to guarantee that all tutors knew where every main action was and how to execute them. To achieve this we created an onboarding tour that allows users to get a sense of the entire platform.

Modals

With models now being used for details, we still had to manage the way they display information. We opted to show only the essential information from the get-go, allowing the user to extend it only when extremely necessary with a “show more” button.

The “Grid system”

We created a grid that was independent of the sidebar, allowing the user to focus on a more organized content. To enforce this idea, every action the user has to take is always placed on a small and specific area, highlighted below.

Built like a native app, the platform adapts to the device. For tutors, the process is mostly done on a browser or on a mobile, and that’s where the platform really shines.

Mobile Grids

Using the same 4-columns section of the desktop grid, everything feels right at home in this responsive version. The same components in the same place, with the same size, adapting only to the limitation of the screen.

Dark Mode

For all the Easy A tutors that use the platform mainly at night, it was essential to create a dark mode. It not only lets the user focus more on the platform’s content but also isn’t too tiring on the eyes.

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 a 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? Don’t Be Shy, Say Hi on hello@brucira.com

Thanks for reading!