Re-inventing Clickon Studio’s brand and website

Clickon Studios

text underlined

Heading

The site focuses
video content and
technology
Heading

Redesigning the look and feel of a company with interconnecting sub-brands can be tricky. Stakeholders can be protective over their piece of the  pie and, many chefs can sometimes change the direction of a project. By focusing on the core brand and how the Clickon collective family would connect and look like helped to build trust and direction for their core website design.

Designing the website to show off the capabilities of both creativity and videography technology works hand-in-hand with simple motion and footage autoplays.

What’s a Rich Text element?

This is a subheading and where it goes in the document flow

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is an h2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Clickon IQ

A platform designed for production workflow

The challenge

Turning a complex, all-in-one production workflow platform into something intuitive, approachable, and easy to use—without losing its depth.

Clickon IQ brings scheduling, asset management, and project coordination into a single, streamlined product. The challenge was to simplify a vast range of features into a clear, user-friendly experience while maintaining a professional yet inviting tone.

I was responsible for crafting a brand identity that reflected the platform’s efficiency and approachability, as well as designing the marketing website and the platform’s UX/UI.

Branding

Website

Platform

UX/UI

Creating a Friendly & Functional Identity

The Clickon IQ brand needed to feel approachable yet professional—more inviting than its corporate parent brand.

Layered gradients and overlapping elements added depth, making the brand more dynamic and engaging.

Triangles, inspired by the play button, became a core visual motif, reinforcing the product’s video production roots.

The Website

Clean, Simple & Product-Focused

The website needed to highlight the product’s capabilities without overwhelming users. With so many features, I opted for abstract elements to represent different functions—creating a simplified, modern aesthetic while keeping the tone friendly.

Soft edges and floating components—buttons, icons, and UI tags—helped maintain a light, approachable look.

Building the Clickon IQ Platform

Component library

A fully developed Figma component library ensured design consistency across the platform.

A Comprehensive UX/UI System

Designing Clickon IQ meant tackling multiple complex user journeys, each addressing key challenges in project management and production workflows.

Every screen, dashboard, and interaction was carefully designed to balance functionality, clarity, and ease of use—turning a massive production tool into an intuitive experience.

Next case