Building a Responsive Monogram Customization Experience for Travellers

Overview

As the UX and UI lead designer, I designed a responsive website that allows customers to create custom monograms and apply them to products such as luggage, journals, and golf ball markers. The goal was to provide an intuitive customization tool that enables users to personalize products as an extension of their personal branding.

Before this project, customers could only choose from pre-made designs, limiting personalization. This new experience allows users to easily create monograms and see real-time previews before purchasing.

The Problem

Although one of the company’s investors already sold customizable luggage with pre-set designs, there was no option for customers to create their own. The existing market had tools for designing monograms but lacked direct integration with physical products, requiring users to download their designs separately.

This project aimed to:

  • Remove the restriction of using only pre-made designs.
  • Allow users to create a monogram directly on the platform.
  • Provide a seamless, responsive experience across all devices.

A key challenge was designing a customization tool that worked smoothly on any screen size while maintaining an intuitive user experience.

Understanding User Needs

Competitive Analysis

Since the company did not conduct direct user research, I performed a competitive analysis of brands selling luxury and travel-focused products. While few competitors offered monogram customization, I studied similar high-end shopping experiences to understand how our target audience interacts with personalization tools.

Target Audience

  • Primary users: Professionals and affluent young travellers looking for high-quality, customized products.
  • Key motivation: Personal branding—users wanted to display their initials on premium products as a sign of status and identity.

Design & Prototyping Approach

Creating an Intuitive Customisation Flow

I moved quickly from sketches to wireframes and interactive prototypes to validate the design. The customization process was structured as follows:

  • Step 1: Users choose a monogram template.
  • Step 2: They input their initials and select a typography style.
  • Step 3: The system generates a live preview of their design.
  • Step 4: Users can apply the monogram to a product of their choice.
  • Step 5: After reviewing the customized product, they proceed to checkout.

To avoid overwhelming users, I recommended limiting customization options for the MVP. This ensured a streamlined experience while allowing for future iterations based on user feedback.

Designing for Responsiveness

The customization tool needed to function seamlessly on desktop, tablet, and mobile devices. Using Figma’s auto-layout and responsive constraints, I:

  • Ensured the UI adapted smoothly across all screen sizes.
  • Created an interactive prototype to demonstrate the experience on different devices.
  • Provided developers with responsive specs and guidelines for implementation.

Collaboration & Feedback Loop

Stakeholder Alignment

Stakeholders were hands-off but provided feedback at key milestones. I regularly presented design updates to align them with the website’s vision and gain approval before moving into high-fidelity design.

Developer Handoff

I created a comprehensive design spec and prototype to support development, ensuring:

  • A smooth transition from design to development.
  • Technical feasibility of the customization tool.
  • Design QA to maintain consistency post-implementation.

Challenges & Adaptations

Biggest Challenge: Making Customization Seamless Across Devices

The customization tool was the most complex part of the project. Unlike standard e-commerce features, it required real-time interaction and live previews that worked across all screen sizes.

The Solution: Simplified User Flow & Scalable UI

To address this challenge, I:

  • Designed an intuitive step-by-step customization process.
  • Used responsive constraints to ensure smooth interactions on mobile.
  • Limited initial options to prevent decision fatigue and improve usability.

Final Outcome

Current Status & Expected Impact

The website is still under construction due to delays on the client’s end. However, once launched, the customization tool is expected to:

  • Differentiate the company by offering in-platform monogram customization.
  • Increase engagement by allowing users to create and visualize their designs.
  • Drive higher conversions by streamlining the path from design to purchase.

A key challenge was designing a customization tool that worked smoothly on any screen size while maintaining an intuitive user experience.

Key Takeaways

The website is still under construction due to delays on the client’s end. However, once launched, the customization tool is expected to:

  • MVP Focus Matters: Keeping the customization options minimal allowed us to prioritize usability and validate demand before scaling.
  • Responsiveness is Critical: Designing a customization tool that works seamlessly across all devices requires extra attention to UI scaling and interactions.
  • Stakeholder Alignment is Key: Regular check-ins helped maintain a clear vision and ensured design decisions were well understood.

This project reinforced the importance of balancing customization flexibility with a seamless user experience. Once live, future iterations will refine the tool based on user behaviour and feedback.