Designing an interactive onboarding experience to improve stakeholder alignment in vending machine projects
Timeline
8 Weeks (Mar-Apr 2025)
Role
Lead Product Designer
Team
1 Senior Experience Designer (mentor)
Skills
Interaction design, user research, information architecture
Project Context
What is wonderMakr?
wonderMakr is a creative technology studio specializing in experiential activations, which are in-person branded experiences companies use for advertising and engagement.
What are experiential vending (xVend) projects?
wonderMakr was the first company to create experiential vending machines in North America. These aren't standard vending machines, users interact through actions like scanning a badge or smiling at a camera to receive prizes. These xVend projects have become a core offering for the company.
My role and impact
As lead designer, I owned the full design process from research through final delivery. The senior experience designer served as a mentor and provided validation at key milestones. Since its launch, the onboarding experience has reduced project lead times by nearly 25% by automating most stakeholder communication.
Where the Experience Broke Down
DEFINE & SCOPE 🎯
Current Workflow
wonderMakr's existing client onboarding relied on outdated PDF documents designed to sell the service, not educate clients who had already booked projects. These documents were text-heavy, difficult to navigate, and didn't clearly explain deliverables or technical requirements.
As a result, clients frequently entered projects confused about what they'd signed up for. This led to repeated back-and-forth clarification requests between project managers, direct clients (agencies), and end clients (brands), significantly extending project timelines.
How might we make experiential vending services clearer to all stakeholders to reduce confusion and streamline project timelines?
Understanding the Existing Experience
PRIMARY RESEARCH 🔎
User Interviews
I conducted interviews with three stakeholder groups to understand pain points from both the client-facing and internal perspectives.
PRIMARY RESEARCH 🔎
Workflow Analysis
Since we were creating something fairly novel, traditional competitive analysis wasn't applicable. Instead, I evaluated our existing client-facing documents to identify opportunities for improvement.
Key takeaways
Limit component briefs to 3 pages maximum to focus on essential information
Combine all project details into one all-in-one document
Dedicate full pages to each component's deliverables for easy reference
Use diagrams, mockups, and annotated visuals to explain components
Include clickable demos so clients experience the flow, not just read about it
Minimize text and prioritize visual communication
Connect pages to create a cohesive journey tying components together.
Designing a Clearer Path Forward
IDEATE 🖌️
User Flows
Using research insights, I mapped the existing workflow to identify confusion points, then refined the flow to clarify entry points and guide users through information progressively.
Refined user flow
I validated this with the Senior Experience Designer before moving into interface exploration.
IDEATE 🖌️
Rapid Sketches
I sketched multiple interface concepts to solidify my design vision before wireframing.
IDEATE 🖌️
Mid-Fi Wireframes
I then moved into creating wireframes, where I explored different layout patterns and interaction models over several days of lo-fi and mid-fi iterations.
This phase involved close collaboration with the senior experience designer, CEO, and project managers to ensure information was presented effectively.
Refining Through Critique
FEEDBACK 💬
Design Critique
Next, it was time to get some formal feedback from the team.
I found it effective to hold two separate critique sessions:
With the senior experience designer (focused on usability)
With project managers and CEO (focused on content and business needs)
This helped identify usability issues, confirm business alignment, and gather improvement suggestions. These discussions directly informed key design decisions and helped refine both the interaction model and information architecture.
ITERATE 🔁
Design Decisions
Design decision #1: information architecture: one flow vs. separated flows
How should the system present briefing information and detailed deliverables?
Incorporated within one flow
Easier for users who want all information at once
Frustrating for users who only want definitions
Too much information increases cognitive load
Separated flows
Less information upfront, users can learn more if needed
Supports both quick scanners and deep divers
Opening in new tabs allows easy navigation between flows
Why seperated flows:
Our users are typically rushed and want to understand quickly. Separated flows let them consume essential content first, then explore details in a separate tab if needed. This approach served both workflows, whereas the single flow only suited users willing to sit through everything.
Key considerations:
How do we serve users who want full information and users who just want key definitions?
What's the minimum information needed for initial understanding?
Design decision #2: content ordering: lead with deliverables vs. sample visuals
How should additional content be ordered to ensure clearest understanding?
Lead with deliverables
Users lack context to understand what's being communicated
Lead with sample visuals
Provides context before introducing technical details
Consistent with initial flow structure (demo → explanation)
Why leading with samples:
Users needed to see project examples before understanding deliverables. This provided necessary context for technical jargon and helped users comprehend subsequent screens more effectively.
Key considerations:
If a user opens this without ever contacting wonderMakr, will they understand what's being communicated?
Does the order support learning for first-time users?
Design decision #3: dieline presentation: scrolling vs. tapping
How should dielines be presented for ease of understanding?
Scroll through interaction
Difficult to quickly review all sides
Cannot see all sides at once
Scrolling disrupts workflow and prolongs task completion
Tap through interaction
Easy to quickly review all sides
Previews all sides at once for discoverability
Why tap through:
This design supported users' goal of quickly understanding the system. Tapping is faster than scrolling and provides an overview of all sides simultaneously, improving discoverability.
Key considerations:
Does this support workflows requiring fast navigation?
Can users easily compare all sides without unnecessary interactions?
Design decision #4: interaction pattern: mouse hover vs. badge scan
How should we present the microsite demo to teach users how it works?
Mouse hover
Simpler interaction
May confuse users about the real-world interaction
Badge drag/scan
Resembles the actual physical interaction
Helps users visualize the real experience
Why badge interaction;
We chose the drag-badge interaction to prevent false mental models. This accurately simulates how users engage with the scanner in person, which will help clients visualize how the digital experience translates to the physical world.
Key considerations:
Does this interaction create accurate expectations about the real-world experience?
Will users understand this is a demonstration of physical interaction, not just a digital-only feature?
Design decision #5: visual continuity: building off the home page
To improve context and flow, we redesigned demo pages to build off the home page vending machine visual. This explicitly points to the sections referenced on the homepage and helped users understand where they were in the experience.
Design decision #6: interaction guidance: adding a pointer
To guide users through demos, we added a bobbing finger animation indicating where to start the interaction. We also redesigned the badge to resemble a real physical badge, further reinforcing the real-world connection.
Bringing the Experience Together
PROTOTYPE ▶️
Final Designs
The redesigned onboarding is a fully interactive document that all stakeholders can access and navigate based on their needs.
Key improvements:
Users are guided step-by-step rather than overwhelmed with information
Interactive demos of real-life interactions drive understanding
Progressive disclosure supports different user needs
Serves as a single source of truth teams can reference in meetings
What This Project Taught me
REFLECTIONS 💡
Lessons Learned
Information hierarchy directly impacts comprehension
Through iterations and feedback, I learned how critical it is to guide users through content intentionally. When information was presented all at once or scattered, users struggled to understand the document's purpose. By establishing clear visual and content hierarchy (starting with key takeaways and gradually introducing details) users could follow and retain information more effectively.
Design for edge cases early
Interactions relying on specific input methods can introduce critical limitations if not evaluated early. The badge-scanning interaction worked well for desktop but surfaced functional constraints when considering touch-based devices. This reinforced the importance of identifying device and input limitations during initial design, not after committing to a specific interaction pattern, to ensure solutions scale across platforms.
Stay flexible and detached from solutions
Once it became clear the drag-based interaction wouldn't function in mobile contexts, I had to step back and reconsider how to achieve the core intent through alternative patterns. This experience emphasized that adapting to constraints and evolving requirements isn't a setback, it's an expected and necessary part of the design process. Staying detached from initial solutions allows for stronger outcomes when constraints emerge.
REFLECTIONS 💡
Next Steps
Validate through usability testing
Due to the tight timeline, we didn't conduct usability testing with clients. I would recruit clients new to xVend projects to test first impressions and comprehension. This would identify exactly where confusion occurs and how to improve the experience.
Finalize a PDF version
Many users aren't familiar with Figma or prefer traditional formats. The next step is refining the exported PDF to maintain clickable interactions in the static version.
Design for responsive contexts
I would explore how the badge-scanning interaction could be adapted for mobile devices. Since the interaction relies on hover detection, alternative patterns such as tap-based triggers or guided states would be needed to preserve the interaction's intent on smaller screens.
Plan for content scalability
Initially, I focused on the microsite, dielines, and prizing matrix, which were the most confusing areas for clients. Moving forward, I'd like to scale this document to add sections on shipping & logistics and the copy deck to create a complete reference for wonderMakr's xVend projects.
