KodeCamp Learning Management System

Industry

Edtech

Role

Lead UI/UX Intern

UX Strategy

UX Design

UI Design

Design System

Date

September - December, 2022

Duration

4 months

Tools

Figma / FigJam / Maze / Trello

Problem

KodeCamp is an educational institution and tech bootcamp. The challenge was to create a user-friendly platform to handle:

  • all their course management
  • lecture delivery
  • task creation, submission & grading
  • student shenanigans

Results

USERBASE

1000+

ACTIVE USERS

POST-LAUNCH BUG REPORTS

36%

REDUCTION WITHIN 1ST MONTH

OverviewIterationsDesignImpact
THE BIG IDEA

Learning made easy

Our mission was to craft a user-centric, easy to navigate, and highly functional Learning Management System that would not only meet expectations, but shatter them. And this is how we did it.

PROCESS

Breaking things down

Being the lead UI/UX intern, I divided the team to meet tight deadlines: one group focused on research and UX documentation, laying the groundwork for a seamless user experience, while the other developed a style guide that would serve as the backbone of our UI.

As the gears turned and ideas flowed, we synchronized our efforts like a well-oiled machine, ensuring every detail was in perfect harmony.

The UI will have its time to shine, but for now, let's focus on the UX.

EMPATHIZING

Designing for users

While the business objectives were as clear as crystals, our journey into the depths of user needs was not the same. Employing other KodeCamp students and mentors as our target audience, we conducted user interviews and surveys and we were able to scope out what got users excited, and what had them screaming at their phones. 

Armed with our newfound knowledge, we crafted personas for trainers, admins, and students. These personas guided our design decisions, ensuring we addressed the needs of each user group. We knew our users better than they knew themselves. And most importantly, we designed for them.

No items found.
IDEATING

Navigating our way

Here, the whole design team (and some devs) gathered to brainstorm ideas. Collaboratively, we refined our ideas, focusing on user and business needs - easy navigation. We wanted users to navigate our app with the same ease as scrolling through Instagram reels.

Recognizing the importance of translating these ideas into a tangible structure, we turned to FigJam, where we created information architecture and user flows to visualize the app's blueprint. But before we got too carried away, we ran it by the stakeholders to make sure we weren't building castles in the sky.

ITERATIONS

From doodles to noodles

We didn't just stop at the first draft, but honed and polished our creation. Each design iteration brought us closer to perfection, but not without its hurdles.

From the initial sketches that looked like they were drawn by a 5-year old to the high fidelity prototypes that made our Figma board look like a bowl of noodles, we meticulously honed the layout, navigation, and visual elements until they got widespread stakeholder approval.

Yet, with each iteration, we dusted ourselves off and learned from our mistakes. It was a process of trial and error, and more coffee than any human should consume in a lifetime. But in the end, the results spoke for themselves.

INSIGHT

Learn at your pace, all in one place

Our main goal with the LMS was to make learning a breeze. Users hop into live classes or catch up on past sessions via recordings, all within the LMS. No more hassle with third-party video conference tools!

INSIGHT

Cooking up tasks speedily 

Mentors wanted to dish out tasks quickly and efficiently. So, we made it happen. With the click of a few buttons, mentors can now create tasks at lightning speed, leaving no room for delay. As per the client's request, we also added a nifty feature: tasks remain invisible to students until the creator "posts" them. Think of it as a handy on/off switch for task visibility, giving mentors full control over when students see what's coming next.

The big reveal

So, here’s the scoop: Initially, the big bosses just wanted students to peek at tasks and submit them on the LMS. But guess what? We dug deep and found out something juicy. Students weren’t just satisfied with ticking off tasks; they wanted to see their scores right there on the LMS, pronto! We’ve got their backs, so we made it happen. Now, students can instantly check their scores on the LMS, giving them the feedback they crave.

INSIGHT

Effortless grading 

And finally, the moment of truth: grading. Mentors didn’t have time to play detective with piles of submissions. Nope, they needed a quicker solution. So, we went to town and cooked up a handy feature: the ability for mentors to grade a bunch of students at once, slashing the time it takes for each student to get their grades. And voila! No more virtual showdowns between mentors and students. Peace reigned in the bootcamp.

Enhancing collaboration

As if that wasn't enough, during the course of the bootcamp, it dawned on us that to speed things up, we needed more mentors on board. At first, the LMS was set up in a way that only the task creator could grade, leaving other mentors limited to task viewing. We recognized the need for a change. We introduced a feature allowing trainers to bring in other trainers (as collaborators) to help with grading, whether it's when they're making the task or later on. Teamwork made the dream work!

FINAL DESIGN

Dinner is served

Following agile methodologies, we hustled to send out screens for development in record time. This helped us complete the design phase 9 days ahead of schedule.

But let's be real, even in our final design, there were imperfections that haunted our nights like that embarrassing thing you said in high school. But we didn't let that stop us. We polished, we tweaked, we fine-tuned until our design was as spicy as jollof rice at a Nigerian wedding. Bon appétit!

No items found.
No items found.
RESULT

From zero to hero

The KodeCamp LMS officially launched in June 2023, with a user experience so smooth, even your grandma could navigate it without breaking a sweat. Efficiency skyrocketed, engagement hit levels previously thought impossible, and the client? Well, let's just say they were happier than a cat in a room full of laser pointers.

USERBASE

1000+

ACTIVE USERS

POST-LAUNCH BUG REPORTS

36%

REDUCTION WITHIN 1ST MONTH

COMPLETED

9

DAYS AHEAD OF DEADLINE

REFLECT

Lessons learnt

During my UI/UX design internship at KodeCamp, I not only refined my design skills but also learned valuable lessons.

  1. Iterative Design for Users and Clients: One of my key takeaways was the significance of iterative design. By constantly tweaking our work based on what users and clients had to say, we didn’t just hit the mark on user needs—we built stronger client bonds through open chats and collaborative efforts.
  2. Effective Delegation and Agile Delivery: As the lead design intern, I learned the importance of effective delegation. Trusting my team and empowering them to take ownership of tasks allowed us to tackle them more efficiently and swiftly. 
    The importance of Agile delivery became crystal clear as we embraced this approach, allowing us to adapt quickly to changing requirements and deliver high-quality results in time.

In conclusion, my internship project taught me that leadership is about empowering others and driving success through collaboration and adaptability.

Thank You