Murator logo
Murator Redesign Case Study - mobile and web mockup
Murator Redesign Case Study - mobile and web mockup
Murator logo

Murator Redesign

Enhancing the existing Murator landing page and streamlining the entire checkout flow to deliver a superior user experience and a visually refined UI.

Project Overview

2

Solution

  • Streamlined UX with a simplified hierarchy and a guest checkout to reduce friction and drop-offs.

1

Problem

  • Low conversion caused by an overwhelming layout and a complex, confusing checkout flow on mobile.

My Role

UX/UI Designer

  • UX/UI Designer: Owned the design process from ideation to final execution.

  • Focus: Delivered end-to-end solutions aligned with user needs and business goals.

My Team

Murator

  • Collaborated with Senior Designer to refine visual language and UX strategy.

  • Impact: Active participation in design reviews to ensure top-tier consistency and hand-off quality.

Landing Page

Before

Photo Before Landing Page Desktop
Photo Before Landing Page Mobile

Landing Page

What was before?

Unprofessional Appearance: The design is outdated, dominated by gray tones and simple blocks, which lowers the perceived value of the offer.

Poor Offer Comparison: There are only two offers, and their comparison relies on simple descriptions. Lack of visual separation between packages.

Lack of Clear Benefits: The long descriptions of benefits (what the package includes) are not very readable - lacking bullet points and icons that would facilitate quick information absorption.

Lack of Time/Price Constraint: Prices are listed as "już od..." (starting from...), which is less concrete than stating a fixed price for the entire period.

After

Photo After Landing Page Desktop
Photo After Ladning Page Mobile

Landing Page

What was improved?

Clear Comparison Table: A significant visual improvement was achieved by using three clearly separated cards/modules (Pricing Table), which facilitates the comparison of prices and benefits.

Structured Benefits: The list of benefits under each package is organized into highly readable bullet points with icons (✓), making it easy to scan quickly and understand the value.

Visual Value Confirmation: A value-reinforcing headline was placed at the top: "A subscription offers a whole year of expert advice for the price of 10 issues."

Concrete Pricing: Prices are stated clearly and specifically (e.g., "179 zł").

  1. STEP 1

    Benchmarking

  2. 1

    Competitive Analysis and Benchmarking

    • To optimize the subscription and checkout process, I conducted a detailed benchmarking analysis.

    • I analyzed 6 competitor websites: Homebook, Leroy Merlin, Zalando, IKEA, Wyborcza, and Apple.

  3. 2

    Methodology

    • Reviewed Desktop and Mobile versions for each site.

    • Documented User Flow for the entire process, from landing page to purchase completion.

  4. 3

    Key Insights and Design Impact

    • Implemented Guest Checkout to eliminate mandatory registration barriers.

    • Simplified the checkout architecture to minimize cognitive load and prevent potential drop-offs.

  5. 4

    Core Inspiration Models

    • Leveraged Apple & IKEA as primary benchmarks for their minimalist layouts and intuitive form structures.

DESKTOP

APPLE Checkout flow

Apple checkout process benchmarking analysis Desktop
Apple checkout process benchmarking analysis Desktop

MOBILE

APPLE Checkout flow

Apple checkout process benchmarking analysis Mobile
Apple checkout process benchmarking analysis Mobile

DESKTOP

IKEA Checkout flow

Ikea checkout process benchmarking analysis Desktop
Ikea checkout process benchmarking analysis Desktop

MOBILE

IKEA Checkout flow

Ikea checkout process benchmarking analysis Mobile
Ikea checkout process benchmarking analysis Mobile

  1. STEP 2

    User Flow

  2. 1

    Core Design Goal

    • To build a clear and intuitive path for the subscription journey, ensuring users move from landing to payment without friction.

  3. 2

    Scope & Precision

    • Detailed mapping of every interaction, including form validations and critical edge cases to ensure a robust system.

  4. 3

    UX Standard

    • Focused on reducing abandonment rates by minimizing cognitive load and creating a predictable, smooth experience

  5. 4

    Critical Focus Areas

    • Prioritized the 3 key stages: selecting an offer, cart management, and final checkout completion.

