Learning platform by Cloudinary

MediaJAMS platform preview – developer learning hub with author directory, searchable tutorials, topic filters, and featured coding guides in a clean dashboard layout.
Project overview

Cloudinary Builds MediaJams, A Rich Media dev learning platform featuring articles with accompanying code sandboxes, allowing developers to practice as they read.

The platform allows users to do some notes during reading, bookmark, and follow authors with handy navigation that is available from any page.

Tasks
  • Redesign the MVP version of the web app
  • Instead of two websites – a landing page and the actual app, merge them into one platform that has limited features until users sign up
  • Make the look and feel of the app closer to a dashboard than a regular blog website
  • Create get a started section that explains what users can do with the app
  • Improve the main navigation and search user experience
  • Create a design for new features such as create a note while reading, post overview, collapsable navigation, featured content, and so on
  • Adapt the design for large FHD monitors, tablets, and mobile
Tools
Figma
Figma
Adobe Illustrator
Adobe Illustrator
Solutions
Outcome

Fully responsive dev learning platform design with the ability to do some notes during reading, bookmark, follow authors, quickly navigate from any page. Design system and clear guidelines for further development including detailed typography and spacing.

Oct 14, 2026

Solutions

Main navigation

One of the most important solutions was to make the main navigation handy and useful, so we showed the significant features as main menu items and put all secondary under a separate menu. Also, the navigation is collapsable, so users can focus on reading.

Main navigation

One of the most important solutions was to make the main navigation handy and useful, so we showed the significant features as main menu items and put all secondary under a separate menu. Also, the navigation is collapsable, so users can focus on reading.

Main navigation

One of the most important solutions was to make the main navigation handy and useful, so we showed the significant features as main menu items and put all secondary under a separate menu. Also, the navigation is collapsable, so users can focus on reading.

Main navigation

One of the most important solutions was to make the main navigation handy and useful, so we showed the significant features as main menu items and put all secondary under a separate menu. Also, the navigation is collapsable, so users can focus on reading.

Main navigation

One of the most important solutions was to make the main navigation handy and useful, so we showed the significant features as main menu items and put all secondary under a separate menu. Also, the navigation is collapsable, so users can focus on reading.

Main navigation

One of the most important solutions was to make the main navigation handy and useful, so we showed the significant features as main menu items and put all secondary under a separate menu. Also, the navigation is collapsable, so users can focus on reading.

Next

Platform design

The main page was designed with the feed that users can search & filter as well as explore the featured content. The post template was improved with a post overview, new note feature, clear typography, and spacing. Also, we designed all the other pages like login & sign-up, user profile, submit feedback, and so on.

Platform design

The main page was designed with the feed that users can search & filter as well as explore the featured content. The post template was improved with a post overview, new note feature, clear typography, and spacing. Also, we designed all the other pages like login & sign-up, user profile, submit feedback, and so on.

Platform design

The main page was designed with the feed that users can search & filter as well as explore the featured content. The post template was improved with a post overview, new note feature, clear typography, and spacing. Also, we designed all the other pages like login & sign-up, user profile, submit feedback, and so on.

Platform design

The main page was designed with the feed that users can search & filter as well as explore the featured content. The post template was improved with a post overview, new note feature, clear typography, and spacing. Also, we designed all the other pages like login & sign-up, user profile, submit feedback, and so on.

Platform design

The main page was designed with the feed that users can search & filter as well as explore the featured content. The post template was improved with a post overview, new note feature, clear typography, and spacing. Also, we designed all the other pages like login & sign-up, user profile, submit feedback, and so on.

Platform design

The main page was designed with the feed that users can search & filter as well as explore the featured content. The post template was improved with a post overview, new note feature, clear typography, and spacing. Also, we designed all the other pages like login & sign-up, user profile, submit feedback, and so on.

Next

Responsive

The entire website including the main navigation was fully adopted to tablet and mobile devices to make the platform user experience cross-devices.

Responsive

The entire website including the main navigation was fully adopted to tablet and mobile devices to make the platform user experience cross-devices.

Responsive

The entire website including the main navigation was fully adopted to tablet and mobile devices to make the platform user experience cross-devices.

Responsive

The entire website including the main navigation was fully adopted to tablet and mobile devices to make the platform user experience cross-devices.

Responsive

The entire website including the main navigation was fully adopted to tablet and mobile devices to make the platform user experience cross-devices.

Responsive

The entire website including the main navigation was fully adopted to tablet and mobile devices to make the platform user experience cross-devices.

Next

Design system

All the elements with their states, modules, templates, and responsive were gathered in one place with clear guidelines to make the handoff to devs smoother.

Design system

All the elements with their states, modules, templates, and responsive were gathered in one place with clear guidelines to make the handoff to devs smoother.

Design system

All the elements with their states, modules, templates, and responsive were gathered in one place with clear guidelines to make the handoff to devs smoother.

Design system

All the elements with their states, modules, templates, and responsive were gathered in one place with clear guidelines to make the handoff to devs smoother.

Design system

All the elements with their states, modules, templates, and responsive were gathered in one place with clear guidelines to make the handoff to devs smoother.

Design system

All the elements with their states, modules, templates, and responsive were gathered in one place with clear guidelines to make the handoff to devs smoother.

Next

Before & After

Before & After

Before & After

Before & After

Before & After

Before & After

Next
No items found.

Outcome

Fully responsive dev learning platform design with the ability to do some notes during reading, bookmark, follow authors, quickly navigate from any page. Design system and clear guidelines for further development including detailed typography and spacing.

More works

Let’s discuss your goals, challenges, and how WebFolks can help you move forward.

200+
Projects shipped
70+
Clients supported
Startups & Enterprises
Trusted by growing teams
Webflow Certified Partner

Stand with Ukraine

We support the Ukrainian army that is defending our country. Friends and everyone willing to stand against russian terrorism – stand with Ukraine!

Learn more
Glory to Ukraine badge
Hide