PrepAnywhere Tutoring Platform Redesign

UX Designer

Jul 01, 2021 - Jul 31, 2022 (13 months)
Client: MGL Learning

Context & Challenge

The pandemic disrupted traditional learning, exposing gaps in remote education. Students lacked personalized support, teachers struggled to reach diverse learners, and many were unable to get help outside of class. MGL Learning already had a strong AI model (trained by tutors and University graduates) but needed a web-product experience that could deliver accessible, adaptive, and meaningful math learning on a broad scale.

The core challenge to create a web LMS that not only houses content but actively helps students overcome learning gaps, gives usable feedback, aligns with different curricula (US, Canada, South Korea), and engages with users via technology to simulate tutor-like assistance.

Team: Jina Seok, Mike Woo, Nesan Vettivel, Roger Takeshita, Amy Song, Andrew Brown

Goals

Improve usability of the web experience so students, parents, and teachers can access learning resources more intuitively.
Integrate features for self-paced learning including uploading photos of questions (US/Canadian/Korea curricula) and getting solutions & video lessons.
Build a “learning path” supported by AI: mapping student’s struggles to video and similar problem practice.
Maintain strong engagement through UX, feedback, and clarity so remote learning is more effective.

My Approach & Design Process

User Research & Assessment

Conducted interviews with students to understand pain points: where they get stuck, what resources they turn to, and how remote learning challenges them.
Mapped customer journeys (students, parents, teachers) to identify touchpoints: ⇒ question-upload, exploring learning paths, viewing lectures, reviewing solutions.

Information Architecture & Wireframes

Redesigned site structure to support new features: clean paths to upload questions, find solutions, browse learning videos, and access the AI-driven learning path.
Created wireframes & flow diagrams to align on how users would move through the product.

Feature Design & AI Integration

Designed the “photo upload” feature: for students to snap question images (US/Canadian/Korea curricula), the system detects the topic, suggests a solution, or points to a video lecture.
Built AI Character “Goo” to tag questions, find matching video IDs, fetch analogous problems for practice, and recommend lecture content.

AI/ML Process Behind Tagging Video IDs and auto grading

Visual & Interaction Design

Created UI designs that are approachable (especially for students of middle/high school), with clear labeling, consistent typography, spacing, and minimal friction.
Designed an AI character / animation that helps make the experience friendlier and more engaging (“Goo” interacting with prompts) so the system feels less mechanical.

Iterative Testing & Refinement

Tested designs with users (students) to check usability of flows (e.g. uploading questions, navigating from lecture to similar problem).
Used feedback loops to refine UI, content labels, navigation, and error states (e.g. when AI can’t find a match).

Key Decisions & Trade-Offs

Photo-upload + AI matching vs more basic search: choosing to invest in smarter input (images) because many students have textbooks or printed questions.
Learning path driven by performance rather than static curriculum: helped tailor student journeys rather than forcing them through general grade-level content.
Friendly AI character to reduce cognitive burden and build a sense of trust/engagement vs a purely utilitarian UI.
Prioritizing remote support & video content to offset lack of in-person help during the pandemic.

Outcomes & Impact

A more usable, clearer website with features that allowed students to directly upload questions and access tailored learning resources.
Improved engagement, as users reported being able to find relevant materials more quickly thanks to AI-tagged content.
Enhanced path for remote learners: especially during COVID, the ability to self-pace, get lectures and similar practice seems to have reduced friction in continued learning.
Positive impact on adoption & retention due to usability improvements and clearer pathways.
Discord Server for Students: Promoting Engaging Communication, Music Streaming, and Collaborative Learning Environment

National Council of Teachers of Mathematics (NCTE-NCTM) Conference - Los Angeles

Reflection & Lessons Learned

Designing for adaptability is crucial: conditions like remote learning forced us to think about variable access, different needs, and need for strong feedback loops.
AI is only as good as its UX: building powerful backend models isn’t enough. The interface through which students upload, search, see lecture/video, and practice must be seamless, forgiving, and helpful.
User testing early & often matters: small usability adjustments had outsized effects (e.g. how prompt text for uploading images is worded, how learning paths are visualized).
Balancing personality with professionalism: adding friendly elements like “Goo” helped humanize the platform, making students more comfortable, while ensuring clarity and credibility remained.

Key Deliverables:

Information Architecture, User Research, Usability Testing, Learning Experience, Marketing, Mobile Application, Prototype, Wireframe, User Interface UI design, A/B testing, Component Library, Confluence, Cross-functional Collaboration, Design Documentation, Design Tokens, Figma, Google Analytics, Heuristic Analysis, Adobe Creative Suite, Interaction Design, Journey Mapping, Persona Development, Project Roadmap, Responsive Layout, Slack, Sprint Planning, Stakeholder Management, UX Audit

Tech / Tools & Platforms:

iOS, HTML, Bootstrap, React Native, Material Design, JavaScript, CSS / SCSS / SASS, TensorFlow, S3-AWS, CI/CD pipelines, AI / ML APIs, SaaS, Git / GitHub, Ruby, Slack, Notion, Figma, Adobe Creative Suite, LaTeX, Google Ads / SEO

Page updated

Google Sites

Report abuse