Online Education Site



ProductLed provides cohort based training and courses for product managers. The course content was organized using a LMS. I had the opportunity to redesign the structure of the course page.

What I did

UX Design, UI Design, Wireframing

The Problem

While looking through the student feedback form, ProductLed realized there were repeated complaints from students about not knowing which course to take next. This impacted the business as student were less engaged which in turn led to drops in course completion rates.

The student dashboard simply listed the courses, however, some courses were live while others were on-demand. There was also no indicators of what courses were required for the current week.

I don't know which course to take next

Defining goals

After gaining clarity on the challenges of the existing course structure, the goals were broken down into 3 major parts:

Improve Content Organization

Increase Completion rates

Easy Navigation

Mapping out the Flow

While keeping the goals in mind, I created a user flow for an ideal scenario. Since this was for a 6 week program, I decided that grouping the courses by week was the way to go. It would make it easier for students to keep track and also know if they were falling behind.


Once I was settled on grouping the courses by week, I brainstormed multiple ideas with quick sketches. This exploration led me to two different layouts.


The layouts for both concepts were converted to wireframes to get a better sense of the experience. These two concepts were presented to the team and a choice had to be made

Option A

The layout utilized the accordion component for exploring courses.

Option B

This layout utilized the side navigation for drilling down into courses

Why option A was chosen

After a presentation of the two concepts, Option A was chosen because of its simplicity. Also, given the time and resource constraints, it was also the most cost effective option. Another reason was the ease of making it responsive for mobile devices compared to option B.

The Progress Tracker

This component was designed to keep students engaged throughout the course. Having a visual representation of their progress would serve as an extra motivator as the bar fills up.

Linking the next course

Another solution to the sequence of courses was to add a link to the next course on the current course page. This saves users the time of going back to the course page to continue learning

Final Designs

After a few iterations and revisions, we finalized the design

Responsive Design

We took into account that students may be on the go or in transit while taking the course so we maintained a consistent experience with the desktop version.


0% Student complaints on course sequence.
ProductLed also saw an increase in course completion rates. This had the potential to generate more course sales as students were more likely to refer others.

More Projects



Ecommerce Website



Lemon Heaven

Franchise Website




Cybersecurity Product



Reshift Media

Agency Website



Got a Project

Let's Chat