Kacper Steć

UX/UI Designer

Home

About

Contact

Murator Design System

Design Sytem Case Study

Design Sytem Case Study

A library of UI components built for Murator to keep the design consistent across web and mobile.

A product recommendation carousel titled 'Zobacz także' (See also) for the Murator store. It features multiple clean, white product cards, each displaying a digital subscription cover, the title 'Prenumerata 6 miesięcy na spokojnie', a price of 112,90 zł, and a circular plus icon for quick adding to the cart.
A row of numbered UI selection chips from 1 to 6 with a red outlined 'warning state' active. A small red 'Warning message' is displayed below the elements, demonstrating the error-handling logic within the Murator Design System
A compact UI product card for a digital subscription in the Murator checkout flow. The card features a small thumbnail of the magazine cover, the title 'Prenumerata 6 miesięcy na spokojnie', the price of 112,90 zł, and a quantity selector button (+1) for easy cart management
A high-level overview of the desktop "Cart" section, showing the full split layout: product list on the left and a summary sidebar with a promo code field and primary CTA on the right.
Photo After Ladning Page Mobile

Why I created a Design System?

Why I created a Design System?

Why I created a Design System?

Before this project, the brand lacked a consistent design system. This led to a messy interface and high maintenance costs. I built this library from scratch to make sure every screen looks professional and consistent. This new foundation doesn't just fix the current checkout flow – it serves as a base for all future digital products in the company’s portfolio, making the hand-off to developers much faster.

Before this project, the brand lacked a consistent design system. This led to a messy interface and high maintenance costs. I built this library from scratch to make sure every screen looks professional and consistent. This new foundation doesn't just fix the current checkout flow – it serves as a base for all future digital products in the company’s portfolio, making the hand-off to developers much faster.

Before this project, the brand lacked a consistent design system. This led to a messy interface and high maintenance costs. I built this library from scratch to make sure every screen looks professional and consistent. This new foundation doesn't just fix the current checkout flow – it serves as a base for all future digital products in the company’s portfolio, making the hand-off to developers much faster.

A UI delivery information card for home courier service. It displays a summary of the user's delivery details, including the street address in Legionowo, phone number, and postal code. The card features a clean layout with a small courier truck icon and a circular edit button in the top right corner
UI checkbox components in two states: an unselected light gray square and a selected yellow square with a black checkmark, reflecting the Murator brand identity
A UI delivery information card for home courier service. It displays a summary of the user's delivery details, including the street address in Legionowo, phone number, and postal code. The card features a clean layout with a small courier truck icon and a circular edit button in the top right corner
A UI delivery information card for home courier service. It displays a summary of the user's delivery details, including the street address in Legionowo, phone number, and postal code. The card features a clean layout with a small courier truck icon and a circular edit button in the top right corner
UI checkbox components in two states: an unselected light gray square and a selected yellow square with a black checkmark, reflecting the Murator brand identity
UI checkbox components in two states: an unselected light gray square and a selected yellow square with a black checkmark, reflecting the Murator brand identity
A compact UI product card for a digital subscription in the Murator checkout flow. The card features a small thumbnail of the magazine cover, the title 'Prenumerata 6 miesięcy na spokojnie', the price of 112,90 zł, and a quantity selector button (+1) for easy cart management
A compact UI product card for a digital subscription in the Murator checkout flow. The card features a small thumbnail of the magazine cover, the title 'Prenumerata 6 miesięcy na spokojnie', the price of 112,90 zł, and a quantity selector button (+1) for easy cart management
A compact UI product card for a digital subscription in the Murator checkout flow. The card features a small thumbnail of the magazine cover, the title 'Prenumerata 6 miesięcy na spokojnie', the price of 112,90 zł, and a quantity selector button (+1) for easy cart management

Buttons & Variables

Buttons & Variables

Buttons & Variables

To make the hand-off to developers easier, I set up a clear grid and used variables for everything. Every button is connected to these specific brand tokens. This means we can update the entire interface instantly and keep the look consistent as the company grows.

To make the hand-off to developers easier, I set up a clear grid and used variables for everything. Every button is connected to these specific brand tokens. This means we can update the entire interface instantly and keep the look consistent as the company grows.

To make the hand-off to developers easier, I set up a clear grid and used variables for everything. Every button is connected to these specific brand tokens. This means we can update the entire interface instantly and keep the look consistent as the company grows.

Design system color variables and tokens for the Murator redesign project.
Design system color variables and tokens for the Murator redesign project.
Design system color variables and tokens for the Murator redesign project.
Design system button library and product steppers for Murator, including interactive states: default, hover, disabled, and pressed.

Text fields, Selectors, Tabs

Text fields, Selectors, Tabs

Text fields, Selectors, Tabs

I designed these components to make filling out forms easier. Whether it’s entering a verification code or picking a subscription plan, every element is made to be simple and clear. I focused on helpful error messages and visible states to guide users through the checkout without any confusion.

