*

01  Case Study

Odidact

Connecting learners with experts through real-time assistance.

A platform where learners meet experts for live sessions, coaching, and a way to earn from their skills. I designed and built the whole web side of it, from how people find experts to how they build trust and run sessions in real time.

UI/UX Design Frontend Development AI Integration
Built with Angular Spring Boot Tailwind Figma Illustrator
Odidact landing page in the browser
Odidact assistance feed on mobile

02  Context & Challenge

Finding the right expert should feel simple.

Right now, learners have a hard time finding the right expert, trusting them enough to book, and keeping the conversation in one place. Odidact takes those problems off the table so learning is easy from the first step.

Discovery friction

Finding the right expert takes too much time across multiple platforms.

Low trust before booking

There's not much to go on, so it's hard to judge expertise or credibility before you commit.

Fragmented communication

Conversations get scattered, and without any structure people get confused and drop off.

Odidact expert matching flow with learner cards connecting to a verified expert profile

03  User Journey

An easy path from first search to long-term learning.

Odidact keeps every step simple, so learners can focus on the part that counts: growing with the right expert.

Result

Easier discovery, more trust, smoother communication, and people who come back to learn again.

1

Discover

Explore experts by skill, category, reviews, and fit.

2

Compare

Compare profiles, reviews, experience, and sessions.

3

Choose

Pick the expert and session that match your goals.

4

Connect

Start sessions with built-in chat, video, and payments.

5

Return

Track progress, leave reviews, and rebook anytime.

Search a topic or skill…
Popular categories
AIMarketingBusiness DesignCareerFitness LanguageLeadershipWellness
1,240+ experts ready Browse all →
Compare experts
Maria Fernandes
Product Designer
4.9 (124) · 128 sessions · $40
Daniel Kim
Marketing Expert
4.8 (98) · 96 sessions · $35
Best fit for your goals: Maria · 95% match
Serena Unaly
Leadership Coach
60 mins Video
Tue, May 20 · 11:00 AM$40
Focus — building confidence & public speaking
Booking confirmed
Secure & encrypted
Your progress
7 of 10 sessions completed
Next milestoneGoal review
Leave a review ★ ★ ★ ★ ★
Rebook session

04  Solution System

The product system behind the journey.

Odidact is built around four connected systems that help people find experts, trust them, talk to them, and come back.

01

Discovery

  • Search & topic discovery
  • Category filters
  • Expert previews
Search a coach or skill…
AIMarketingDesignCareer
Maria Fernandes
Product Designer
4.8
Daniel Kim
Marketing Expert
4.9
View all experts
02

Trust

  • Ratings & reviews
  • Verified profiles
  • Credibility signals
Serena Unaly
Public Speaking Coach
Verified
128Sessions
2K+Learners
98%Satisfaction
Serena helped me build confidence and improve my public speaking.
— Post-session review
03

Communication

  • Call, video & chat
  • Flexible formats
  • Easy scheduling
Call Video Chat Session
10:00 AM11:00 AM02:00 PM04:00 PM
Book session
04

Monetization

  • Referral rewards
  • Cashback incentives
  • Transparent earnings
REFERRAL BENEFIT
10%Referral reward
$240Expert balance
Invite a friendEarn rewards
Video session$10

Four connected systems turn discovery into trusted learning people come back to.

Odidact dashboard screen
01 Dashboard & Community Feed
Odidact landing screen
02 Find a Coach
Odidact HD communication screen
03 HD Communication
Odidact footer and newsletter screen
05 Footer

06  Design System

Reusable foundations for a product platform.

Color, type, spacing, radius, and shadows: the building blocks behind every Odidact screen.

Color Tokens

The working palette used across the product.

Brand
Primary#0D12F8
Action#3313FF
Soft#E0EAFF
Text
Strong#0F1336
Muted#5A628C
Subtle#A6B0D1
Surface & Border
Base#FFFFFF
Alt#F7F8FF
Border#E2E6F2
Accents
Pink#FF2F81
Green#25D06D
Orange#FF7A34

Typography Scale

The type hierarchy from hero to caption.

Display / Hero
Roboto Black · 52–64
Grow your network
Heading / Section
Roboto Bold · 22–28
Create control
Heading / Card
Roboto Bold · 16–20
Upcoming Events
Body / Large
Roboto Regular · 16–20
Connect, learn, and share.
Body / Default
Roboto Regular · 14–16
For driven users and experts.
Label / Default
Roboto Medium · 12–13
Home, Messages, Calendar
Meta / Small
Roboto Regular · 11–12
07/01/2025 19:49
Caption / Tiny
Roboto Medium · 10–12
12.5K points

Layout Tokens

Spacing, radius, grid, and elevation.

Spacing
4px
8px
12px
16px
24px
32px
48px
64px
Radius
4px
8px
12px
16px
Pill
Grid
12 columns · 24px gutter · 1200px max
Shadows
Soft
Panel
Stage
Action
ODIDACT 2024

07  Impact

The redesign made things clearer, cut the friction, and got users earning sooner.

+35%
BOOKING RATE
-28%
DROP-OFF RATE
+42%
USER RETENTION

Takeaway

On a product like this, structure and guidance matter more than anything else. The less effort you ask of people, the more they engage, the more they trust it, and the more they stick around.

Next Project Fitness