Case study
Design system & new GUI for SaaS platform
Time range
Sep 2022 – Dec 2022
Time for reading
~ 10 min
Tags
UX/UI, desktop, refinements
Previously, the product lacked a unified design system, relying on screenshots and collages for new features. With no defined styles, guidelines, or components, my goal was to create a cohesive design system and refresh the visual design.
Context
Project scope
Refresh the current design, create a Figma file with reusable components, and develop a subpage with a design system for developers.
Problem statement
The product lacked a unified design system, forcing developers to rely on screenshots and collages for new features. Development was inefficient, leading to longer implementation times.
The goal
Create a cohesive design system, refresh the visual design, and build a reusable Figma file with components. Streamline development to reduce implementation time by at least 30%.
Development team
1 UI/UX designer, 2 frontend developers, 1 backend developer
Compraison between old GUI (top right) and new design (bottom left).
All materials, designs, and insights presented in this case study are the property of createctrl/cinetixx. This work is shared for portfolio purposes only, with the sole intent of demonstrating my role and contributions to the project. No unauthorized use, reproduction, or distribution is permitted.
Previous version
For over 20 years, Cinetixx was available only as a desktop application. A few years before I joined, they decided to develop a Web version. At that time, a designer had been onboard for about a year, but prior to this, design work was handled by developers.
When I joined, the Web application was in its early stages, with many features still confined to the desktop app. My long-term goal was to redesign these functionalities for the Web and enhance the overall user experience and visual design.
Preview of old design — statistics page
Preview of old design — create new release note modal window.
Preview of old design — add new movie modal window.
Preview of old design — add employee modal window.
Preview of old design — login page.
The outcome
We successfully launched a new design system, incorporating necessary adjustments along the way. The final products included:
Comprehensive “Design System” file containing all components and their associated guidelines.
Two Figma files, for Admin and Manager, with all subpages and additional instructions as wireframes and prototypes.
Web version of UI cinetixx for developers, with all guidelines.
Additionaly, we were able to exceed the goal and reduced the implementation time by ~56%.
Redesign process
Redesign process
We reviewed the existing designs and conducted an audit of the current solutions. Since the stakeholders opted not to conduct full-scale research, especially with customers, we focused on alternative ways to gather insights.
Research
To identify key pain points, we worked closely with the Support Team, analyzing their challenges, support tickets, and common call topics. This helped us uncover recurring user frustrations and areas for improvement.
Key findings
2 in-depth user interviews with Support Team Employees
Review of current & recent support tickets.
Data from around 30 users during regular meetings and discussions over a phone call.
82% of users think of cinetixx as old-fashioned and not modernized.
82% of users expressed frustration with forms, including the error handling.
All interviewed users stated that the change is necessary.
17% of respondents felt stuck with cinetixx, because there is no good alternative.
The structure of the page seemed problematic for ~56% of users.
Summary Statement
All users noticed issues with current GUI, as well as expressed frustrations with current error-handling situations.
Design change process
The first step into the designing process involved researching how the elements should be designed to ensure consistency, while also being practical and adaptable for future adjustments. Since this was my first time creating and implementing a commercial design system, I also studied best practices to understand what a well-structured design system should look like.
Preview of one of the mind maps created in ideation process.
Ideation
Our ideation process focused on defining Cinetixx's brand voice—should it have a rigid, business-oriented look, or a more playful feel?
After several rounds of discussion, we decided on a professional and friendly tone with a modern touch.
Summary Statement
We should be professional, but approachable — more like a friend than a traditional banking company. Building strong client relationships and emphasizing loyalty is key.
Visual Design
Visual Design
Assumptions
Having a clear message, we established several assumptions about the future design system and goals to achieve, as well as the overall voice and tone.
Friendly, but proffesional look
The core voice of the Cinetixx brand should communicate the message: “We are here for you, and you can count on us”.
Structure to hold complex data
Cinetixx manages a large amount of data and settings, so the design must accommodate extensive information while allowing users to take multiple actions on a single page.
Reusable, component-based Figma file
To streamline future work, we need to built our design system using Figma components with variants.
Instructions and proper hand-off
Comprehensive documentation is essential for design systems. We need to create clear instructions on how to use components, along with proper guidelines for developer handoff.
Unified style guides
We need to create style guides for fonts, colors, spacing, and other elements to establish a strong foundation for the design system.
Clean files for future team members
Although I was the only designer on the team, we needed to structure our files to ensure a smooth onboarding process for future designers.
Colors
We initially worked with five main colors, totaling 46 shades in use. Many of these shades were nearly identical due to the lack of color guidelines — designers and developers often relied on the pipette tool to select colors.
In the new style guide, we refined the palette by selecting the five colors to 30 carefully selected shades, creating a flexible foundation for future adjustments.
Preview of old colors used across cinetixx.
New style guide color, with names and Hex color codes.
Fonts & Typography
In the previous version, we used a mix of Lato, CinetixxSans, and Roboto fonts across the pages, but there was little consistency. We also lacked defined text styles, resulting in inconsistent headlines and paragraphs with varying sizes and fonts.
In the new version, we switched to Jost, giving the interface a friendlier and less rigid appearance. We created a comprehensive set of text styles, including headlines, paragraphs, and other text elements with details for developers.
Preview of old typography.
New typography.
Navigation & Information architecture
While the at-time structure wasn’t inherently bad, it posed challenges for Cinetixx as a complex application. It worked well for a fixed and limited main categories, but and many more functionalities yet to be transferred from the desktop version, it lacked scalability. The design was not responsive, making it unsuitable for smaller screens.
To address these issues, we decided to consolidate all navigation into the left sidebar and introduce breadcrumbs at the top for better orientation. We also reassigned icons from the subpages to the main categories, as the previous icons were not descriptive.
Old navigation & information architecture.
New navigation & information architecture.
Icons
In previous version, we used a mix of filled and outlined icons in varying styles—some rounded, others sharp. While we primarily relied on Material Design icons, several icons came from other sources, resulting in inconsistency.
We standardized our iconography by selecting a single primary icon provider — Remix Icons, which complemented the softness and maintain a cohesive visual style. Missing icons were custom-made and saved as SVG files and integrated into a custom icon font.
Preview of old icons across cinetixx.
Example of Remix Icons.
Buttons
The at-time design included a mix of rounded and sharp buttons, along with varying styles of icons and text. Additionally, there were no defined versions of primary, secondary, or tertiary buttons.
We resolved these inconsistencies by standardizing button styles and introducing strong action buttons and icon buttons, ensuring full coverage of existing variations. To maintain the soft aesthetic established in earlier design choices, we opted for slightly rounded buttons, creating a more cohesive and approachable interface.
Examples of old buttons used across cinetixx.
A collapse version of new buttons.
Inputs & selects
A similar issue arose with input fields and selects, as multiple styles were in use. In the new design, we standardized these elements by adopting slightly rounded fields. We also introduced consistent features such as labels, hint text, placeholders, and info icons.
Aside from the label and placeholder, all other elements are optional and depend on the desired outcome and variant. We have also introduced inputs with fixed text.
Example of old inputs & selects.
New inputs and selects, with several variants.
Other elements
The most significant changes were made to inputs, buttons, and icons. The remaining updates were minor, consisting mostly of refinements and subtle adjustments.
Several elements retained their original appearance but were converted into components for consistency and reusability.
Presentation for the board
Once we established the foundation for the new design system, it was time to present it to the stakeholders, including the CEO, COO, and PMs of Cinetixx. The primary goal was to ensure that the selected style met the needs of the application and aligned with the business objectives.
Overview of the presentation made for the board and stakeholders.
Visual design summary statement
The new design guide was fully approved, giving us the green light to refine all components and begin creating mockups for Cinetixx.
Final products & files
Final products & files
File organization — Design system
We created a dedicated file named “Design System”, organized with all components arranged alphabetically as individual pages. We utilized components with variants for all elements, and standardized text and color styles.
Each page includes an editable component for designers, along with a detailed board showcasing the component, its descriptions, usage guidelines, and examples.
A preview of the design system's file, showcasing its structured approach to components and styles.
Preview of the hand-off board of Alerts; from the left — showcase, the description, the example of usage.
Preview of the hand-off board of Choice buttons; from the left — showcase, the description, the example of usage.
Design & Dev files
All pages, modal windows, and workflows were designed in Figma to support developers in implementing the new design, ensure we covered all possible instances, and enable designers to make quick adjustments in the future without redesigning the foundation for new features.
We created files for Admin and Manager App, as well as separate Dev files to align with our agile workflow — only after prototype approval was the design copied to the Dev version. This ensured that developers only saw finalized changes and prevented unintended modifications.
Example of file with the developers instructions.
Example of file with the developers instructions & additional elements.
Comparison between old & new pages
We created the Figma file version with all screens for cinetixx. To illustrate the improvements, we prepared comparisons showcasing the differences between selected example pages.
Old login page.
New login page.
Old statistics page.
New statistic page.
Old raports page.
New raports page.
Add new employee modal window; old design.
Add new employee modal window; new design.
Create new release note; new design
Create new release note; old design
Iterations & Refinements
Scaling down the design
Over time, we realized that the large UI elements were becoming frustrating to use. Excessively large components pushed important content down, reducing efficiency. To resolve this, we scaled down the design by approximately 15%, which significantly improved usability.
Background color adjustment
Initially, we chose a light blue background to complement white content boxes. However, in the final version, we removed the boxes to save space but forgot to update the background color. This led to lower contrast and a slightly unpleasant user experience. Switching the background to light gray quickly solved the issue.
Summary
We successfully launched a new design system, incorporating necessary adjustments along the way, and reduced the time needed for new wireframes by ~56%.
The final product included a total of five Figma files and one additional subpage called 'CinetixxUI.' We created style guides and detailed instructions for nearly all components. As of 2025, this design has served as the foundation of the Cinetixx brand for over three years, guiding all documentation and new projects.
Check other case studies
The goal was to design a B2C platform enabling users to search for movies playing in nearby cinemas.
Development of a technical documentation and subpage for their storage.
Learn more about my experience, background and approach to design.
Let’s connect and explore the possibilities on how we can work together.