A Flexible Design System that Accelerated Development of a CMS
A Flexible Design System that Accelerated Development of a CMS
A Flexible Design System that Accelerated Development of a CMS
A Flexible Design System that Accelerated Development of a CMS
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.
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.
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
Project Outcome
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.
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.
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.
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.
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
Project Timeline
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.
To meet our tight timeline, design and development overlapped
Shown below are the key activities that occurred each month to meet our deadline.
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
Discovery
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
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
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.
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.
An early version of the Community page, shown here in sections, built with the first iteration of components.
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.
An early version of the Community page, shown here in sections, built with the first iteration of components.
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.
An early version of the Community page, shown here in sections, built with the first iteration of components.
Design and Build
Design and Build
Design and Build
We built a limited color palette to streamline decision making
Once the brand guidelines were approved by our client, we built a limited palette that would support our dark mode design direction. The blue range of colors would be applied to surfaces. Base colors would be applied to fonts and iconography. The brand hue and accent colors would be used for interactive elements and decorative delight.
Once the brand guidelines were approved, we built a focused dark mode color palette.
We built a limited color palette to streamline decision making
Once the brand guidelines were approved by our client, we built a limited palette that would support our dark mode design direction. The blue range of colors would be applied to surfaces. Base colors would be applied to fonts and iconography. The brand hue and accent colors would be used for interactive elements and decorative delight.
Once the brand guidelines were approved, we built a focused dark mode color palette.
We built a limited color palette to streamline decision making
Once the brand guidelines were approved by our client, we built a limited palette that would support our dark mode design direction. The blue range of colors would be applied to surfaces. Base colors would be applied to fonts and iconography. The brand hue and accent colors would be used for interactive elements and decorative delight.
Once the brand guidelines were approved, we built a focused dark mode color 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 to a smaller size on mobile.
On the left, the full typography system with headlines and body copy sizes. 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
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 to a smaller size on mobile.
On the left, the full typography system with headlines and body copy sizes. 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
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 to a smaller size on mobile.
On the left, the full typography system with headlines and body copy sizes. 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.
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.
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 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 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
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 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
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 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.
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
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
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.
Lessons Learned
Lessons Learned
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.
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.
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 useful system
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.
Continued maintenance is essential for keeping a useful system
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.
Continued maintenance is essential for keeping a useful system
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
Project Manager
Visual Designer
Copywriter
3 Developers
Duration and date
3 Months
October 2023 - December 2023
My Role
UX Lead
Design Systems
The Team
Project Manager
Visual Designer
Copywriter
3 Developers
Duration and date
3 Months
October 2023 - December 2023
My Role
UX Lead
Design Systems
The Team
Project Manager
Visual Designer
Copywriter
3 Developers
Duration and date
3 Months
October 2023 - December 2023
View more of my work
View more of my work
View more of my work
Let's Connect
I am open to impactful product design opportunities, expanding my network, and mentoring others. Say hello through email or LinkedIn.
catjanky@gmail.com
Let's Connect
I am open to impactful product design opportunities, expanding my network, and mentoring others. Say hello through email or LinkedIn.
catjanky@gmail.com
Let's Connect
I am open to impactful product design opportunities, expanding my network, and mentoring others. Say hello through email or LinkedIn.
catjanky@gmail.com