MENU
Volunteer Workflow Optimization: MIC
[Project Overview]
CASA (Court Appointed Special Advocates) volunteers support 242,000 children in foster care in the US each year. Yet, over 40% of their time is spent on paperwork, directly reducing advocacy time for children who need it most. They are essential in advocating for the best interests of children in foster care.
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, CASA volunteers spend 30–50% of their time on court reports and case documentation, equivalent to 4–6 hours per case, often repeated monthly
For older volunteers (who make up 55% of CASA’s workforce), this process is especially challenging due to accessibility barriers and digital literacy gaps.
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 help CASA volunteers create accurate, impactful reports more efficiently, enabling stronger child advocacy outcomes?
[The Challenge]
How might we help CASA volunteers create accurate, impactful reports more efficiently, enabling stronger child advocacy outcomes?
[The Solution]
MIC is a centralized digital workspace designed to empower CASA volunteers by streamlining time-consuming report-writing and case management workflow
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]
I started the research process by mapping volunteers’ workflows leading a comprehensive mixed methods research strategy to identify root causes behind administrative overload
Recognizing that most CASA volunteers are older adults and work within sensitive legal frameworks, I combined contextual inquiries, semi-structured interviews, and shadowing sessions to capture authentic workflows, accessibility challenges, and unmet needs.
[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]
We conducted usability testing with 6 CASA volunteers and key stakeholders. Our goal was to evaluate clarity, accessibility, and task success across core workflows before launch.
In a co-creation workshop with a CASA volunteer, we used storyboards to simulate the end-to-end case journey, prompting them at key decision points to uncover pain points and mental models. We also tested our prototype during this session, capturing usability feedback that directly informed refinements to improve clarity, efficiency, and real-world alignment.
• Participants: 6 CASA volunteers (ages 48–70), 1 CASA supervisor, 1 legal advisor.
• Format: Remote moderated sessions using clickable prototypes (Figma), followed by debrief interviews.
• Key tasks tested: AI note assist flow, report generation, navigation across dashboard and case details.
[Launch & Impact]
We knew we’d succeeded when volunteers felt less like administrators and more like advocates
because at its core, MIC was about making space for real human connection.
"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 I took on a leadership role, guiding a UX team
As team lead, I established design vision and ensured timely stakeholder meetings, facilitated continuous feedback loops, and drove iterative design improvements to achieve an effective final solution. It was very intriguing to be a part of understanding a very intricate and sensitive system for children and make a change for them. I learnt some very interesting UX research methods, like Crazy 6s and Round robin for brainstorming and ideating. I also polished some of my Figma skills on creating a design system and auto layout of components.
Mobile Site Coming Soon!