HOMEWARD BOUND E-COMMERCE FLOW

Seamless Customization, Simplified Checkout - Crafting a User-Centric Experience for Wholesale Leather Goods.

QUICK OVERVIEW

MY ROLE

  • UX Design

  • UI Design

  • UX Research

  • Website Design

TOOLS

  • Figma

  • IOS Kits

  • Lookback User Testing

TIMELINE

  • 4 Weeks

I designed a smooth and seamless user experience for a wholesale retailer that offers customizable leather key chains for their clients. The goal was to improve the online ordering process, allowing the client to choose a color, standard or premium hardware, and place bulk orders efficiently. I designed a solution that streamlined the custom ordering process and improved usability, resulting in higher customer satisfaction.

THE MISSION

Hobo’s mission was to create a user-friendly and efficient online ordering experience for wholesale clients purchasing customizable leather key chains. The goal was to simplify the decision-making process by offering clear customization options for hardware, color, and bulk ordering, while ensuring the interface met the unique needs of busy retailers. By optimizing the flow, I aimed to save users time, minimize errors, and enhance satisfaction, ultimately driving business growth for the retailer.

DISCOVERY

THE PROBLEM

Hobo Headwear faces challenges in providing a seamless and user friendly digital checkout experience for their wholesale clients. Clients need a quick, efficient, and user-friendly way to select the color, quantity, and hardware of their custom leather key chain. The current Shopify process has limited functionality, potentially leading to decreased sales and profitability.

THE RESEARCH

To inform the design process, I conducted preliminary research focused on industry trends, competitor analysis, and best practices in e-commerce checkout flows. This included studying common pain points in online purchasing, analyzing successful checkout experiences, and identifying opportunities to improve efficiency and customization.

OBSTACLES AND PATHWAYS

THE COMPETITION

I analyzed Popov Leather and American Leather Co. to explore how my competitors approached product customization, checkout flows, and overall usability. This analysis provided valuable insights into e-commerce best practices while also revealing and areas for improvement, ensuring my solution addressed common pain points while offering a more seamless and user-friendly experience.

  • Streamlined Customization - Allows users to personalize leather goods with options for color, stitching, and quantity.

  • Efficient Checkout Process - Features a straightforward checkout with clear pricing and minimal steps.

  • Handcrafted Quality Focus - Emphasizes artisanal craftsmanship and durability, appealing to premium buyers.

  • Simplified Product Selection - Offers a straightforward shopping experience with a focus on classic leather styles and minimal customization.

  • Emphasis on Affordability - Positions itself as a more budget-friendly option while maintaining quality materials.

  • Flexible Payment Options - Provides multiple payment methods, including installment plans, to enhance accessibility.

INTERVIEW TAKEAWAYS

To better understand user needs and expectations, I interviewed potential customers about their online shopping habits, preferences, and pain points when purchasing customizable products. The main goals were to identify the features users value most, uncover frustrations with existing e-commerce experiences, and explore barriers that might prevent them from completing a purchase.

FEATURE PRIORITIES

  • Real-time Customization Preview - Users want to see an accurate preview of their selected leather color, hardware, and engraving before purchasing.

  • Simplified Bulk Ordering - Users need an easier way to order multiple customized keychains with different options in one transaction.

DESIGN PREFERENCES

  • Minimal Aesthetic - Users prefer a clean, classic design with high-quality leather and subtle engraving options.

  • Customization Without Overcomplication - Users want the ability to personalize their keychain (e.g., engraving, color, hardware) but in a streamlined, intuitive way.

PAIN POINTS

  • Unclear Pricing Updates - Users are frustrated when price changes (due to customization choices) aren’t immediately reflected, making it hard to understand the final cost.

    Confusing Customization Flow - Users feel overwhelmed by too many steps or unclear options when selecting leather color, hardware, and engraving.

AUDIENCE

Through preliminary research, I identified the target audience as sales managers, procurement managers, and business owners.

CLIENT EXPECTATIONS & COMPROMISES

In the initial design, I proposed using a dynamic toggle bar feature to allow users to seamlessly increase or decrease the quantity of key chains, offering greater flexibility and control. However, the client expressed a strong preference for a more simplified approach, limiting quantity selection to three predefined options: 1 dozen, 6 dozen, and 24 dozen. While this decision deviated from my original vision, I adapted the design to align with the client's priorities, ensuring the interface remained intuitive and catered to their specific business needs.

THE USER PERSPECTIVE

OBJECTIVE

I created flow charts to further understand the user journey and identify the the highest priority screens to design. Below is an example of a user story and flow chart.

  • Understand user needs and goals through user flows

  • Outline core functionalities that help users reach their goals

ORDERING PROCESS FLOW

PERSONA

ITERATE, TEST, IMPROVE

SKETCHES

WIREFRAMES

  • The initial landing page

  • A product listing page

  • Selected product page

  • Empty cart screen

  • Filled cart page

  • Customer info/payment screen

  • Confirmation page

Task 2: View Description information for each Standard Key Clip.

Task 3: Select 3 Natural Key Clips with Standard Hardware and then complete the checkout process.

Task 1: Select 2 Black Key Clips with Premium Hardware and then complete the checkout process.

I conducted both in-person and remote moderated usability tests using a clickable prototype to gather feedback on the initial design. In particular, I was testing the overall ease of use and completing the main tasks in the prototype, gathering feedback along the way.

Usability Test Tasks

USABILITY TEST INSIGHTS

VISUAL STYLE

I determined that the tone of this project should be minimal and efficient, reflecting the needs of busy, wholesale buyers who value speed in their ordering process. The mood board includes a neutral color palette, modern typography, and brand images that convey a sense of professionalism and reliability.

LANDING PAGE

The landing page features a bold call-to-action, 'Shop Keyclips,' placed over a professionally lit photo showcasing a variety of key clips. This visually engaging design immediately draws attention to the product, inviting users to explore and make a purchase.

PRODUCT SCREEN

The product listing page displays a high quality image of the key clip followed by a clean scroll of each available key clip.

FINAL SCREENS

SHOPPING CART SCREEN

The shopping cart displays items that have been added to the cart, with the ability to increase the quantity or remove the item altogether.

FINAL THOUGHTS

This e-commerce project focused on creating a streamlined and intuitive experience for wholesale buyers placing custom product orders. Key features included a clear product customization flow, quick hardware and color selection, real-time pricing updates, and a responsive cart that reflects changes instantly. By prioritizing efficiency and clarity, the design supports users in placing accurate orders with minimal friction.

This case study reinforced the importance of understanding user context—specifically the needs of busy business owners who prioritize speed and precision. While the initial designs were based on general e-commerce best practices, user interviews and feedback from wholesale buyers highlighted the need for better visibility of order details and simpler customization options. Iterative testing allowed me to refine the interface and focus on building trust through transparency and ease of use. Overall, this project deepened my understanding of how thoughtful design can empower users to complete complex tasks with confidence.