DESKTOP

Checkout flow

Redesigned checkout process for Murator – simplified user flow and subscription steps Desktop
Redesigned checkout process for Murator – simplified user flow and subscription steps Desktop

MOBILE

Checkout flow

Redesigned checkout process for Murator – simplified user flow and subscription steps Mobile
Redesigned checkout process for Murator – simplified user flow and subscription steps Mobile

View Full Flow

  1. STEP 3

    UI Design

  2. 1

    Strategic Foundation

    • Goal: Direct response to the visual clutter of the legacy version.

    • Inspiration: Adopted the clarity and effortless efficiency of leaders like Apple and IKEA.

  3. 2

    Key Visual & Structural Decisions

    • Usability First: Prioritized a clean, modern aesthetic to make the interface fully intuitive and professional.

    • Consistency: Ensured 100% responsiveness for a coherent experience across desktop and mobile.

Desktop

Mobile

Landing Page

The main goal of this landing page was to redesign the magazine’s offers so they are clear and easy to read. I focused on making all the offers look consistent and organized, so visitors can quickly understand what’s being offered. The design is simple, clean, and easy to follow, which makes the magazine’s content more user-friendly.

Cart - Main desktop view with product list and summary.

Cart

Once a product is selected, the user is taken to the cart page, where the chosen item is displayed. A summary panel is positioned on the right side, and cross-selling suggestions are shown at the bottom to encourage additional purchases.

Desktop Sign up modal for Murator featuring real-time password validation, visibility toggle, and a clear list of account benefits.

Sign Up

During registration, a modal window appears offering users three options: sign up, continue as a guest, or log in. To sign up, users need to provide their email or phone number, create a password, and confirm the password. The modal keeps all options clearly visible, making it easy for users to choose how they want to proceed.

Desktop Log in modal for Murator.pl, featuring email and password input fields with a "Continue as Guest" option and a list of account benefits.

Log In

During Log In, a modal window appears where users can enter their email or phone number and password. The modal also provides options to continue as a guest or to sign up if they don’t have an account yet, keeping all choices clearly visible for easy navigation.

Desktop "Shipping Method" view for Murator, featuring a radio button list for delivery options including Courier, Parcel Locker, and Postal Service, alongside a full checkout form for personal and address information.

Delivery - Guest

This screen presents three available delivery options. When the user selects the courier option while not being signed in, an additional form is displayed to collect the required shipping information before continuing with the checkout.

Mobile checkout screen for Murator featuring a "Billing Details" form with a toggle to switch between Private Person and Company profiles.

Billing details - Individual

On this screen, when the user is a guest, a form appears to enter billing information. The user can specify whether they are entering the details as an “Individual” or a “Company.”

Desktop "Payment Method" view for Murator, featuring a radio button list of secure payment options including Quick Online Transfer, Traditional Bank Transfer, Payment on Delivery, Credit Card (Visa/Mastercard), and BLIK.

Przelewy 24

On this screen, we can see the selected payment option: fast electronic transfer. After clicking “Next,” the user is redirected to the external Przelewy24 payment page.

Desktop "Order completed" success page for Murator, featuring a large green confirmation icon, a detailed summary of the selected InPost Parcel Locker, and a full billing address overview.

Successful Payment

When the payment is completed successfully, the user is taken to a confirmation screen that summarizes the order and clearly indicates that the selected payment method was processed without any issues.

Desktop

Mobile

Landing Page

The main goal of this landing page was to redesign the magazine’s offers so they are clear and easy to read. I focused on making all the offers look consistent and organized, so visitors can quickly understand what’s being offered. The design is simple, clean, and easy to follow, which makes the magazine’s content more user-friendly.

Cart - Main desktop view with product list and summary.

Cart

