Innoloft

Reusable UI Design System & CMS Component Kit for product and marketing touchpoints.

Tasks

Product / Visual Design

Design System

Timeline

Apr 2024 - Jun 2024

Context

Innoloft is a B2B SaaS startup building an innovation platform. As a fast-growing company, design resources were limited, and marketing often had to move quickly without a strong design foundation.


Innoloft’s public pages had grown organically. The public website was managed partly through Strapi CMS and partly through developer-maintained code. This created friction: the marketing team lacked autonomy, the IT team was overloaded, and the brand identity was inconsistently applied.


Constraints:

  • Small startup → limited time and resources, no capacity for deep discovery research.

  • Existing brand → needed modernization and consistency, not a full rebrand.

  • Marketing needs → non-technical users needed easy, flexible ways to compose pages.

Challenges

No unified design system

Forgettable & empty branding

Forgettable & empty branding

High dependency
on IT

Outdated & innefective website

Outdated & innefective website

Slow marketing workflows

My Role

As the Product & Visual designer, I collaborated with marketing and IT to:


  • Clean up and modernize the existing branding.

  • Build a lightweight design system for consistency and speed.

  • Expand Strapi’s functionality with a CMS kit of reusable sections, giving marketing more control.

Part 1: Design System (Figma)

Name

Goals

Create a lean design system to clean up and modernize Innoloft’s brand identity, while giving marketing and product teams a consistent set of components for digital assets and web pages.

What I did

Modernized the existing branding (colors, typography, spacing) without redoing the entire identity.


  • Created a component library (buttons, cards, chips, content sections, icons).

  • Standardized design tokens (spacing, shadows, font scales).

  • Documented usage rules to ensure consistency across teams.

Name
Name
Name

Outcome

Marketing gained a faster way to create assets without reinventing layouts each time.


  • Developers had a single source of truth for UI patterns.

  • The overall brand felt more cohesive, improving external perceptio

Name

Part 2: CMS Component Kit (Strapi)

Name

Goals

Reduce friction between IT and marketing by building dynamic, reusable CMS sections in Strapi, empowering marketing to create and edit pages independently.

Process &
Decisions

1- Audit → Reviewed all existing CMS sections to identify which were outdated, inconsistent, or inflexible.


2- Prioritization → Worked with marketing to understand which layouts they used most often and where they lacked flexibility.

Name
Name

To document changes and requirements, I created a table of existing CMS sections with notes on updates and editable fields. IT used this as a reference to navigate alterations and ensure everything was controllable in the CMS.

Process & Decisions

3- Redesign → Updated 13 existing CMS sections to match the design system styles.


4- Expansion → Created 6 brand-new sections, including:

  • Hero cection with AI Prompt field

  • Interactive multi-tabs section

  • Cards section

  • Features card section


5- Flexibility first → Designed each section to be responsive, modular, and reusable in multiple contexts.

Name
Name
Name

To document changes and requirements, I created a table of existing CMS sections with notes on updates and editable fields. IT used this as a reference to navigate alterations and ensure everything was controllable in the CMS.

Name
Name

To document changes and requirements, I created a table of existing CMS sections with notes on updates and editable fields. IT used this as a reference to navigate alterations and ensure everything was controllable in the CMS.

Outcome

  • Autonomy → Marketing could now build and update pages themselves.

  • Speed → Time-to-market for campaigns dropped significantly (no waiting on IT).

  • Reduced friction → IT could focus on bigger tasks instead of small content changes.

  • Consistency → All public-facing pages aligned with the refreshed brand.

Key Takeaways

A lean design system doesn’t need months of research to deliver real impact — sometimes it’s about cleaning up and systematizing what already exists.


  • Combining a design system with a CMS kit empowered non-technical teams, reduced bottlenecks, and made the website scalable.

  • The result wasn’t just internal efficiency: it also improved Innoloft’s external brand perception, giving them a more modern and trustworthy presence.

Based in France.

Available Worldwide.

© 2024 Nathalya Barbosa

7:16:14 PM

Based in France.

Available Worldwide.

© 2024 Nathalya Barbosa

Based in France.

Available Worldwide.

© 2024 Nathalya Barbosa