What is Monic.ai?

Monic.ai is a studying tool that allows students to utilize the powers of Artificial Intelligence (AI) to create exam preparation materials.It takes your lecture slides, YouTube videos, and even textbooks and converts them into items such as flashcards, quizzes, and more. Monic.ai's goal is to enhance learning efficiency and efficacy for students by personalizing their studying materials.

My role & contribution

Monic.ai is a small early-stage SaaS startup, and I joined them as their primary UX/UI Designer in 2023. Most of my contributions were UI based throughout my time with Monic.

Quick summary of my contributions

— Streamlined their main flow of uploading study materials
— Redesigned and improved their user interface by establishing a design system which included buttons, typography, interactions, etc
— Created their landing page, as well as a fun onboarding flow for users to customize their studying preferences

Creating goals that would please stakeholders and students

The co-founders of Monic wanted a redesign and were able to relay the insights they got from their users from doing over 50 face to face interviews, and hundreds of surveys. Together we were able to establish the following goals for the redesign:

1
Transform Monic's existing design to something that is more simplified by introducing a cohesive design system
2
Improve user and task flows that are easy to follow for first time users

First, let's take a look at their platform

Due to the fact that the startup didn't have a residential designer, it was my duty to be able to translate the designs that were made by the co-founders of Monic. With their limited knowledge of design principles and Figma skills, they were able to come up with sufficient screens. However, there were some underlying issues.

Identifying the issues

While these are a good starting point, let's address some concerns:

— Fails the squint test (the call-to-actions are unclear with the overuse of the primary color, which in this case is the green)
— Unestablished hierarchy with inconsistent text colors and font sizes raises concerns about accessibility
— Overloaded layouts that lead to an increased cognitive load, which is something students definitely don't need more of

Redesigning something new, but familiar

I wanted to redesign the app with fresh UI but still keep the integrity and familiarity of the website. I didn't want to entirely change up the website all at once not only because of time constraints, but also because I didn't want users to "relearn" the platform that they might have developed muscle memory to. I made sure to keep this in mind as I sketched.

The primary goal of this project is to redesign Monic.ai's platform and visual design to minimize cognitive overload and streamline task flows, ensuring that students can study more efficiently and with less frustration.

Success metrics

Some metrics that could measure success of this redesign include:

— User satisfaction: Increased user satisfaction scores through surveys and feedback forms post-implementation.
— Task completion time: Reduction in the average time taken to complete key tasks on the platform
— Engagement metrics: Improved engagement metrics, such as time spent on productive study activities and reduced bounce rates.

Establishing a design system

A simple and easy way to solve most of the issues mentioned was to create a design system. This way things look more consistent and easy in the future to put together.

Making iterations based off of user feedback

We would rollout the new implementations and overtime, collect feedback from ours users. I would take the feedback and collaborate with my clients on how to improve the designs. One of the concerns was regarding the uploading files portion.

The problem: Users had trouble uploading files and viewing submitted files at the same time

The solution: Create a side-by-side view of the upload queue as they add more files

Creating a new module flow

I made major UI improvements while adding elements to improve user navigation and overall flow. For example, I added a progress bar indicator so that users are more aware of the process of creating a new module.

Uploading sources

One of the major differentiating factors of Monic.ai is that you can upload different sources of material from PDFs to Youtube videos and preview your files side by side. That way you can also go through your upload queue and select a page range of biology textbook all at the same time.

Module overview

Once everything is uploaded and processed, the magic of ✨AI ✨ completes the module by creating chapters, descriptions, keywords and study materials. With each created module, you can see your preparedness score, view your progress, and edit details.

Quiz & flashcards

One of the most effective ways of studying tends to be flashcards through spaced repetition and taking quizzes with all types of questions. Making the quizzes simple, clean, and straightforward helps eliminate the possibility of added stressors so that students can focus on their studies.

Auditing the implemented version

An important role at my time at Monic.ai was to audit the live product. After my designs were implemented, it was critical to make sure that flows and interactions worked correctly, that all user case scenarios were addressed, and any accessibility issues were identified and resolved.

Feedback & impact

One of the exciting things about being a designer, is seeing how real users react to my designs. I was glad to see support through Monic.ai's Discord server as well as receiving updates of user growth and satisfaction. There was feedback of users appreciating the new clean, UI and the flows. Also during my residency, Monic.ai userbase increased by at least 10% in growth.

Enhancing Monic.ai's user experience with refined design and simplified flows