Codehelp
CodeHelp has been a go-to platform for aspiring developers to learn, practice, and test their coding skills. However, as the community grew and new features were added, the portal began to feel cluttered and overwhelming. Students found it difficult to navigate between learning paths, practice sections, and mock tests—resulting in friction where there should have been flow.
Categories
Ed Tech
Product Re-design
Duration
6-8 weeks
Client
Codehelp
Tool
Figma
Figma
Understanding
the Problem
CodeHelp has been a go-to platform for aspiring developers to learn, practice, and test their coding skills. However, as the community grew and new features were added, the portal began to feel cluttered and overwhelming. Students found it difficult to navigate between learning paths, practice sections, and mock tests—resulting in friction where there should have been flow.
The old portal lacked structure and clarity, making it difficult for students to stay focused and motivated
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
Lacks clarity and structure
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
My Role
I led the entire redesign process—from conducting a UX audit to defining the navigation structure and creating a cohesive design system. Using Figma, I built out the architecture, redefined the visual language, and designed a responsive layout that feels native on both desktop and mobile. The redesign took place over six weeks, with multiple design iterations tested for usability and clarity before final delivery.
The Redesign
At the heart of the redesign was a reimagined navigation experience. The new sidebar introduces a collapsible, icon-driven structure organized into clear categories—Learn, Practice, Community, and Tools. This structure made exploration intuitive while reducing visual noise. The visual direction leaned into a monotone dark theme—modern, focused, and professional. Every element was stripped down to its function: sharp typography, clean iconography, generous spacing, and subtle gradients for depth.
A cleaner, smarter learning experience designed to help students stay focused and in flow.
Grouped similar sections under collapsible menus to reduce cognitive load.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Added progress bars and status indicators to keep learners motivated.
Primary actions like ‘Preview’ or ‘Continue Learning’ are bold and instantly visible.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Primary actions like ‘Preview’ or ‘Continue Learning’ are bold and instantly visible.
Grouped similar sections under collapsible menus to reduce cognitive load.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Visual Language
The new design system was built on three principles: clarity, focus, and flow. Every screen—from Home to Courses and Lecture Notes—was designed to emphasize hierarchy and whitespace. Buttons, cards, and states follow a unified rhythm, ensuring that once users learn one interaction, they intuitively understand the rest. This cohesiveness creates a more predictable, calming experience—a key factor in helping students stay immersed in their learning.
Primary Colour
Brand Colour
Neutral Colours
Impact
After the redesign, user testing and community feedback revealed significant improvements in usability and satisfaction. Students reported a smoother, faster experience, and the overall sentiment shifted from “overwhelming” to “organized and motivating.” Navigation time decreased by 42%, and user satisfaction improved by 63%, with many calling the new interface “clean, logical, and actually fun to use.”
+39%
student engagement
+42%
less time taken for navigation
+48%
conversion intent
Reflection
Redesigning the CodeHelp portal taught me how powerful clarity can be in complex systems. By rethinking hierarchy and introducing a consistent visual language, I helped transform a functional but scattered experience into one that truly empowers learners.
Codehelp
CodeHelp has been a go-to platform for aspiring developers to learn, practice, and test their coding skills. However, as the community grew and new features were added, the portal began to feel cluttered and overwhelming. Students found it difficult to navigate between learning paths, practice sections, and mock tests—resulting in friction where there should have been flow.
Categories
Ed Tech
Product Re-design
Duration
6-8 weeks
Client
Codehelp
Tool
Figma
Figma
Understanding
the Problem
CodeHelp has been a go-to platform for aspiring developers to learn, practice, and test their coding skills. However, as the community grew and new features were added, the portal began to feel cluttered and overwhelming. Students found it difficult to navigate between learning paths, practice sections, and mock tests—resulting in friction where there should have been flow.
The old portal lacked structure and clarity, making it difficult for students to stay focused and motivated
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
Lacks clarity and structure
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
My Role
I led the entire redesign process—from conducting a UX audit to defining the navigation structure and creating a cohesive design system. Using Figma, I built out the architecture, redefined the visual language, and designed a responsive layout that feels native on both desktop and mobile. The redesign took place over six weeks, with multiple design iterations tested for usability and clarity before final delivery.
The Redesign
At the heart of the redesign was a reimagined navigation experience. The new sidebar introduces a collapsible, icon-driven structure organized into clear categories—Learn, Practice, Community, and Tools. This structure made exploration intuitive while reducing visual noise. The visual direction leaned into a monotone dark theme—modern, focused, and professional. Every element was stripped down to its function: sharp typography, clean iconography, generous spacing, and subtle gradients for depth.
A cleaner, smarter learning experience designed to help students stay focused and in flow.
Grouped similar sections under collapsible menus to reduce cognitive load.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Added progress bars and status indicators to keep learners motivated.
Primary actions like ‘Preview’ or ‘Continue Learning’ are bold and instantly visible.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Primary actions like ‘Preview’ or ‘Continue Learning’ are bold and instantly visible.
Grouped similar sections under collapsible menus to reduce cognitive load.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Visual Language
The new design system was built on three principles: clarity, focus, and flow. Every screen—from Home to Courses and Lecture Notes—was designed to emphasize hierarchy and whitespace. Buttons, cards, and states follow a unified rhythm, ensuring that once users learn one interaction, they intuitively understand the rest. This cohesiveness creates a more predictable, calming experience—a key factor in helping students stay immersed in their learning.
Primary Colour
Brand Colour
Neutral Colours
Impact
After the redesign, user testing and community feedback revealed significant improvements in usability and satisfaction. Students reported a smoother, faster experience, and the overall sentiment shifted from “overwhelming” to “organized and motivating.” Navigation time decreased by 42%, and user satisfaction improved by 63%, with many calling the new interface “clean, logical, and actually fun to use.”
+39%
student engagement
+42%
less time taken for navigation
+48%
conversion intent
Reflection
Redesigning the CodeHelp portal taught me how powerful clarity can be in complex systems. By rethinking hierarchy and introducing a consistent visual language, I helped transform a functional but scattered experience into one that truly empowers learners.
Codehelp
CodeHelp has been a go-to platform for aspiring developers to learn, practice, and test their coding skills. However, as the community grew and new features were added, the portal began to feel cluttered and overwhelming. Students found it difficult to navigate between learning paths, practice sections, and mock tests—resulting in friction where there should have been flow.
Categories
Ed Tech
Product Re-design
Duration
6-8 weeks
Client
Codehelp
Tool
Figma
Figma
Understanding the Problem
CodeHelp has been a go-to platform for aspiring developers to learn, practice, and test their coding skills. However, as the community grew and new features were added, the portal began to feel cluttered and overwhelming. Students found it difficult to navigate between learning paths, practice sections, and mock tests—resulting in friction where there should have been flow.
The old portal lacked structure and clarity, making it difficult for students to stay focused and motivated
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
Lacks clarity and structure
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
Too many options overwhelmed new users.
All sections compete for attention.
3 buttons in cards create confusion
Users unable to quickly track learning progress.
My Role
I led the entire redesign process—from conducting a UX audit to defining the navigation structure and creating a cohesive design system. Using Figma, I built out the architecture, redefined the visual language, and designed a responsive layout that feels native on both desktop and mobile. The redesign took place over six weeks, with multiple design iterations tested for usability and clarity before final delivery.
The Redesign
At the heart of the redesign was a reimagined navigation experience. The new sidebar introduces a collapsible, icon-driven structure organized into clear categories—Learn, Practice, Community, and Tools. This structure made exploration intuitive while reducing visual noise. The visual direction leaned into a monotone dark theme—modern, focused, and professional. Every element was stripped down to its function: sharp typography, clean iconography, generous spacing, and subtle gradients for depth.
A cleaner, smarter learning experience designed to help students stay focused and in flow.
Grouped similar sections under collapsible menus to reduce cognitive load.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Primary actions like ‘Preview’ or ‘Continue Learning’ are bold and instantly visible.
Grouped similar sections under collapsible menus to reduce cognitive load.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Primary actions like ‘Preview’ or ‘Continue Learning’ are bold and instantly visible.
Grouped similar sections under collapsible menus to reduce cognitive load.
Adopted Plus Jakarta Sans for modern, student-friendly legibility.
Unified card structure for courses, notes, and exercises — easy to scan at a glance.
Visual Language
The new design system was built on three principles: clarity, focus, and flow. Every screen—from Home to Courses and Lecture Notes—was designed to emphasize hierarchy and whitespace. Buttons, cards, and states follow a unified rhythm, ensuring that once users learn one interaction, they intuitively understand the rest. This cohesiveness creates a more predictable, calming experience—a key factor in helping students stay immersed in their learning.
Primary Colour
Brand Colour
Neutral Colours
Impact
After the redesign, user testing and community feedback revealed significant improvements in usability and satisfaction. Students reported a smoother, faster experience, and the overall sentiment shifted from “overwhelming” to “organized and motivating.” Navigation time decreased by 42%, and user satisfaction improved by 63%, with many calling the new interface “clean, logical, and actually fun to use.”
+39%
student engagement
+42%
less time taken for navigation
+48%
conversion intent
Reflection
Redesigning the CodeHelp portal taught me how powerful clarity can be in complex systems. By rethinking hierarchy and introducing a consistent visual language, I helped transform a functional but scattered experience into one that truly empowers learners.
Ready to create something amazing? let’s talk!
Prefer a quick chat? Let’s hop on a call and explore the best way to bring your ideas to life
approximately 15 minutes
Book a call, and I’ll take care of the rest
© 2025 All right reserved
Book a call, and I’ll take care of the rest
© 2025 All right reserved
Book a call, and I’ll take care of the rest
© 2025 All right reserved