MENU
Designing Litewave AI’s First Official Website
[Project Overview]
Litewave AI is a San Francisco based startup building an AI-powered compliance and observability platform for regulated industries like pharma manufacturing.
My goal was to design and launch Litewave AI’s first official website that communicated their mission with clarity, credibility, and visual consistency. As their solo designer, I led the entire process of research, UX architecture, interface design, motion design, accessibility, and compliance integration, taking the brand from zero to launch in just six weeks.
The result was a modern, scalable, and SEO-optimized website that became the company’s primary touchpoint for investors, clients, and partners, strengthening Litewave’s brand presence and doubling demo conversions within the first month of launch. Check it out here!
Role
UX Designer
Industry
EdTech, B2B2C SaaS
Time
5 months
Tools
Figma
Platform
Website
Status
Shipped
Impact
Simplified content creation flow, reducing outline setup time by ~40%
Improved instructor adoption and satisfaction
Increased potential for course material scalability and reuse
[Problem Context]
When I joined Litewave AI, there was no website, just a vision. The founders needed a digital presence that clearly explained their complex AI platform in a way that felt credible, human, and enterprise-ready.
Litewave’s product ecosystem — Digitize → Comply → Optimize — is powerful but inherently complex. It combines AI, data science, and compliance automation for enterprise manufacturing clients.
The company needed a digital front door that could communicate that complexity clearly without losing depth. They wanted something that -
70%
Outline Completion Struggles
70% of instructors struggled to complete outlines without external help, leading to drop-offs and reduced trust.
60%
Terminology Confusion
60% found the platform’s language and hierarchy confusing, causing a steep learning curve and high cognitive load.
>50%
Early Stage Abandonment
50% abandoned the platform at the outline creation stage, significantly limiting adoption and scalability.
[The Challenge]
How might I translate a technically deep AI-compliance product into a clear, credible, and visually engaging website that builds trust with enterprise audiences while meeting legal and accessibility standards?
[The Challenge]
How might I translate a technically deep AI-compliance product into a clear, credible, and visually engaging website that builds trust with enterprise audiences while meeting legal and accessibility standards?
[Solution Summary]
I started with asking one question:
"If Litewave were a person, how would they introduce themselves online?"
From there I followed a four-phase design process, which resulted in a five-page responsive website with
Home,
Platform,
Pricing,
About,
Contact,
legal/compliance pages
The tone was clear, confident, and quietly bold. The experience was fast, structured, and trustworthy.
40%
Reduction in outline setup time
Simplified workflows and clear nested structures helped instructors set up course outlines significantly faster.
30%
Increase in completion rate
Increased number of instructors who successfully publish or finalize a full set of materials after onboarding.
+30 pts
System Usability Scale Score
System Usability Scale (SUS) score improved from 55 to 85 after redesign, reflecting significantly higher ease of use and instructor confidence.
Project Library
Dashboard
Outline Management Page
[Research]
I began by analyzing 15 competitor sites to see how AI and compliance brands framed their story
Most leaned heavily into technical jargon or overdesigned visuals, which made them feel intimidating. This analysis helped me identify an opportunity for Litewave, to stand out with a tone that felt human, credible, and confident, not robotic or overwhelming.
I documented patterns around layout, information hierarchy, and CTA placement, using them as benchmarks for what to adopt and what to avoid.
[Research]
The users said..
6
Professors
2
Teaching Assistants
"I don’t trust the AI to generate content without showing me exactly what it will look like first."
- Instructor
"The terminology felt like it was made for developers, not educators like me."
- Professor
"I kept getting lost in all the sections, I just wanted to start building my syllabus, not learn a new system first."
- Professor
[Research]
For the heuristic evaluation, we applied Nielsen’s usability principles to systematically audit each screen and interaction flow.
This deep dive revealed critical friction points impacting comprehension, navigation, and task efficiency. By uncovering both quick-win fixes and deeper structural issues, we identified opportunities to improve user trust, drive adoption, and strengthen overall retention and conversion.
[Research]
We also explored successful EdTech tools to identify inspiring design patterns
As part of our research, we conducted a competitive analysis of leading educational content platforms, including Top Hat, Perusall, and Edmodo. Our goal was to understand how successful EdTech products reduce friction, encourage trust in AI, and support user adoption at scale.
Frictionless Onboarding
Instructors felt overwhelmed by complex hierarchies, technical terms, and unclear system feedback, leading to frustration and tool abandonment.
Transparent Previews &
Feedback
Clear preview systems and immediate feedback loops build trust in AI-generated content and reduce hesitation to publish.
Goal-Driven Navigation
Interfaces prioritize what instructors want to accomplish, rather than overwhelming them with technical details or settings.
Supportive Microcopy
Simple, encouraging language empowers non-technical users to explore and experiment without fear of making mistakes
[Research]
Based on all the data collected through our research we identified 4 key issues
Cognitive Overload
Instructors felt overwhelmed by complex hierarchies, technical terms, and unclear system feedback, leading to frustration and tool abandonment.
Low Confidence in AI Outputs
Many instructors doubted AI-generated materials due to a lack of transparent previews and contextual guidance.
Steep Learning Curve
Non-technical instructors struggled to onboard independently, often requiring external help to understand core workflows.
Inefficient Content Structuring
Difficulty visualizing and organizing nested outlines caused delays in course creation and frequent rework.
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.
[Analysis]
To translate our research into actionable insights, we mapped the entire CorpusKey user flow and created an affinity diagram to categorize pain points, suggested solutions, and small delights.
[Analysis]
The site map analysis helped us pinpoint critical friction areas, such as unclear entry points, ambiguous back navigation, and confusing prompt flows. This clarified exactly where instructors felt lost and overwhelmed.
Through affinity mapping, we clustered key pain points around lack of feedback, missing hierarchy, unclear instructions, and trust barriers. These insights directly shaped our design priorities and highlighted opportunities to simplify the platform and empower instructors to work confidently without external help.
[Analysis]
Based on the analysis done, we decided to focus on three core opportunity areas
Combining insights from interviews, heuristic evaluation, and competitor analysis, we mapped the key friction points across the instructor journey. We identified major breakdowns in early onboarding, high cognitive load during outline creation, and a lack of trust in AI outputs.
Simplify workflows and reduce learning curve
Restructure outline creation and terminology to align with mental models of educators rather than developers
Clear feedback system and building trust
Volunteers desired more emotional connection and confidence rather than just efficiency.
Better UX copy for independent adoption
Create guidance and supportive UX copy that empower instructors to work without external help.
[Analysis]
From this synthesis, I derived core design principles to guide solution development
Simplicity First
[KISS Principle]
Prioritize solutions that give time back rather than simply digitize existing workflows.
Confidence through clarity
[Jakob’s Law]
Build instructor confidence in AI-generated content via clear previews, in-context guidance, and visible progress at every stage.
Guided Yet Flexible
[Fogg Behavior Model]
Design for self-sufficiency so instructors can navigate, and edit content confidently without needing external help or technical support.
Consistency & Clarity
[Consistency & Standards]
Ensure consistent interaction patterns and clear visual hierarchy to reduce errors, avoid misinterpretation, and create a smooth learning curve.
[Ideation]
Guided by core design principles, we explored multiple ways to simplify workflows, clarify structure, and build trust in AI-generated content.
We started with low-fidelity sketches and wireframes to quickly test ideas such as nested outline structures, draggable content blocks, and contextual helper text. We also experimented with guided walkthrough flows and progressive onboarding to support independent exploration.
[Iterations]
During this phase, we prioritized rapid iteration and early feedback from instructors, allowing us to validate mental models and uncover usability issues before moving to high-fidelity designs.
This approach helped us align our solutions with real instructor needs while keeping the business goals of adoption and retention front and center.
[Iterations]
To quickly test information architecture, workflows, and key interaction patterns, we began with low-fidelity wireframes and flow sketches.
These early explorations allowed us to validate fundamental concepts with CASA volunteers and stakeholders before investing in detailed UI design.
[Business Model]
Alongside improving usability, we were tasked with designing a sustainable business strategy for CorpusKeyy
We proposed a freemium model, allowing instructors to explore core content creation features for free and upgrade to unlock premium capabilities — including advanced analytics, enhanced customization, and additional export options. This approach supports trial-based engagement while creating a clear value ladder for premium conversion.
To support seamless transactions, we recommended Stripe integration for easy, trusted payments, reducing friction in the upgrade journey. By aligning UX and business strategy, this model helps CorpusKey increase adoption, encourage experimentation, and scale revenue sustainably.
Business Goals
Revenue Maximization, User Retention, Market Positioning
Target Users
Professors, Administrators, Individual mentors
Strategy Focus
Freemium plan + Credit system with points
[Business Model]
Why we chose the Freemium model for Corpus Key
To increase adoption and reduce entry barriers, we needed a model that empowers instructors to experience value upfront without immediate commitment — making CorpusKey more approachable and widely accessible.
Freemium
This plan will only allow them to create a single project with a limited number of outlines. A low-risk start helps users try the product with limited features.
Credit
The credit system allows rewarding engagement and incentivizes continued usage. Users earn points and redeem them for premium features.
Contact Sales
The contact sales option encourages users to explore tailored solutions and premium offerings through direct contact with the sales team.
[Final Solution]
I started with asking one question:
"If Litewave were a person, how would they introduce themselves online?"
From there I followed a four-phase design process, which resulted in a five-page responsive website with
Home,
Platform,
Pricing,
About,
Contact,
legal/compliance pages
The tone was clear, confident, and quietly bold. The experience was fast, structured, and trustworthy.
Projects Library
The Project Library acts as the main dashboard, allowing instructors to easily view, manage, and continue working on all their existing projects in one centralized place. A “Create New Project” tile encourages quick content creation and lowers the barrier to getting started. We also redesigned the core CRUD functions, replacing previously unintuitive icons with clear, labeled actions for editing, duplicating, and deleting , to reduce errors and build confidence in managing materials. This screen was designed to promote independent use, simplify content organization, and empower instructors to feel fully in control of their work.
This page also displays the three CRUD functions which were previously displayed as icons and were unintuitive.
(Create, Read, Update, Delete)
CRUD Functions
The queue pane displays all the generated files of all the projects from the project library. This gives the user an overview of the files that are already generated and the ones that are in progress.
Queues
Dashboard
After creating a new project, instructors are directed to the Project Overview page, which provides a clear, organized snapshot of their entire project. This structure was designed to reduce cognitive load, support step-by-step creation, and provide instructors with clear visibility and control over their course content at every stage.
Upload files
This is where instructors can add reference materials for AI-based content generation
Outline Generation
This section displays all existing outlines and allows users to create new ones by entering prompts and selecting output formats (e.g., DOCX, PPT)
Queue
Queues transparently show the status of outlines in progress and those already generated
Outline Management Page
The Case Summary screen gives a quick, comprehensive view of the child’s background and key case details. Volunteers can track progress, review flagged updates, and access important documents easily. It helps them prepare confidently for meetings and make informed recommendations.
After clicking “Create New Outline,” instructors can build a detailed, nested outline with headings, subheadings, and learning objectives for each section. Contextual helper text provides helpful guidance without disrupting workflow. This screen was designed to match instructors’ mental models and encourage confident, independent planning.
Creating outline
The "+ Add item" feature allows users to add multiple subheadings to a single heading or create multiple headings for their outline.
Hierarchy maintained
Helper text
[Design System]
To ensure a cohesive experience across CorpusKey, we created a design system that captured the visual language
Our system included reusable UI components, updated typography, color palettes optimized for accessibility, iconography, and clear interaction states. We also established design tokens and documentation guidelines to ensure smooth collaboration with developers and enable future feature expansion with minimal design debt.
[Components]
[Typography]
[Colours]
[Typography]
[Colours]
[Spacing]
[Shadows]
[Developer Hand Off]
To support an efficient transition from design to development, we documented a comprehensive handoff guide outlining all UI components, interaction flows, and edge cases
This guide included annotated Figma files with usage instructions, states for dynamic elements (like drag-and-drop behaviors and outline previews), and clear guidance on responsive behavior. We also provided design tokens and specifications for typography, spacing, and colors to ensure pixel-perfect implementation.
[Testing]
I optimized the website for every screen and scenario, from desktops to tablets to mobile devices
Using Framer’s responsive tools, I refined scaling, breakpoints, and component behavior to ensure seamless transitions. Every animation was tested for timing and performance to maintain consistency across devices.
I also performed usability checks with stakeholders to confirm that content hierarchy and navigation felt natural on smaller screens.
Hidden Advanced Options
Some volunteers struggled to understand the sidebar structure and where to find specific case-related reminders and files.
Initial Drag-and-Drop Confusion
A few users struggled with the early drag-and-drop interaction patterns before microinteractions were refined.
Simplified Outline Flow
Instructors found the new nested outline structure intuitive and easier to navigate without external help.
Supportive Microcopy
Participants appreciated having all child case details, upcoming tasks, and notes in one place.
[Impact]
The site went live in just six weeks, transforming Litewave’s vision into a tangible digital presence
After launch, analytics showed a 42% increase in average session duration and 2× more demo requests in the first three weeks.
The website quickly became the company’s credibility engine, used in investor decks, press communications, and onboarding calls. It was more than a site; it was Litewave’s voice finally speaking clearly.
40%
Reduction in outline setup time
Simplified workflows and clear nested structures helped instructors set up course outlines significantly faster.
30%
Increase in completion rate
Increased number of instructors who successfully publish or finalize a full set of materials after onboarding.
+30 points
System Usability Scale Score
System Usability Scale (SUS) score improved from 55 to 85 after redesign, reflecting significantly higher ease of use and instructor confidence.
[Reflection]
This project reminded me that good design is about translating complexity into confidence
By blending clarity, accessibility, and subtle motion, I built more than a website, I built a foundation of trust.
What started as a design sprint turned into a blueprint for how Litewave communicates its purpose to the world, simple, transparent, and human.
Mobile Site Coming Soon!