Once a product is selected, the user is taken to the cart page, where the chosen item is displayed. A summary panel is positioned on the right side, and cross-selling suggestions are shown at the bottom to encourage additional purchases.

Desktop Sign up modal for Murator featuring real-time password validation, visibility toggle, and a clear list of account benefits.

Sign Up

During registration, a modal window appears offering users three options: sign up, continue as a guest, or log in. To sign up, users need to provide their email or phone number, create a password, and confirm the password. The modal keeps all options clearly visible, making it easy for users to choose how they want to proceed.

Desktop Log in modal for Murator.pl, featuring email and password input fields with a "Continue as Guest" option and a list of account benefits.

Log In

During Log In, a modal window appears where users can enter their email or phone number and password. The modal also provides options to continue as a guest or to sign up if they don’t have an account yet, keeping all choices clearly visible for easy navigation.

Desktop "Shipping Method" view for Murator, featuring a radio button list for delivery options including Courier, Parcel Locker, and Postal Service, alongside a full checkout form for personal and address information.

Delivery - Guest

This screen presents three available delivery options. When the user selects the courier option while not being signed in, an additional form is displayed to collect the required shipping information before continuing with the checkout.

Mobile checkout screen for Murator featuring a "Billing Details" form with a toggle to switch between Private Person and Company profiles.

Billing details - Individual

On this screen, when the user is a guest, a form appears to enter billing information. The user can specify whether they are entering the details as an “Individual” or a “Company.”

Desktop "Payment Method" view for Murator, featuring a radio button list of secure payment options including Quick Online Transfer, Traditional Bank Transfer, Payment on Delivery, Credit Card (Visa/Mastercard), and BLIK.

Przelewy 24

On this screen, we can see the selected payment option: fast electronic transfer. After clicking “Next,” the user is redirected to the external Przelewy24 payment page.

Desktop "Order completed" success page for Murator, featuring a large green confirmation icon, a detailed summary of the selected InPost Parcel Locker, and a full billing address overview.

Successful Payment

When the payment is completed successfully, the user is taken to a confirmation screen that summarizes the order and clearly indicates that the selected payment method was processed without any issues.

  1. Final Delivery & Handover

  2. 1

    Project Status

    • Fully completed and "Ready for Development".

    • Delivered a comprehensive package of UI components, user flows, and high-fidelity prototypes documented for a seamless developer handoff.

    2

    Implementation Note

    • Due to shifting business priorities, the development phase is currently on hold.

    • The result is a validated, scalable solution ready for immediate implementation when the roadmap allows.

Kacper Steć

UX/UI Designer

Home

About

Contact

Murator logo
Murator logo

Murator Redesign

Enhancing the existing Murator landing page and streamlining the entire checkout flow to deliver a superior user experience and a visually refined UI.

Murator Redesign Case Study - mobile and web mockup
Murator Redesign Case Study - mobile and web mockup

Project Overview

1

Problem

  • Low conversion caused by an overwhelming layout and a complex, confusing checkout flow on mobile.

2

Solution

  • Streamlined UX with a simplified hierarchy and a guest checkout to reduce friction and drop-offs.

My Role

UX/UI Designer

  • UX/UI Designer: Owned the design process from ideation to final execution.

  • Focus: Delivered end-to-end solutions aligned with user needs and business goals.

My Team

Murator

  • Collaborated with Senior Designer to refine visual language and UX strategy.

  • Collaborated with Senior Designer to refine visual language and UX strategy.

  • Impact: Active participation in design reviews to ensure top-tier consistency and hand-off quality.

Landing Page

Before

Photo Before Landing Page Desktop

Landing Page

What was before?

Unprofessional Appearance: The design is outdated, dominated by gray tones and simple blocks, which lowers the perceived value of the offer.

Poor Offer Comparison: There are only two offers, and their comparison relies on simple descriptions. Lack of visual separation between packages.

Lack of Clear Benefits: The long descriptions of benefits (what the package includes) are not very readable - lacking bullet points and icons that would facilitate quick information absorption.

