A Flexible Design System that Accelerated Development of a CMS

Overview

The Problem

Scatted content weakened our client's ability to attract new customers

When Kadena engaged our team, they aimed to strengthen their visual identity and reach new corporate customers. Their content was fragmented across multiple platforms, making it harder to keep potential customers within their ecosystem.

What's at Stake

An engaging, connected web presence was critical to business growth

Our client's outdated brand and website failed to resonate with their community and limited their ability to secure corporate partnerships. Without these relationships, sustaining long-term growth in a competitive market would be difficult.

My Role

I designed a responsive a system that unified content and streamlined development

As sole Product Designer, I led the process of gathering requirements, updating the site map, designing wireframes, and building a scalable design system in Figma that aligned with React. I did this in close collaboration with a cross-functional team.

A Project For

Kadena

A blockchain technology company with a platform that enables businesses to build secure applications. I completed this project while at Geletka Plus, a creative agency based in Chicago, IL.

Project Outcome

In 3 months, we delivered a flexible CMS

At the core of the design system are modular content blocks that support multiple content types while maintaining brand consistency. This gave authors the flexibility to construct new pages in countless configurations without sacrificing a cohesive look and feel.

A video demonstrating the design system in Figma. The CMS admin view works in a similar way, and allows authors to construct pages in any configuration while maintaining design consistency.

Our client gained a central content hub

The new CMS consolidated blogs and videos that had been scattered across separate platforms into one central hub. This made it easier for the team to create new content and kept visitors engaged longer.

Project Timeline

To meet our tight timeline, design and development overlapped

Shown below are the key activities that occurred each month to meet our deadline.

October 2023

Defined Requirements

Low-Fidelity Wireframes

November 2023

Medium-fidelity wireframes

Components built in Figma

Development began

December 2023

Visual Designer refined styling

Updates applied with CSS

January 2024

Launched January 3, 2024

Discovery

We aligned on personas, a content strategy, and a new site map

After an initial research phase to understand our client's goals, we analyzed their current content, identified gaps, and built an updated site map. This acted as the blueprint for building wireframes and the design system.

Our third iteration of the site map that reflected the brand's content ecosystem and future-facing goals.

We aligned on personas, a content strategy, and a new site map

Our third iteration of the site map that reflected the brand's content ecosystem and future-facing goals.

I built wireframes to create alignment across the team

Using the site map and content strategy as a guide, I sketched low-fidelity wireframes and initial design system components. We used these for internal discussions and to secure buy-in from our client.

The lowfi wireframe version of the Community, About, Products, and Blog pages.

I built wireframes to create alignment across the team

The lowfi wireframe version of the Community, About, Products, and Blog pages.

Design and Build

I built a color palette that could easily be updated once design direction was set

At this phase of the project, the brand direction was not yet finished. I devised a simple color palette to build components with. I intentially separated UI elements to ensure the final brand colors could be applied throughout without creating re-work.

A simple color palette, that segmented UI elements, and could be easily updated once we had a final palette.

I built a color palette that could easily be updated once design direction was set

A simple color palette, that segmented UI elements, and could be easily updated once we had a final palette.

A responsive typography palette ensured designs would scale

The visual designer selected two typefaces, one for headlines and one for body copy. With this direction, I built a typography system that covered a variety of content use cases. Headlines were designed to scale from a larger size on desktop and tablet to a smaller size on mobile.

On the left, the headlines sizes used on desktop and tablet. On the right, the mobile sizes for headlines. Building a responsive system ensured designs would look good across viewports.

A responsive typography palette ensured designs would scale

On the left, the headlines sizes used on desktop and tablet. On the right, the mobile sizes for headlines. Building a responsive system ensured designs would look good across viewports.

I finalized the components and development began

To meet our tight timeline, the development team began implementing this non-styled version of the design system.

The desktop wireframes of the Home, Product, Community, and Projects pages built with design system components. The development team began building this non-styled version of the system to keep pace with our tight timeline.

I finalized the components and development began

To meet our tight timeline, the development team began implementing this non-styled version of the design system.

I collaborated with the Visual Designer to apply CSS styling across the system

I worked closely with the Visual Designer to apply his design direction to the Figma components. I then communicated design updates to our development team by writing detailed tickets for our Kanban board. Many of the changes were CSS updates, while others, such as the carousel, were functional updates. Because our development team had a head start, they had room to implement functional changes and still meet our timeline.

A before and after of the Community page. On the left, the page is built with components without styling, on the right, components are updated with the visual designer's design direction.

I collaborated with the Visual Designer to apply CSS styling across the system

A before and after of the Community page. On the left, the page is built with components without styling, on the right, components are updated with the visual designer's design direction.

With CSS updates applied, we launched the site

Collaboration and agility within the team were key to meeting the aggressive three‑month deadline. Much of the work happened in parallel: the Visual Designer was still refining brand guidelines while the development team was building the site. This project demonstrated that it’s possible to deliver on core needs without waiting for every step to be finalized or perfected.

Screenshots of the Homepage, Product Detail, Community, and Projects pages on the day of launch, January 3, 2024.

With CSS updates applied, we launched the site

Screenshots of the Homepage, Product Detail, Community, and Projects pages on the day of launch, January 3, 2024.

Lessons Learned

After launch, the design system continued to deliver value

After I left the project, the client refined its brand identity and the system supported that evolution. When their brand shifted from a dark to light palette, the development team adjusted the core variables, making this update was quick and efficient.

Continued maintenance is essential for keeping a system useful

Without a dedicated design system designer, larger changes have strained the development team and resulted in a disjointed codebase. Had I continued on this project, I would have gathered client feedback, monitored component usage, and made updates that prioritized consistency in design and code.

Contents

My Role

UX Lead

Design Systems

The Team

Agency Director

4 Developers

Project Manager

Visual Designer

Copywriter

Duration and date

3 Months

October 2023 - December 2023

My Role

UX Lead

Design Systems

The Team

Agency Director

4 Developers

Project Manager

Visual Designer

Copywriter

Duration and date

3 Months

October 2023 - December 2023

View more of my work

View all

Building a Design System for an iOS & Android Mobile App

I was tasked with refining i.Liv’s MVP app, and did so by refreshing the visuals and creating a design system for consistency and efficient development.

iOS & Android Mobile App

Design System

An Interactive Dashboard to Surface Sales Insights and Inform Strategy

In collaboration with the UX Researcher and Product Manager, we uncovered user needs through interviews and usability testing to create a new internal tool.

Enterprise Software

Internal Tool

Dashboard and E-Commerce Store for a Web3 Loyalty Rewards Program

Drove a fivefold increase in site traffic and sales by designing front-end touch points for a new rewards program in close collaboration with the Head of Product and development team.

UI Design

Responsive Design