Back to Projects
UI/UX Brand Design

Bongacode - Website Design

Educational Platform | Online Learning Marketplace

My Role
Visual Design
Timeline
1 Month
Platform
Website (Desktop + Tab + Mobile)
Tools Used
Figma | Illustrator | Chatgpt
Year
2025
Knowmax project cover

Project Overview

What is Bongacode?

Bongacode Bonga Developer is an online learning platform created for aspiring developers, software engineers, and IT professionals seeking practical technology education. The platform combines tutorials, premium eBooks, video courses, community engagement, and career-focused learning resources into a single ecosystem.

The goal was to create a modern educational brand that feels approachable for beginners while maintaining credibility for experienced developers.

 

The Problem
Support agents struggled to find answers quickly. The existing UI had 6+ navigation levels, inconsistent components, and no clear visual hierarchy — causing frustration and slow resolution times.
The Goal
Redesign the core knowledge search and article experience to reduce cognitive load, improve answer findability, and create a scalable design system for the product team.
My Responsibilities
User research, competitive analysis, information architecture, wireframing, UI design, design system creation, prototyping, and developer handoff.
Team
1 Design Lead (me), 2 Product Managers, 5 Engineers, 1 UX Researcher, 1 Content Strategist.

Challenge & Solution

The core problem

The Challenge

Presenting tutorials, courses, ebooks, and community features on one homepage without overwhelming users while maintaining clear navigation and strong conversion opportunities.

The Solution

Organized content into structured sections, used card-based layouts, clear visual hierarchy, and prominent CTAs to create an intuitive learning journey and improve engagement.


Research

Understanding the users

Before starting the design process, I analyzed leading platforms such as Udemy and Coursera to identify industry best practices in content organization, course discovery, and user engagement. Research shows that users typically decide whether to stay on a website within a few seconds and prefer clear navigation, structured learning paths, and visible social proof. These insights helped shape a user-centered experience focused on easy content discovery, credibility, and seamless access to tutorials, courses, and premium learning resources.

User interviews

Competitor Benchmark Analysis

User interviews

User Goals & Pain Points

User interviews

Learning Behavior Insights


Design Process

How I approached it

1
Discover
Analyzed competitors, user behaviors, content gaps, and learning preferences through research.
2
Define
Defined target audience, pain points, user goals, and content structure.
3
Design
Created wireframes, visual designs, interactive prototypes, and scalable design systems.
4
Deliver
Conducted usability reviews, responsive optimization, developer handoff, and validation.

Wireframes

From chaos to clarity

I started with low-fidelity wireframes to explore layout structure, navigation flow, and content placement. This helped validate ideas early, refine user journeys, and ensure a clear foundation before moving into visual design.

Wireframe exploration

Desktop wireframe layout design

Wireframe exploration

Mobile wireframe simplified structure


Final Designs

The final design introduced a structured learning interface with improved navigation across tutorials, courses, ebooks, and community sections, along with a refined content hierarchy and clearer call-to-action placement for better discovery and engagement.

Dashboard design
Mobile view
Component library

"Yogesh completely changed how we think about knowledge surfaces. The new learning experience is easy to use and has reduced the time we spend finding resources by approx 40%."

Raj Kumar, Founder of Bongacode

Design System

Built to scale

One of the most valuable deliverables from this project was a full design system built in Figma — 120+ components, 8 typography styles, a token-based colour system, and documented interaction patterns. This became the foundation for all new feature development across Knowmax.

Colour tokens

Colour tokens & typography system

Colour tokens

Colour tokens & typography system

Colour tokens

Colour tokens & typography system


Results & Impact

The numbers speak

40%
Reduction in resource search time
3x
Clearer learning structure
50+
Reduced navigation complexity
2x
Improved content accessibility

Key Learnings

What I took away

Get In Touch

Let's create
something great.

Have a project in mind or just want to say hello? I'm open to freelance opportunities, collaborations, and full-time roles. Let's talk design.

    ✓ Message sent! Yogesh will get back to you soon.