Lack of Time/Price Constraint: Prices are listed as "już od..." (starting from...), which is less concrete than stating a fixed price for the entire period.

Photo Before Landing Page Mobile

After

Photo After Landing Page Desktop
Photo After Ladning Page Mobile

Landing Page

What was improved?

Clear Comparison Table: A significant visual improvement was achieved by using three clearly separated cards/modules (Pricing Table), which facilitates the comparison of prices and benefits.

Structured Benefits: The list of benefits under each package is organized into highly readable bullet points with icons (✓), making it easy to scan quickly and understand the value.

Visual Value Confirmation: A value-reinforcing headline was placed at the top: "A subscription offers a whole year of expert advice for the price of 10 issues."

Concrete Pricing: Prices are stated clearly and specifically (e.g., "179 zł").

  1. STEP 1

    Benchmarking

  2. 1

    Competitive Analysis and Benchmarking

    • To optimize the subscription and checkout process, I conducted a detailed benchmarking analysis.

    • I analyzed 6 competitor websites: Homebook, Leroy Merlin, Zalando, IKEA, Wyborcza, and Apple.

    2

    Methodology

    • Reviewed Desktop and Mobile versions for each site.

    • Documented User Flow for the entire process, from landing page to purchase completion.

    3

    Key Insights and Design Impact

    • Implemented Guest Checkout to eliminate mandatory registration barriers.

    • Simplified the checkout architecture to minimize cognitive load and prevent potential drop-offs.

    4

    Core Inspiration Models

    • Leveraged Apple & IKEA as primary benchmarks for their minimalist layouts and intuitive form structures.

DESKTOP ANALYSIS

Apple Checkout flow

Apple checkout process benchmarking analysis Desktop

MOBILE ANALYSIS

Apple Checkout flow

Apple checkout process benchmarking analysis Mobile

DESKTOP ANALYSIS

IKEA Checkout flow

Ikea checkout process benchmarking analysis Desktop

MOBILE ANALYSIS

IKEA Checkout flow

Ikea checkout process benchmarking analysis Mobile

  1. STEP 2

    User Flow

  2. 1

    Core Design Goal

    • To build a clear and intuitive path for the subscription journey, ensuring users move from landing to payment without friction.

    2

    Scope & Precision

    • Detailed mapping of every interaction, including form validations and critical edge cases to ensure a robust system.

    3

    UX Standard

    • Focused on reducing abandonment rates by minimizing cognitive load and creating a predictable, smooth experience

    • Focused on reducing abandonment rates by minimizing cognitive load and creating a predictable, smooth experience

    4

    Critical Focus Areas

    • Prioritized the 3 key stages: selecting an offer, cart management, and final checkout completion.

    • Prioritized the 3 key stages: selecting an offer, cart management, and final checkout completion.

DESKTOP

Checkout flow

Redesigned checkout process for Murator – simplified user flow and subscription steps Desktop

MOBILE

Checkout flow

MOBILE

Checkout flow

Redesigned checkout process for Murator – simplified user flow and subscription steps Mobile

View Full Flow

  1. STEP 3

    UI Design

  2. 1

    Strategic Foundation

    • Goal: Direct response to the visual clutter of the legacy version.

    • Inspiration: Adopted the clarity and effortless efficiency of leaders like Apple and IKEA.

    2

    Key Visual & Structural Decisions

    • Usability First: Prioritized a clean, modern aesthetic to make the interface fully intuitive and professional.

    • Consistency: Ensured 100% responsiveness for a coherent experience across desktop and mobile.

  1. STEP 3

    UI Design

  2. 1

    Strategic Foundation

    • Goal: Direct response to the visual clutter of the legacy version.

    • Inspiration: Adopted the clarity and effortless efficiency of leaders like Apple and IKEA.

    2

    Key Visual & Structural Decisions

    • Usability First: Prioritized a clean, modern aesthetic to make the interface fully intuitive and professional.

    • Consistency: Ensured 100% responsiveness for a coherent experience across desktop and mobile.