I designed these components to make filling out forms easier. Whether it’s entering a verification code or picking a subscription plan, every element is made to be simple and clear. I focused on helpful error messages and visible states to guide users through the checkout without any confusion.

I designed these components to make filling out forms easier. Whether it’s entering a verification code or picking a subscription plan, every element is made to be simple and clear. I focused on helpful error messages and visible states to guide users through the checkout without any confusion.

UI components for Murator redesign including radio buttons, checkboxes, and switches with defined interactive states.
"A set of three horizontally aligned subscription selection tabs, showcasing different payment duration options: 1 month, 6 months, and 12 months. Each tab has a clean white design with a yellow action button, utilizing a 12-column grid and semantic brand variables.
UI library of text and password input fields for Murator, showing interactive states like default, focused, error with warning messages, and disabled.
UI component for BLIK payment code input, featuring six separate digit fields with focused and error states.

Cards

Cards

Cards

I designed these cards to handle different types of information, from business addresses to delivery methods. They are built on a flexible grid, so they look great and stay readable on any device. By keeping the spacing consistent, I made sure that even complex data is easy for users to scan and understand quickly.

I designed these cards to handle different types of information, from business addresses to delivery methods. They are built on a flexible grid, so they look great and stay readable on any device. By keeping the spacing consistent, I made sure that even complex data is easy for users to scan and understand quickly.

I designed these cards to handle different types of information, from business addresses to delivery methods. They are built on a flexible grid, so they look great and stay readable on any device. By keeping the spacing consistent, I made sure that even complex data is easy for users to scan and understand quickly.

UI cards for user and company profile summaries in the Murator checkout, showing responsive layouts for small, medium, and large screen sizes.
Responsive delivery summary cards for InPost, Courier, and Post, showing adaptive layouts for mobile, tablet, and desktop viewports.

Templates

Templates

Templates

I used the component library to build full page layouts, from the cart view to the order confirmation. By using these ready-made templates, I ensured that every new page stays consistent and works perfectly on all screen sizes. This approach shows how the design system handles real content and complex user data while keeping the interface clean and easy to navigate.

I used the component library to build full page layouts, from the cart view to the order confirmation. By using these ready-made templates, I ensured that every new page stays consistent and works perfectly on all screen sizes. This approach shows how the design system handles real content and complex user data while keeping the interface clean and easy to navigate.

I used the component library to build full page layouts, from the cart view to the order confirmation. By using these ready-made templates, I ensured that every new page stays consistent and works perfectly on all screen sizes. This approach shows how the design system handles real content and complex user data while keeping the interface clean and easy to navigate.

Cart - Main desktop view with product list and summary.
Cart - Main Mobile view with product list and summary.
Alt Text (English) "A side-by-side UI design showcase of the Murator delivery selection screen for both desktop and mobile platforms. The interface features a clean white layout with a 12-column grid, displaying delivery options like 'Courier' and 'InPost', a detailed address card with edit icons, and a prominent yellow 'Next' (Dalej) call-to-action button. The design includes a dark footer with customer service information and brand logos.
Alt Text (English) "A side-by-side UI design showcase of the Murator delivery selection screen for both desktop and mobile platforms. The interface features a clean white layout with a 12-column grid, displaying delivery options like 'Courier' and 'InPost', a detailed address card with edit icons, and a prominent yellow 'Next' (Dalej) call-to-action button. The design includes a dark footer with customer service information and brand logos.
Desktop "Payment Method" interface for Murator, displaying a list of secure options including Fast Online Transfer, Traditional Bank Transfer, Cash on Delivery, Credit Card, and BLIK with integrated provider logos.
Mobile "Payment Method" interface for Murator, displaying a list of secure options including Fast Online Transfer, Traditional Bank Transfer, Cash on Delivery, Credit Card, and BLIK with integrated provider logos.
Desktop "Payment Processing" (Przetwarzanie płatności) intermediate screen featuring an animated hourglass icon, informing the user that the transaction may take a few moments while displaying the delivery and billing summaries.
Mobile "Payment Processing" (Przetwarzanie płatności) intermediate screen featuring an animated hourglass icon, informing the user that the transaction may take a few moments while displaying the delivery and billing summaries.

Impact & Scalability

Impact & Scalability

  1. The system's value was proven during the design phase of Architektura, a sister portal with a similar subscription model. Since the foundation was already built, preparing the entire project took just a fraction of the usual time.

  2. The system's value was proven during the design phase of Architektura, a sister portal with a similar subscription model. Since the foundation was already built, preparing the entire project took just a fraction of the usual time.

  3. By simply swapping the design tokens (fonts and colors) and updating the copy, I delivered a complete, consistent design that was immediately ready for development.

    By simply swapping the design tokens (fonts and colors) and updating the copy, I delivered a complete, consistent design that was immediately ready for development.