My Role
User Research, UX/UI Product design, Usability Testing
Team
3 Product Designers, 1 Project Manager
Tools
Figma, G-suite, Zoom, Otter.ai, Maze.co, ChatGPT
Timeline
80 hours
INTRODUCTION
Marvel AI aims at alleviating teachers' workload
Background
Marvel AI is an advanced AI assistant tailored to elevate and simplify the educational process for teachers. Equipped with powerful tools, it supports educators in crafting lessons, assessments, and interactive activities
Educators often struggle to manage their teaching materials efficiently.
The Challenge
They need a solution that allows them to track, organize, and retrieve past activities quickly. Our squad was tasked with building the history page of Marvel AI’s platform. This page is a key feature designed to give educators easy access to past teaching content.
We created Marvel AI’s history page, increasing usability by more than 80%.
Solution
We designed a history page that introduced a streamlined folder system, collaborative function and enhanced search and filter options, making it easier for teachers to stay organized and focused on delivering engaging lessons.
So, how did we arrive to the end product?
RESEARCH
I conducted a competitive analysis to understand what the History page of different Edtech platforms look like, and what are their strenghts and features.
Competitive Analysis
Many Edtech platforms like MagicSchool and EduAssist offered robust filtering options and the ability to quickly recognize different types of content through icons and thumbnails. This insight drove us to explore how visual clarity and flexible filtering could be leveraged for Marvel's history page.
Key Takeaways
To gain better understanding of the user needs and concerns, we conducted user surveys and interviewed 5 educators.
User Survey and Interviews
User Quotes
Top Pain Points
ANALYSIS AND INSIGHTS
After obtaining the data, we conducted an Affinity Mapping exercise to determine key usability challenges, and gather insights for feature prioritization.
Click to See Affinity Mapping Excercise
What Do Users Want?
Intuitive Navigation: Educators need a simple, easy-to-use interface to streamline their workflow.
Improved Organization: A better system for managing and retrieving materials, like folders and labels, is essential.
Collaboration Tools: Quick access and easy sharing of resources among teachers is highly valued.
IDEATION AND FEATURE PRIOROTIZATION
As a team we sat down with our list of insights and features, we utilized a prioritization matrix to narrow down even further, focusing on high impact features- both the "major projects" and the "quick wins"
DESIGN PROCESS
Sketching Wireframes
We formulated task flows and I sketched the initial screen of the history page and what the pop ups would look like for each button, this helped to steer our design direction when working on the screens.
DESIGN SYSTEM AND STYLE GUIDE
We took inspiration from home and discovery page pf MarvelAI and created new components and icons following the pre-existing UI of the platform.
Design Improvements
After creating a midfi mockup of the initial screen, based on the teams feedback we decided to make few improvements. This experience reaffirmed the effectiveness of collaborative ideation as a valuable tool for exploring diverse solutions to a problem.
USER TESTING AND ITERATIONS
Our team conducted moderated usability testing with 10 participants , where users were asked to complete 4 tasks. By combining real-time interaction with Maze's data-tracking features, we were able to gather valuable insights and make design changes and iterations accordingly.
Upon asking the users “How would you find more info on the card?”, they didnt quite think of clicking on the small “i” icon, Maze results showed that users were confused and kept clicking on the card itself or the 3 circles for more information.
Leveraging User Insights for Iteration
We removed the clickable “i” icon and instead made the card expand on hover.
The results were overwhelmingly positive
FINAL DESIGN
Task 1 & 2 : Creating a Folder and Viewing Bookmarked Content
Task 3 : Delete and Retrieve Content
Task 4 : Label Content and Filter to Find it
CONCLUSION
User testing revealed that educators prioritize simplicity and ease of navigation, emphasizing the value of intuitive design. Key features like folder systems and labels were essential in helping users efficiently manage large volumes of content, underscoring the importance of strong organizational tools.
Key Learnings
The next steps for this project would be to conduct further user testing to refine and enhance the feature. Additionally, collaborating with AI engineers could open opportunities to integrate intelligent labelling and predictive search functionalities, enabling a more personalized and efficient organizational experience for users.
Next Steps