Patched Embroidery

UX Research & UX Design
Introduction
This project involved designing and developing a fully functional physical kiosk with an interactive digital screen. We built a physical chassis to serve as the kiosk and integrated a digital interface for user interaction. The goal was to allow users to experience a simulated process of creating their own custom embroidery patch, engaging with both the physical and digital components.
Why Customization Kiosks?
01
Novel Market - There isn’t yet a well-adopted kiosk providing artistic or creative customization options—whether for clothing, phone cases, or stickers.
02
Diverse Demand - By its nature, customization is for everyone. No matter who you are, or what you like, you can customize something to reflect yourself.
Why Embroidery?
01
Unique - Embroidery is a fairly unexplored medium for custom clothing. Most custom clothing is screen or laser printed. This compounds the personalization aspect.
02
Adjustable - Many things can be embroidered; this leaves us open to pivot wherever our research points us.

Tools

  • Figma
  • SolidWorks
  • Inkscape

Team

  • Luke Sheltraw
  • Boston Thome
  • Vivi Doan
  • Christina Mai

My Role

    • UX Researcher
    • UX Designer

    Timeline

    • Overall: 10 weeks
    • Discovery & Research: 4 weeks
    • Design & Testing: 6 weeks

      Design Process

      01
      Research & Exploration
      02
      Sketches
      03
      Low-Fidelity
      04
      Final Outcome
      05
      User Testing
      Research & Exploration
      01
      To inform our research, we conducted online research, fieldwork, and interviews.
      Online Research
      We explored various design inspirations for embroidery, analyzed news articles, reviewed academic studies, and examined existing customization options. Key takeaways from our online research include:
      01
      Studies support the idea that people have stronger connections to items that are unique and reflect their own self.
      02
      There are existing customization facilities, such as for embroidery or screen printing, but they are large in scale & size.
      03
      Rapid iteration of technology has led to increasingly smaller devices, e.g. in-store 3D printing or personal embroidery machines.
      Fieldwork Research
      For our fieldwork research, we analyzed two different setups: the UTC Mall PopMart Kiosk and the Roland Item Customization Booth. Our observations focused on user interactions, crowd dynamics, and overall approachability.
      01
      UTC Mall PopMart Kiosk
      • Most users engaged with the kiosk in groups rather than individually
      • People were generally unwilling to wait in line to use it
      • Many users interacted with the kiosk for less than a minute before walking away
      • The majority of users appeared to be between 20 and 40 years old
      02
      Roland Item Customization Booth
      • Crowd sizes fluctuated depending on the time and day of the event, with mostly young adults participating
      • Kiosk attracted intrigue, and its open space and table setup effectively accommodated large groups
      • When the booth was empty, with only the manager present, it felt less approachable
      • Users could generally understand the next steps and navigate the setup without assistance. However, in large crowds, the manager was often busy, and if all tables were occupied, users were unsure where to begin
      Interview Insights
      Our interviews explored users' thoughts on customization, their experiences with customized clothing, their opinions on kiosks, and any challenges they've faced with customization. Key findings include:
      01
      5/6 Interviewees believe that customization allows them to express their personality/style
      02
      4/6 Interviewees showed interest in customizable gifts
      User Personas
      Based on our interviews and research, we created user personas derived from the collected data.
      Mission Statement:
      We aim to provide shoppers with a seamless, lightweight, and expressive kiosk experience, enabling them to customize their own patches and thereby create personal connections, sentimental value, and novel experiences.
      02
      Sketches
      Based on our research, we began by sketching both the physical and digital designs to generate ideas and establish a clear vision for the kiosk. We ultimately designed a kiosk viewable from three different sides, with the machine positioned at the center. Additionally, we developed the user flow for the digital interface to account for all the screens necessary.
      Digital Design
      Some of the sketches
      All Sketches
      User Flow
      Physical Chassis
      Feedback
      01
      We received feedback that we should consider the case when multiple people want to use the machine
      • We addressed this concern by having multiple cubbies, so that one user can’t indefinitely suspend the machine for everyone
      02
      We received feedback that we should help users understand the time commitment they are entering themselves into
      • We addressed this concern by adding various time estimates throughout the different phases, aiding users in choosing the path appropriate for the time they have (e.g. using a pre-made design, coming back to pick up their patch later)
      03
      Low-Fidelity
      Based on the feedback we received, we refined our sketches and began creating low-fidelity versions of both the physical chassis and the digital interface. For the physical chassis, this involved determining the correct measurements and shapes to ensure all components fit together seamlessly. Meanwhile, the digital interface was developed through wireframes, laying the foundation for the kiosk’s interactive experience.
      Digital Design
      We began creating our wireframes for the digital design in Figma to outline the user interface and define the layout for an intuitive and engaging experience.
      All Wireframes
      Physical Design
      We used SolidWorks to create our initial 3D model of the chassis prototype. These models were then converted into SVG files, enabling us to use a laser cutter to bring our design to life.
      SolidWorks Prototype
      SVG Files
      Final Outcome
      04
      To complete our project and maintain the aesthetic of an embroidery machine, we developed a comprehensive style guide and created high-fidelity mockups for the digital screens. For the chassis, we painted the laser-cut wooden pieces before assembling them and added decorative designs to tie the visual and functional aspects of the project together.
      Digital Design
      Style Guide
      Some of the digital screens
      All Mockups
      Physical Design
      Front of kiosk showing mock embroidery machine
      Users enter phone number on digital screen to unlock designated locker and retrieve patch.
      Viewing windows on three sides
      User Testing
      05
      To assess the effectiveness of our kiosk, we conducted user testing focused on three key areas: the testing process, insights from user interactions, and recommendations for improvement. Through structured tasks and interviews, we observed how users engaged with the product, uncovering common challenges and patterns in their interactions. Based on these findings, we identified key insights and actionable recommendations to enhance usability and improve the overall user experience.
      Process
      For our user testing, we developed a set of interview questions and tasks to evaluate the kiosk's usability and effectiveness. Three participants consented to having their sessions recorded for further analysis. Each participant was given two tasks to complete:
      • Design 'this' custom patch (image shown) or Use existing design
      • Proceed through the check out process and pick up your patch later
      For our user testing, we developed a set of interview questions and tasks to evaluate the kiosk's usability and effectiveness. Three participants consented to having their sessions recorded for further analysis. Each participant was given two tasks to complete:
      Insights
      Our user testing revealed several key insights about how participants interacted with the kiosk.
      01
      Users who worked at a slower pace found it easier to discover where to click and how to navigate the patch design process
      02
      While some users immediately identified the payment section, others needed a moment to locate it
      03
      A common issue was that many participants overlooked the on-screen arrow directing them to the pick-up boxes
      04
      Some users attempted to interact with the customization interface in ways that Figma does not support, such as dragging objects—an interaction that actually aligned with our intended design
      These findings highlighted areas where adjustments were needed to improve clarity and alignment with user expectations.
      Recommendations
      To improve the kiosk’s usability and overall experience, we identified several key design adjustments:
      01
      Modify the kiosk’s form factor so the lockers stand out independently of the user interface. One suggestion was a trapezoidal shape, allowing the sides of the kiosk to jut out for better visibility
      02
      Add more instructions within the customization interface to help users navigate design options more easily
      03
      Create more visual space around the card reader and move it closer to the screen to make it more noticeable
      04
      Ensure cohesiveness between the kiosk’s physical logo and the digital logo displayed on the tablet
      These changes aim to enhance clarity, ease of use, and overall user experience.

      Reflection

      This project was an eye-opening experience that challenged me to move beyond the boundaries of my primary discipline and embrace a versatile approach. While my background is rooted in UX design, this project required me to explore aspects of mechanical engineering as well. From using SolidWorks to create a 3D model of the chassis to converting designs into laser-cut SVG files, I immersed myself in hands-on fabrication processes that were typically outside my core expertise.Additionally, designing the interactive digital interface in Figma leveraged my technical, creative, and user-centered design skills to deliver a cohesive user experience. Balancing the aesthetic appeal with the functional requirements of the kiosk highlighted the significance of collaboration across disciplines.This project taught me how to integrate diverse tools and methodologies, communicate effectively with team members from different fields, and use new engineering  techniques, allowing me to greatly expanded my skill set.
      Back to Top