AI-Powered L&D Platforms: ClearXP UI/UX Case Study

Before the redesign, ClearXP was a manual LMS. Admins uploaded content, managed it, modified it, and shared it with students or employees. Every step was hands-on, and the friction was everywhere:

Manual content review. Admins had to eyeball every piece of uploaded content for errors, tone, and formatting. No automated checks, no assistance.

Limited content types. The platform only supported text and images. No video, no interactive elements, no rich media.

Painful editing. Adjusting layout, design, or structure was difficult and time-consuming. Non-designers were stuck.

Zero comprehension tracking. The biggest gap: admins had no way to know whether learners actually understood the content. They could see if someone opened a page, but not whether anything landed.

ClearXP's team knew they needed two things: AI to solve the content creation bottleneck, and gamification to solve the comprehension tracking problem. They were right on both counts.

Role: UI Designer, Motion Designer, Illustrator Collaborator: Priyagung Alfikri AM Timeline: March 2026 (4 weeks) Tools: Figma, Jitter Scope: Redesign the core platform experience, design an AI-powered content builder, build a conversational gamification system, and create a tracking layer that gives admins real comprehension data.

Users always know what they want to share. The struggle is delivering it clearly. The AI content builder was designed to assist, not automate away the user's intent.

It handles spelling correction, tone-of-voice adjustment, layout suggestions, and brand color application. The user stays in control of the message; the AI handles the polish. This means a store manager writing a new policy and a school teacher building a math lesson both get professional-quality output without needing design skills.

The client was clear: users could be anyone. Non-technical, non-designer, general staff. The gamification builder had to be effortless.

Not everyone can design, but everyone can type. Based on that fact, I designed a conversational builder where users describe the type of game they want, and the AI delivers it. If they can imagine it, the system builds it.

The hardest design challenge was fitting the conversational UI, content builder, and gamification tools into a single screen. The solution: a native widget inside the conversation panel. Users navigate their created games through the widget while staying focused on the input in the conversation panel. The AI handles execution in the canvas panel. One screen, two clear zones, zero context-switching.

Before defining the solution, I started with empathy exercises. If I were a junior school teacher building a fun math class, what would I want? If I were a general manager across several store branches creating a new policy, how would I want to build it?

The hypothesis was the same in both cases: users want the fastest, easiest path to content. Type a few words (or speak), and AI handles the rest. Drop in a reference or brand asset, and AI polishes the output.

I validated this through research with both technical and non-technical users before touching Figma. Their responses confirmed the direction: speed and simplicity above everything. The comprehension tracking layer was built on top of the gamification system, so admins get real engagement data (quiz scores, completion patterns, time spent) tied directly to learning outcomes.

A walkthrough of the final interaction flow, showing the conversational builder, AI content generation, and gamification widget working together in a single screen.

David Johnson, CTO of ClearXP, was particularly impressed with the native widget inside the conversation panel. This was a significant UX improvement over traditional breadcrumb and nested navigation patterns. From the user's standpoint, the interface was operable without any tutorial, saving substantial time and directly improving ClearXP's business efficiency.

The platform shipped with AI-powered content creation, a conversational gamification builder, and real comprehension tracking, transforming ClearXP from a manual LMS into an intelligent learning platform.