Monic.ai is an AI powered studying tool that allows students to take their lecture slides, YouTube videos, and even textbooks, and converts them into personalized study materials like flashcards and study guides.
I worked as a UX/Designer alongside 2 founders and a few developers. My main task given to me was to redesign the platform into something that felt more fresh and solve UX issues.
As a part of the redesign, I also built a foundational design system to improve UI consistency and contributed the onboarding flow, and landing page.
Because Monic's core features depend on having to upload a lot of extensive materials, the document upload step is the user's first and most crucial interaction with the product. If a student struggles to upload documents, they will not be able to use the product to its fullest potential.
Working with the founders, I reviewed feedback from more than 50 user interviews and hundreds of surveys, which revealed recurring comments about the process of uploading materials such as different file types, selecting specific page ranges, and just overall desire of a better uploading experience.
Based on this feedback from current students, as well as the founders' main priorities, I defined two primary goals for the redesign:
Due to the fact that the startup didn't originally have a residential designer, the co-founders came up with some screens for their MVP with their limited knowledge of design principles. While they were sufficient, there were some underlying issues.
The image above shows the original designs that the founders put together. Whiel this is a good starting point, there are a couple issues and user cases that the screen does not address.
Considering the fact that the platform's audience are students, it is crucial to make the overall flow and design to be easy to navigate. However, the designs shown above lacked these qualities according to these concerns:
Users have to select individual pages which can be time consuming especially for large documents. This was also more difficult due to the small previews of pages which would be hard to differentiate pages from each other.
The progress tracker along with the lack of exit or back options can cause a user frustration on navigating through the whole flow, especially for first time users.
Users couldn't track the upload progress as intuitively, and it was hard for users to zoom into documents. The layout overall did not prioritize key actions as well.
I wanted to redesign the app with a fresh UI, but still keep the integrity and familiarity of the website. In addition to the time constraints, I also 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 ideated.
Some metrics that would show the success of the new redesign included: overall user satisfaction, task completion times, and engagement metrics like bounce rates, etc.
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.
We would rollout the new implementations and over time, collect feedback from our 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.
While this was a major improvement from the original design, this first design still needed some work. The layout itself wasn't the best use of space for our students as the upload documents container was located at the top and took much of the real estate.
After discussing with my supervisors and receiving feedback from users, we was decided to actually have the upload files section and the queue side by side. That way it optimized the screen real estate and gave the users the option to preview and select pages of their documents, track their upload progress, and upload more files all at the same time.
After receiving feedback from stakeholders and our users, it was best to have the upload and previews side by side so that users could multi-task!
An important role during 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.
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's userbase increased by at least 10%.
