Summary
Summary
The Marvel Educator Assistants Discovery page serves as a central hub where educators can explore and select AI-powered assistants tailored to their specific needs.
The Challenge
The Challenge
Educators often struggle to identify and adopt AI-powered tools that align with their teaching objectives. Existing discovery systems lack centralized access, intuitive categorization, and personalized recommendations, making the process time-consuming and inefficient.
The Solution
The Solution
After reviewing educator feedback and auditing existing workflows, the team redesigned the Educator Assistants Discovery page for better usability, personalization, and efficiency. The update features an intuitive layout, categorized sections, smart recommendations, and enhanced search to simplify the selection process.
My Role
My Role
Lead Product Designer in a team of 6
Lead Product Designer in a team of 6
The Process
The Process
Audit V1.1
User Research
Competitor Analysis
Ideation
Wireframes
Iterations
High Fidelity
Prototype
Audit V1.1
User Research
Competitor Analysis
Ideation
Wireframes
Iterations
High Fidelity
Prototype
Tools
Tools
Zoom
Figma
Gather
Slack
Zoom
Figma
Gather
Slack
The brief
The brief
Kick-Off Meeting
Kick-Off Meeting
The team and I received a client brief from Reality AI Labs (Epic 3.1) to better understand the project's goals. From this, we learned that our target audience consists of educators and administrators. Educators needed a streamlined way to discover AI-powered assistants with personalized recommendations and intuitive filters, while administrators required insights into assistant usage to support decision-making.
These factors were crucial, as success was defined by positive user testing results, alignment with Marvel AI’s branding, and increased engagement with the discovery page. The team was tasked with redesigning the v1 platform to make it more intuitive, engaging, and user-friendly.
The team and I received a client brief from Reality AI Labs (Epic 3.1) to better understand the project's goals. From this, we learned that our target audience consists of educators and administrators. Educators needed a streamlined way to discover AI-powered assistants with personalized recommendations and intuitive filters, while administrators required insights into assistant usage to support decision-making.
These factors were crucial, as success was defined by positive user testing results, alignment with Marvel AI’s branding, and increased engagement with the discovery page. The team was tasked with redesigning the v1 platform to make it more intuitive, engaging, and user-friendly.
Research process
Research process
Methods Used
Audit
Competitor Analysis
Persona
(JTBD) Jobs to be done
Audit Findings
The objective of this audit was to evaluate the V1.1 design of the Marvel Educator Assistants Discovery page, identifying usability gaps and areas for improvement. To ensure our recommendations aligned with real user needs, we conducted the audit based on the provided user personas, allowing us to approach the evaluation with the user in mind.
The objective of this audit was to evaluate the V1.1 design of the Marvel Educator Assistants Discovery page, identifying usability gaps and areas for improvement. To ensure our recommendations aligned with real user needs, we conducted the audit based on the provided user personas, allowing us to approach the evaluation with the user in mind.
The V1.1 design audit findings:
Search Bar Limitations – The current search lacks advanced filters, slowing discovery.
Navigation Challenges – The lack of collapsible categories makes browsing difficult.
Lack of Discovery for New/Trending Tools – No dedicated section for trending assistants leads to overlooked innovations.
Limited Customization Options – Users cannot reorder or group favorites.
Feedback Mechanism – No built-in tool for feedback limits user input.
The V1.1 design audit findings:
Search Bar Limitations – The current search lacks advanced filters, slowing discovery.
Navigation Challenges – The lack of collapsible categories makes browsing difficult.
Lack of Discovery for New/Trending Tools – No dedicated section for trending assistants leads to overlooked innovations.
Limited Customization Options – Users cannot reorder or group favorites.
Feedback Mechanism – No built-in tool for feedback limits user input.
screenshot from our audit findings.
Screenshots from the competitor analysis
Competitor Analysis
To better understand the market Marvel Educator Assistants operates in, we conducted a competitive analysis of similar platforms, evaluating their search functionality, navigation, discovery features, customization options, and feedback mechanisms. This allowed us to compare UX/UI design across multiple platforms and identify key areas for improvement.
To better understand the market Marvel Educator Assistants operates in, we conducted a competitive analysis of similar platforms, evaluating their search functionality, navigation, discovery features, customization options, and feedback mechanisms. This allowed us to compare UX/UI design across multiple platforms and identify key areas for improvement.
We found that most competitor platforms:
Utilize structured search tools with filtering options for efficient discovery.
Feature categorized navigation, though some lack collapsibility for organization.
Have limited or no dedicated sections for new/trending tools, leading to missed opportunities.
Offer varying levels of customization, with some platforms allowing favorites but lacking organization tools.
Provide little to no built-in feedback mechanisms for users.
We found that most competitor platforms:
Utilize structured search tools with filtering options for efficient discovery.
Feature categorized navigation, though some lack collapsibility for organization.
Have limited or no dedicated sections for new/trending tools, leading to missed opportunities.
Offer varying levels of customization, with some platforms allowing favorites but lacking organization tools.
Provide little to no built-in feedback mechanisms for users.
By analyzing these trends, we identified opportunities for Marvel to enhance its platform.
By analyzing these trends, we identified opportunities for Marvel to enhance its platform.
Jobs to be done and User Stories
We collaborated with the goal being to ensure that all user needs were met and identified key user stories that were crucial for the platform’s functionality:
We collaborated with the goal being to ensure that all user needs were met and identified key user stories that were crucial for the platform’s functionality:
Find Relevant Assistants – When browsing the discovery page, educators want to see assistants grouped by category and relevance to easily find tools suited to their needs.
Discover Popular Options – Educators want to view trending or highly rated assistants when exploring new features, enabling them to try out solutions others have found effective.
Save Favorites – Educators want to save their frequently used assistants, making them easily accessible without repeated searches.
Experiment with New Tools – Educators want to explore newly added or innovative assistants to enhance their teaching practices.
Find Relevant Assistants – When browsing the discovery page, educators want to see assistants grouped by category and relevance to easily find tools suited to their needs.
Discover Popular Options – Educators want to view trending or highly rated assistants when exploring new features, enabling them to try out solutions others have found effective.
Save Favorites – Educators want to save their frequently used assistants, making them easily accessible without repeated searches.
Experiment with New Tools – Educators want to explore newly added or innovative assistants to enhance their teaching practices.
Background is the team’s wireframes, the middle is the one I worked on
Ideation
Ideation
User Flows
My team and I identified six user flows that were critical to the platform's functionality. I was responsible for designing the onboarding user flow, while my team members worked on the remaining flows. Each of us took ownership of wireframing and designing our assigned flows to ensure an efficient and seamless user experience. Throughout the process, we maintained constant communication, aligning our designs to create a cohesive and intuitive platform.
My team and I identified six user flows that were critical to the platform's functionality. I was responsible for designing the onboarding user flow, while my team members worked on the remaining flows. Each of us took ownership of wireframing and designing our assigned flows to ensure an efficient and seamless user experience. Throughout the process, we maintained constant communication, aligning our designs to create a cohesive and intuitive platform.
Onboarding user flow I worked on
Wireframes
My team and I created medium-fidelity wireframes to communicate our ideas to the Reality AI community and gather feedback before moving forward with high-fidelity mockups. Each of us designed a layout that aligned with user needs and project goals. We restructured the page layouts, integrating new features to enhance the experience and engagement. This iterative approach allowed us to refine the experience before finalizing the design.
My team and I created medium-fidelity wireframes to communicate our ideas to the Reality AI community and gather feedback before moving forward with high-fidelity mockups. Each of us designed a layout that aligned with user needs and project goals. We restructured the page layouts, integrating new features to enhance the experience and engagement. This iterative approach allowed us to refine the experience before finalizing the design.
Background is the team’s wireframes, the middle is the one I worked on
Design & Iterations
Design & Iterations
UX/UI Iterations & Feedback
Once our team finalized the wireframes, we conducted a thorough review to ensure alignment with user goals and key Jobs to Be Done. We then split into smaller teams of three, each tasked with creating a refined layout that we could present to the Reality AI community for feedback on usability and technical feasibility. I was part of Team B, and we gathered valuable insights that shaped our next iterations.
Once our team finalized the wireframes, we conducted a thorough review to ensure alignment with user goals and key Jobs to Be Done. We then split into smaller teams of three, each tasked with creating a refined layout that we could present to the Reality AI community for feedback on usability and technical feasibility. I was part of Team B, and we gathered valuable insights that shaped our next iterations.
Key Feedback & Refinements
1. Favorites Section: Simplifying Interaction
Feedback: Drag-and-drop for favoriting assistants felt unintuitive and required more effort than a simple click-to-favorite action, commonly seen in apps like Spotify or Pinterest.
Design Decision: We replaced drag-and-drop with a one-click “heart” icon, making it easier and faster to add tools to Favorites.
2. Card Layout vs. List Format
Feedback: Stacked card layouts worked well in mobile apps but could make scanning and interaction more cumbersome in a web environment.
Design Decision: We explored a sticky card layout to maximize space while ensuring users could see enough information at a glance.
3. Trending Assistants: Display & Performance Considerations
Feedback: A horizontally scrollable Trending section would enhance discovery, but we needed to consider front-end and back-end constraints.
Technical Decision: Instead of real-time queries, we opted for precomputed trending data, ensuring smooth performance while keeping the content fresh.
4. Recent Activity: Session Differentiation
Feedback: Users needed a clearer way to differentiate between multiple sessions with the same assistant.
Design Decision: We introduced more specific timestamps and an expanded history page, allowing users to revisit recent sessions easily or browse their full history.
Key Feedback & Refinements
1. Favorites Section: Simplifying Interaction
Feedback: Drag-and-drop for favoriting assistants felt unintuitive and required more effort than a simple click-to-favorite action, commonly seen in apps like Spotify or Pinterest.
Design Decision: We replaced drag-and-drop with a one-click “heart” icon, making it easier and faster to add tools to Favorites.
2. Card Layout vs. List Format
Feedback: Stacked card layouts worked well in mobile apps but could make scanning and interaction more cumbersome in a web environment.
Design Decision: We explored a sticky card layout to maximize space while ensuring users could see enough information at a glance.
3. Trending Assistants: Display & Performance Considerations
Feedback: A horizontally scrollable Trending section would enhance discovery, but we needed to consider front-end and back-end constraints.
Technical Decision: Instead of real-time queries, we opted for precomputed trending data, ensuring smooth performance while keeping the content fresh.
4. Recent Activity: Session Differentiation
Feedback: Users needed a clearer way to differentiate between multiple sessions with the same assistant.
Design Decision: We introduced more specific timestamps and an expanded history page, allowing users to revisit recent sessions easily or browse their full history.
Screenshot tiled: Feedback from Reality AI Community, with our final wireframe in front
Style Guide and Design System
Style Guide and Design System
Once our team finalized the wireframes, we moved into one of the more engaging phases—applying colors, typography, and visual elements to bring the platform to life. Since Marvel AI already had an established style guide and design system, we ensured that our high-fidelity mockups and prototypes adhered to these standards.
This maintained brand consistency and streamlined the handoff to development, making implementation more efficient. We carefully applied Marvel AI’s primary colors to enhance visual hierarchy and accessibility, used the brand’s typography to maintain readability, and leveraged existing UI components where possible to ensure a seamless design-to-development workflow. By following the design system, we ensured that our updates felt cohesive, intuitive, and scalable.
Once our team finalized the wireframes, we moved into one of the more engaging phases—applying colors, typography, and visual elements to bring the platform to life. Since Marvel AI already had an established style guide and design system, we ensured that our high-fidelity mockups and prototypes adhered to these standards.
This maintained brand consistency and streamlined the handoff to development, making implementation more efficient. We carefully applied Marvel AI’s primary colors to enhance visual hierarchy and accessibility, used the brand’s typography to maintain readability, and leveraged existing UI components where possible to ensure a seamless design-to-development workflow. By following the design system, we ensured that our updates felt cohesive, intuitive, and scalable.
Once our team finalized the wireframes, we moved into one of the more engaging phases—applying colors, typography, and visual elements to bring the platform to life. Since Marvel AI already had an established style guide and design system, we ensured that our high-fidelity mockups and prototypes adhered to these standards.
This maintained brand consistency and streamlined the handoff to development, making implementation more efficient. We carefully applied Marvel AI’s primary colors to enhance visual hierarchy and accessibility, used the brand’s typography to maintain readability, and leveraged existing UI components where possible to ensure a seamless design-to-development workflow. By following the design system, we ensured that our updates felt cohesive, intuitive, and scalable.
High Fidelity and Prototyping
High Fidelity and Prototyping
The team worked asynchronously, communicating through Figma comments and WhatsApp messages to provide feedback as we each brought a page to life. I was responsible for designing the main discovery page, applying the established style guide and design system while ensuring consistency across the platform. In addition to styling, I created new components for the features we introduced, making sure they functioned properly before annotating them for developer handoff. Each team member focused on a different section of the platform, such as the favorites section, list pages, and mobile layout, ensuring that every aspect of the redesign was thoughtfully executed and aligned with our user experience goals.
The team worked asynchronously, communicating through Figma comments and WhatsApp messages to provide feedback as we each brought a page to life. I was responsible for designing the main discovery page, applying the established style guide and design system while ensuring consistency across the platform. In addition to styling, I created new components for the features we introduced, making sure they functioned properly before annotating them for developer handoff. Each team member focused on a different section of the platform, such as the favorites section, list pages, and mobile layout, ensuring that every aspect of the redesign was thoughtfully executed and aligned with our user experience goals.
The team worked asynchronously, communicating through Figma comments and WhatsApp messages to provide feedback as we each brought a page to life. I was responsible for designing the main discovery page, applying the established style guide and design system while ensuring consistency across the platform. In addition to styling, I created new components for the features we introduced, making sure they functioned properly before annotating them for developer handoff. Each team member focused on a different section of the platform, such as the favorites section, list pages, and mobile layout, ensuring that every aspect of the redesign was thoughtfully executed and aligned with our user experience goals.
Hand off & Reflection
Hand off & Reflection
Developer Hand Off
Developer Hand Off
To ensure a smooth transition to development, we provided detailed annotations for each feature, outlining functionality and expected behavior. We also included precise measurements between elements on each screen, allowing developers to accurately implement each component. By documenting interactions, states, and spacing, we minimized ambiguity and ensured alignment between design and development, leading to a more efficient build process.
To ensure a smooth transition to development, we provided detailed annotations for each feature, outlining functionality and expected behavior. We also included precise measurements between elements on each screen, allowing developers to accurately implement each component. By documenting interactions, states, and spacing, we minimized ambiguity and ensured alignment between design and development, leading to a more efficient build process.
Reflection
Reflection
Taking on this project strengthened my leadership and communication skills as I collaborated with a cross-functional team to redesign a complex platform. I gained valuable experience working within an established design system and style guide while also identifying opportunities for innovation. This project reinforced the importance of balancing user needs with business requirements and scalability, ensuring that our solutions were both user-friendly and feasible for implementation. As a result of this experience, another team member and I are now taking on the next challenge—redesigning the design system to meet accessibility standards and improve overall usability.
Taking on this project strengthened my leadership and communication skills as I collaborated with a cross-functional team to redesign a complex platform. I gained valuable experience working within an established design system and style guide while also identifying opportunities for innovation. This project reinforced the importance of balancing user needs with business requirements and scalability, ensuring that our solutions were both user-friendly and feasible for implementation. As a result of this experience, another team member and I are now taking on the next challenge—redesigning the design system to meet accessibility standards and improve overall usability.
Screenshot of the components. I built the 4 expanded versions of the assistants, as well as the filter buttons.
More
Projects
More
Projects