Desktop

Mobile

Landing Page

The main goal of this landing page was to redesign the magazine’s offers so they are clear and easy to read. I focused on making all the offers look consistent and organized, so visitors can quickly understand what’s being offered. The design is simple, clean, and easy to follow, which makes the magazine’s content more user-friendly.

Empty Cart

The layout stays the same, but the cart is empty, with the summary panel on the right, cross-selling suggestions at the bottom, a centered icon, and a “Return to Shopping” button below it.

Desktop empty cart view for Murator featuring a custom illustration, a "Return to shop" call to action, and a personalized product recommendation section.
Desktop Sign up modal for Murator featuring real-time password validation, visibility toggle, and a clear list of account benefits.

Sign Up

During registration, a modal window appears offering users three options: sign up, continue as a guest, or log in. To sign up, users need to provide their email or phone number, create a password, and confirm the password. The modal keeps all options clearly visible, making it easy for users to choose how they want to proceed.

Log In

During Log In, a modal window appears where users can enter their email or phone number and password. The modal also provides options to continue as a guest or to sign up if they don’t have an account yet, keeping all choices clearly visible for easy navigation.

Desktop Log in modal for Murator.pl, featuring email and password input fields with a "Continue as Guest" option and a list of account benefits.
Desktop "Shipping Method" view for Murator, featuring a radio button list for delivery options including Courier, Parcel Locker, and Postal Service, alongside a full checkout form for personal and address information.

Delivery - Guest

This screen presents three available delivery options. When the user selects the courier option while not being signed in, an additional form is displayed to collect the required shipping information before continuing with the checkout.

Billing details - Individual

On this screen, when the user is a guest, a form appears to enter billing information. The user can specify whether they are entering the details as an “Individual” or a “Company.”

Mobile checkout screen for Murator featuring a "Billing Details" form with a toggle to switch between Private Person and Company profiles.
Desktop "Payment Method" view for Murator, featuring a radio button list of secure payment options including Quick Online Transfer, Traditional Bank Transfer, Payment on Delivery, Credit Card (Visa/Mastercard), and BLIK.

Przelewy 24

On this screen, we can see the selected payment option: fast electronic transfer. After clicking “Next,” the user is redirected to the external Przelewy24 payment page.

Successful Payment

When the payment is completed successfully, the user is taken to a confirmation screen that summarizes the order and clearly indicates that the selected payment method was processed without any issues.

Desktop "Order completed" success page for Murator, featuring a large green confirmation icon, a detailed summary of the selected InPost Parcel Locker, and a full billing address overview.

Desktop

Mobile

Landing Page

The main goal of this landing page was to redesign the magazine’s offers so they are clear and easy to read. I focused on making all the offers look consistent and organized, so visitors can quickly understand what’s being offered. The design is simple, clean, and easy to follow, which makes the magazine’s content more user-friendly.

Empty Cart

The layout stays the same, but the cart is empty, with the summary panel on the right, cross-selling suggestions at the bottom, a centered icon, and a “Return to Shopping” button below it.

Desktop empty cart view for Murator featuring a custom illustration, a "Return to shop" call to action, and a personalized product recommendation section.
Desktop Sign up modal for Murator featuring real-time password validation, visibility toggle, and a clear list of account benefits.

Sign Up

During registration, a modal window appears offering users three options: sign up, continue as a guest, or log in. To sign up, users need to provide their email or phone number, create a password, and confirm the password. The modal keeps all options clearly visible, making it easy for users to choose how they want to proceed.

Log In

During Log In, a modal window appears where users can enter their email or phone number and password. The modal also provides options to continue as a guest or to sign up if they don’t have an account yet, keeping all choices clearly visible for easy navigation.

