Akto Academy

Overview & context

You know how APIs have completely changed the way we build software? Well, they've also created a whole new security puzzle - even for the experts. While plenty of security engineers know web security like the back of their hand, API security throws them some curveballs.

That's exactly why we built Akto Academy. But rather than create another boring security course (🥱), I decided to make it different. Here's how I added some fun to API security and solved some tricky design challenges with a bit of creative thinking...

Research & Discovery

Many security training pages feels like boring, sure some of them have good design as well like Wiz or Hackthebox but nothing out of box to make you feel something different and having a different experience for learning - they do serve the purpose but there's more can be done to it.

Taking inspiration from popular culture, I designed the courses with a twist - each module features characters from 'The Office', bringing a familiar, light-hearted touch to serious security concepts.

Techincal Challenge

Building a dynamic course navigation with a highlighted current topic initially seemed impossible in Framer. The platform didn't offer a straightforward way to show which topic a user was currently viewing within a course. Implementing it in Framer required some creative thinking.

The solution

Using three identical CMS collections, each filtered differently. The key was assigning a "count" number to each topic in our CMS (like assigning '5' to "Learn Pentesting") - think of it as giving each topic a position number in the course sequence.

Then we created our navigation using three layers:

1. Before Current Topic: First CMS displays topics with count less than current topic

2. Current Topic (highlighted in purple): Second CMS shows only the selected topic

3. After Current Topic: Third CMS shows topics with count greater than current topic

Like assembling a sandwich, we stack these three CMS collections one after another. The count field acts like a sorting system, telling Framer exactly where each topic should appear in relation to the currently selected one.

This approach turned what seemed impossible into a smooth, intuitive navigation experience. The current topic stands out clearly while maintaining the full course structure.

Other things I tinkered and added for more better experience was Table Of Contents & Scroll Progress Bar

Deliverables

From The Office references to smooth navigation tricks, check it out.