MENU
Corpus Key: Redesigning the AI course creation tool
[Project Overview]
CorpusKey is an AI-powered course material creation tool designed to help instructors generate textbooks, lesson plans, and presentations effortlessly.
Our goal was to transform a developer-centered, complex interface into an intuitive, user-centered experience that empowers instructors to focus on teaching rather than struggling with tools.
As the UX Designer, I led comprehensive user research with instructors and TAs, redefined complex AI-driven workflows into intuitive, flexible content creation experiences, and collaborated closely with CorpusKey’s leadership and development teams to deliver a solution that empowers educators and drives adoption of AI-assisted course tools.
Role
Solo UX Designer
Industry
Compliance, B2B
Time
2 months
Tools
Framer, Jira
Platform
Website, Mobile
Status
Shipped
Impact
Strengthened Brand Credibility
Boosted Engagement & Conversion
Designed for Scalability & SEO Growth
Accelerated Launch Timeline
[Problem Context]
On average, over 70% of the instructors struggled to generate course outlines independently, with most spending extra hours per course setup due to unclear terminology and complex workflows.
For instructors juggling multiple courses each semester, these friction points led to frustration, reduced trust in AI-generated content, and low adoption rates. We conducted a usability test with instructors and TA's and quickly realised the following:
Positioned Litewave as a serious player in AI compliance
Converted investor and customer interest into product demos
Captured the product’s tone, which was innovative yet trustworthy
The company needed a digital front door that could communicate that complexity clearly without losing depth
Some of the challenges going in were
Multiple audiences: enterprise buyers, investors, regulatory partners
Urgent go-live timeline
No brand system or web identity yet
Dense technical language and abstract concepts
[The Challenge]
How might we transform CorpusKey’s complex, developer-centered website into an intuitive, educator-friendly experience?
[The Challenge]
How might we transform CorpusKey’s complex, developer-centered website into an intuitive, educator-friendly experience?
[The Solution]
We redesigned CorpusKey’s website by simplifying complex hierarchies into clear, nested outlines, introducing draggable content blocks, clarifying terminology, and adding smart preview features.
Rebuilt the information architecture to streamline content creation flows and improve discoverability.
Refined UX copy to reduce cognitive load and support accessibility across academic disciplines.
Redesigned the interface with stronger visual hierarchy and cleaner navigation, enhancing ease of use for both novice and tech-savvy educators.
Introduced a subscription model and freemium pricing strategy designed to drive user adoption while supporting scalable monetization.
Discover
Define
Design
Deliver
[Home Page]
Home Page: Setting the tone
The goal here was to communicate Litewave’s value proposition instantly and drive users toward the CTA “Book a Demo.” Some of our design decisions were:
Clarity
Hero headline + sub-headline clarified the value in a single sentence.
Motion
Subtle hero animation with geometric motion hinted at the AI system’s “live intelligence.”
Conversion
Clear CTA hierarchy: Book a Demo · Learn More.
Trust
Trust signals (industries served, compliance credentials) surfaced above the fold.
[Platform Page]
Platform Page: Setting the tone
The goal here was to communicate Litewave AI’s powerful platform architecture in a way that feels understandable, dynamic, and credible, turning a dense technical infrastructure into a clear, visual story of how the platform operates from cloud to edge. Some of my design decisions for this page were -
Information Hierarchy for Cognitive Ease
Every section follows a consistent pattern: icon → concise title → one-line summary, replacing technical jargon.
Diagram-Centered Approach
This diagram helps visitors see complexity without reading paragraphs of text, serving both investors (for credibility) and engineers (for structure).
Scroll-Activated Microinteractions
As users move down the page, subtle fade-ins and directional scroll cues guide them from one module to another.
Structured Storytelling with Visual Anchors
The page opens with a bold headline, “The AI Operating System for Regulated Industries”, immediately anchoring what Litewave is and who it’s for.
[Pricing Page]
Pricing Page: Turning Complexity into Confidence
The goal here was to design a pricing experience that helps enterprise users understand flexible plans, usage-based models, and AI credit systems, without overwhelming them. Litewave operates in a space where “pricing” is not a simple number; it’s a mix of deployment types, credit models, and SLAs.
The goal was to make that complexity look simple, feel transparent, and inspire users to reach out for a quote. Some of my design decisions were -
Comparison Table for Transparency
Beneath the tier cards, a detailed comparison matrix unfolds, offering technical depth for more analytical decision-makers.
AI Credits Model Visualization
Introduced a clean, icon-based section explaining Litewave’s credit-based pricing — where users pay only for the activities they use (data ingestion, insights, workflows, predictions).
Interactive FAQs for Clarity
A collapsible FAQ section at the end allows deeper exploration without clutter. Questions like “What does ‘Monthly/Annual Minimum + Usage’ mean?” are surfaced based on user behavior patterns identified in testing.
Conversion-Focused Closure
Every part of this page ends on reassurance, clarity, transparency, and collaboration. Because enterprise pricing isn’t about the number; it’s about the trust behind it.
[About Page]
About Page: Designing the Story Behind the Company
The goal was to transform Litewave AI’s origin story and brand philosophy into an engaging, scroll-based narrative, one that feels visionary yet grounded in real-world impact. Most AI companies sound identical when they describe what they do. I wanted Litewave’s About page to feel cinematic, to make visitors experience the brand’s purpose, not just read about it. Some of my design decision were -
Chronological Storytelling via Motion
For the story, instead of using static text, I went for a stacking animation where it created a rhythm of discovery, the story builds like the company did.
Interactive Toggle: Before/After
On toggle, the dark card glows with Litewave’s brand-blue gradient, revealing how AI transforms hidden data into actionable insight. This toggle became a metaphor for the brand itself
Credibility Through Context
The “Built for Regulated Industries” section grounds the vision with real-world applicability, pairing product philosophy with domain focus. This balance was crucial for investor and partner trust.
The Litewave Difference Section
A concise summary of what sets the platform apart , visually tied together with consistent line dividers and minimalist typography.
[Contact Page]
Contact Page: Designing for the conversion
The goal was to create a contact experience that feels approachable and efficient for enterprise users, blending accessibility, brand motion, and transparency. For a company rooted in compliance and AI, the contact flow needed to feel as secure and structured as the product itself, without losing the warmth of human connection.
Segmented Actions for Intent Clarity
The page opens with a simple header, followed by three distinct action cards. This structure lets users self-identify their intent instantly, avoiding form fatigue or confusion.
Litewave Around the Globe: Visualizing Reach
Instead of listing addresses in plain text, I introduced a rotating 3D globe graphic pinpointing Litewave’s offices in San Francisco and Bangalore. Interactive hover tooltips display exact office details.
FAQ Section for Immediate Support
The final section contains FAQs tailored to common pre-sales questions, these eliminate friction before users even reach out, saving sales teams time and reinforcing user autonomy.
Streamlined Contact Form
The “Write to Us” form was designed around minimalism and trust. I wanted the form to feel “light” , something you wouldn’t dread filling out, even if you’re reaching out from a busy enterprise role.
[Competitor Analysis]
To deeply understand instructors’ pain points, we conducted user interviews with professors and teaching assistants across STEM and humanities. We also performed a heuristic evaluation of the existing website and analyzed user behavior from platform analytics.
Key findings revealed that over 70% struggled to create outlines without assistance, terminology felt overly technical, and instructors lacked confidence in AI-generated content due to unclear previews and guidance. These insights highlighted a critical need to simplify workflows, clarify language, and build trust through transparent AI interactions.
[Product Deep-Dive]
To design effectively, I needed to grasp the product’s end-to-end workflow. I worked with the founders and engineers to get a hands-on walkthrough of each Litewave module
Through founder interviews and platform walkthroughs, I mapped Litewave’s core workflow, Digitize → Comply → Optimize , and broke it into digestible visual layers. Each layer became the foundation for how information was structured on the website.
I realized the product’s technical depth wasn’t a challenge to hide, but a story to unfold, one that could be told visually through progressive hierarchy and motion.
[Brand Identity
& Design System]
I built a unified design system that captured Litewave’s essence - clear, confident, and quietly bold.
From typography to motion curves, every decision was anchored in simplicity and precision. The system became the blueprint for scalability, ensuring the website, product UI, and marketing assets spoke the same visual language.
This consistency allowed me to focus on storytelling and interaction without reinventing the foundation every time.
[Iterations]
I worked in rapid weekly sprints with founders and engineers to refine and evolve the design.
Starting with a V0 landing page prototype, we aligned on tone, hierarchy, and flow before scaling to the Platform, Pricing, About, and Contact pages. Each round of feedback shaped subtle but meaningful shifts, from content order to animation pacing.
By week four, the system had matured from static visuals to a fully responsive, motion-driven website ready for deployment.
[Stakeholder
Collaboration]
We met weekly as a cross-functional team to align design, product and engineering priorities.
Each Monday I presented the latest visuals, prototypes or animation ideas; by Wednesday we collected feedback from the founders, engineers and legal/compliance leads; by Friday we agreed on what to iterate next.
These feedback loops helped ensure the website design stayed in sync with product road-map, technical feasibility, and compliance requirements.
[Legal &
Compliance Integration]
I collaborated with the legal team to design privacy, cookie, and accessibility components that build trust without breaking flow
Instead of treating compliance as an afterthought, I designed it into the experience, from the cookie banner and policy pages to the tone of user consent messages.
I also ensured the site met WCAG 2.1 AA standards for accessibility — including ARIA labels, focus states, and proper contrast ratios. This made Litewave not only compliant but ethically inclusive.
[Constraints
& Trade Offs]
Working within tight timelines and compliance demands forced smarter design decisions
From Day 1 we faced three major constraints,
a six-week launch window,
no existing web presence or brand system, and
heavy regulatory/compliance requirements (cookie policy, privacy, WCAG 2.1 AA).
Rather than seeing these as hindrances, I used them as guiding boundaries to sharpen the design.
Data Management Issues
Keeping records secure, updated, and logged in Optima is very challenging.
Accessibility barriers
Older volunteers struggle with current digital tools due to small text, dense interfaces, and lack of guidance.
[Testing
& Responsiveness]
Participants were asked to create outlines and reorganize modules using drag-and-drop. Feedback revealed improved comprehension of workflows, higher trust in previews, and reduced reliance on external support
Key metrics included a 40% reduction in outline setup time, a significant increase in System Usability Scale (SUS) score from 55 to 85, and stronger positive sentiment around the simplified language and guidance.
Iterative refinements based on this feedback helped us align even more closely with instructors’ mental models and usability expectations, ensuring the final experience felt intuitive and empowering.
[Launch & Impact]
Our redesigned CorpusKey experience empowered instructors to create course materials more confidently and efficiently, while also aligning with business growth goals
Beyond metrics, users reported feeling more in control of their content and expressed higher trust in AI-generated outputs — a crucial factor for driving long-term adoption and brand loyalty.
"Beautiful website, very slick, congrats on the good efforts! Keep up the good work "
- Investor
"The website came out so beautifully- I was browsing thru it over my mobile and the Ui work is done excellently"
- Ex Microsoft PM Lead
"Congratulations, the website is looking really amazing!"
- Partner
[Reflection]
As a UX Designer,
This project challenged me to balance deep user empathy with business strategy, and to redesign a highly technical tool into an approachable, educator-first experience.
What I learned:
The importance of aligning AI-powered workflows to mental models, rather than forcing users to adapt to system logic.
How strategic microcopy and transparent previews can build trust in complex, unfamiliar technologies.
The value of early, iterative testing to uncover usability issues and validate design direction before high-fidelity investments.
Mobile Site Coming Soon!