Desktop Log in modal for Murator.pl, featuring email and password input fields with a "Continue as Guest" option and a list of account benefits.
Desktop "Shipping Method" view for Murator, featuring a radio button list for delivery options including Courier, Parcel Locker, and Postal Service, alongside a full checkout form for personal and address information.

Delivery - Guest

This screen presents three available delivery options. When the user selects the courier option while not being signed in, an additional form is displayed to collect the required shipping information before continuing with the checkout.

Billing details - Individual

On this screen, when the user is a guest, a form appears to enter billing information. The user can specify whether they are entering the details as an “Individual” or a “Company.”

Mobile checkout screen for Murator featuring a "Billing Details" form with a toggle to switch between Private Person and Company profiles.
Desktop "Payment Method" view for Murator, featuring a radio button list of secure payment options including Quick Online Transfer, Traditional Bank Transfer, Payment on Delivery, Credit Card (Visa/Mastercard), and BLIK.

Przelewy 24

On this screen, we can see the selected payment option: fast electronic transfer. After clicking “Next,” the user is redirected to the external Przelewy24 payment page.

Successful Payment

When the payment is completed successfully, the user is taken to a confirmation screen that summarizes the order and clearly indicates that the selected payment method was processed without any issues.

Desktop "Order completed" success page for Murator, featuring a large green confirmation icon, a detailed summary of the selected InPost Parcel Locker, and a full billing address overview.

Desktop

Mobile

Landing Page

The main goal of this landing page was to redesign the magazine’s offers so they are clear and easy to read. I focused on making all the offers look consistent and organized, so visitors can quickly understand what’s being offered. The design is simple, clean, and easy to follow, which makes the magazine’s content more user-friendly.

Cart

Once a product is selected, the user is taken to the cart page, where the chosen item is displayed. A summary panel is positioned on the right side, and cross-selling suggestions are shown at the bottom to encourage additional purchases.

Cart - Main desktop view with product list and summary.
Desktop Sign up modal for Murator featuring real-time password validation, visibility toggle, and a clear list of account benefits.

Sign Up

During registration, a modal window appears offering users three options: sign up, continue as a guest, or log in. To sign up, users need to provide their email or phone number, create a password, and confirm the password. The modal keeps all options clearly visible, making it easy for users to choose how they want to proceed.

Log In

During Log In, a modal window appears where users can enter their email or phone number and password. The modal also provides options to continue as a guest or to sign up if they don’t have an account yet, keeping all choices clearly visible for easy navigation.

Desktop Log in modal for Murator.pl, featuring email and password input fields with a "Continue as Guest" option and a list of account benefits.
Desktop "Shipping Method" view for Murator, featuring a radio button list for delivery options including Courier, Parcel Locker, and Postal Service, alongside a full checkout form for personal and address information.

Delivery - Guest

This screen presents three available delivery options. When the user selects the courier option while not being signed in, an additional form is displayed to collect the required shipping information before continuing with the checkout.

Billing details - Individual

On this screen, when the user is a guest, a form appears to enter billing information. The user can specify whether they are entering the details as an “Individual” or a “Company.”

Mobile checkout screen for Murator featuring a "Billing Details" form with a toggle to switch between Private Person and Company profiles.

Przelewy 24

On this screen, we can see the selected payment option: fast electronic transfer. After clicking “Next,” the user is redirected to the external Przelewy24 payment page.

Successful Payment

When the payment is completed successfully, the user is taken to a confirmation screen that summarizes the order and clearly indicates that the selected payment method was processed without any issues.

Desktop "Order completed" success page for Murator, featuring a large green confirmation icon, a detailed summary of the selected InPost Parcel Locker, and a full billing address overview.

Final Delivery & Handover

1

Project Status

  • Fully completed and "Ready for Development".

  • Delivered a comprehensive package of UI components, user flows, and high-fidelity prototypes documented for a seamless developer handoff.

2

Implementation Note

  • Due to shifting business priorities, the development phase is currently on hold.

  • The result is a validated, scalable solution ready for immediate implementation when the roadmap allows.