Looking to boost your product? Let's start with UX audit service today → Get the Details

Boost user engagement by 30% in six months with a focused UX/UI audit.

Blog

Fresh insights. Cutting-edge product design wisdom to fuel your growth.

Featured

Mastering the UX Process

How to Create Effective Pitch Designs That Win Clients

Revolutionizing User Experience

Find the best app designing company to work with in 2025

Looking for the Best UX Research Agency in 2025?

Top 9 FinTech Design Agencies in 2025

Thank you!

We’ve received your request and will get back to you shortly.

Want to speed up the process?

Provide more details or grab a time on our calendar right now.

Fill out project brief Book a Call

Oops! Something went wrong while submitting the form.

Book a call with a team

Moka

Elearning

LMS

EDTECh

web app

Final results

results

Screens

200+

Time

312h+

Team composition

4 experts

Budget range

$5k-$10k

Project overview

overview

Goal

Our goal was to create an AI-powered academic assistant that functions as a comprehensive ecosystem for schools.

We aimed to design an intuitive, low-friction interface for students to receive 24/7 academic support, while simultaneously providing educators and administrators with robust dashboards and actionable insights to enhance learning outcomes.

Challenge

The primary challenge was to design for four distinct user roles, each with radically different needs, on a single platform.

We had to translate complex AI functionality into a friendly, approachable interface for students, while also creating professional and data-rich dashboards for educators.

Ensuring a cohesive, intuitive experience across all interfaces and maintaining a supportive tone were key.

Outcome

The outcome was a successful design of MOKA as a comprehensive and intuitive academic assistant.

We delivered an effortlessly helpful student chat interface and a powerful, data-driven dashboard for educators. This design successfully unifies the needs of all user roles, establishing MOKA as a scalable tool that enhances the modern learning experience.

Scope of work

work

Information
Architecture

Discovery

User Flow

45h

Wireframes

95h

Branding & Logo

UI & Design System

137h

Landing page

Delivery

10h

Development

Adaptives

20h

Animation

Discovery

How we started: Our Discovery phase for MOKA involved a deep dive into the B2B academic domain, meticulously analyzing the distinct needs of students, educators, and administrators.

This foundational research helped us understand the unique challenges of building a comprehensive AI ecosystem that is both a friendly, low-friction tool for students and a powerful, data-driven platform for educators.

No items found.

User flow

We meticulously crafted comprehensive user flows to navigate the multi-role ecosystem of MOKA.

This involved charting distinct journeys for students seeking academic help, educators analyzing performance dashboards, and administrators viewing system-wide insights.

Want a redesign that boosts conversions?

Discover how thoughtful, user-centered design can transform your product experience and drive real business results. Learn what’s possible when design meets strategy.

Learn about redesign

No items found.

Wireframes

Our wireframing process for MOKA was crucial for structuring the platform's complex functionality into a clear, usable layout. We focused on organizing the flow of the student chat assistant and the vast information hierarchy of the educator dashboards.

No items found.

UI prototype

No items found.

Branding & logo

Branding

Logo

Moodboards + 3 styles

Moodboards

To update the visual style, we prepared three moodboards with distinct directions for the client to choose from. Once a mood was selected, we designed 4 variations (styles) of 3 key screens — each with unique details but a shared tone — to bring the style to life in the actual product context.

No items found.

UI & design system stage

UI & design system

At the UI stage, we designed a new UI for MOKA that brings its innovative brand style to life across all user interfaces. The design ensures a seamless and visually coherent experience, from the student’s approachable chat screen to the educator’s dashboard.

No items found.

This was a large design project in which these guys excelled.

Their expertise as a user experience agency was evident throughout, especially in their attention to detail in user testing and creating seamless user flows.

Will definitely be hiring again for future work and would highly recommend!

Riley Thomas

Director of Product

See It in Action: 2 UI Screens Redesigned for Free

Not convinced yet?Get 2 of your screens redesigned for free—and see the difference for yourself.

BOOK A CALL

Landing page

No items found.

Animations

Delivery

The Delivery phase for MOKA culminated in a comprehensive set of high-fidelity Figma mockups for key screens. These detailed mockups, along with our documentation on user flows and the UI style, served as a clear and precise blueprint for the developers.