Challenge
MikMak was strategically expanding from grocery brands to other categories, with a primary focus on alcohol. This expansion required a superior in-store product locator experience, as most alcohol sales occur in physical stores, and involved integrating with the largest alcohol data provider. This project was not just about adding a new feature but enabling a significant business expansion.
We needed to integrate Vermont Information Processing (VIP), the leading alcohol retailer and distributor data source provider, into the MikMak platform. This would expand our retailer data providing a better user experience for shoppers and allowing our customers and brands to learn more about shopper behavior.
Key challenges included:
- Pre-Contract Evaluation: Understanding VIP's data capabilities and integration requirements
- Enhanced Data Needs: Expanding beyond traditional liquor stores to include restaurants, bars, and other venues
- User Experience: Creating intuitive experiences for both shoppers and brand customers
- Business Goals: Enabling quick customer launches and omnichannel shopping experiences
My Approach
I led an end-to-end design process with an innovative testing framework that expedited feedback and ensured user-centered, technically feasible solutions.
Rather than building prototypes first, I tested directly on existing brand websites with live VIP integrations. I examined how VIP data was used on alcohol brand websites (Absolut, Jonnie Walker, Firestone Walker, Stone Brewing), focusing on identifying the most intuitive patterns.
Using Usertesting.com with targeted audiences (e.g., "purchased vodka in past 30 days"), I validated core interaction patterns before investing in detailed prototyping. This innovative early testing approach became a key part of my practice for expediting feedback.
Understanding user needs was paramount. For consumers, this meant easy access to all nearby stores, the quickest path to purchase, and readily available store contact information. For brands, the goal was to gain deeper insights into the customer's path to purchase for better attribution.
My approach was also guided by key hypotheses: that a smaller default search radius would reduce cognitive load for users, and that a "Get Directions" feature would provide valuable data points on shopper intent for brands.
Auditing Existing Pages We audited the existing MikMak page for potential opportunities to incorporate and leverage the new VIP data. We kept in mind the existing product and sought to make improvements in areas most beneficial to people in real life.
Data Driven Decisions: Map View User testing revealed a strong preference for map view over list view for locating retailers, as it provides better geographical context, especially when zip code-based lists are inaccurate. While map view was the preferred default, we aimed to integrate the detailed information from list view, for example, by having a map pin click reveal more details. We also considered scenarios where users might not grant location permissions.
Creating a Mobile Clickable Prototype to Test Error States After analyzing user tests, I distinguished between essential features and nice-to-haves. This interactive prototype was built for the next testing phase, emphasizing the importance of a distance dropdown and utilizing common single-click filters.
Testing Different Scenarios Finally, I began testing different scenarios such as no retailers available because that was causing confusion in the testing. The clickable prototype was built from a single frame and utilized interactive variants in Figma for efficiency. Upon further review, this may have been overengineered, and it's something I have learned from.
Handoff Documentation for Engineering Thoughrough documentation was created to ensure a smooth handoff to the engineering team. This included detailed descriptions of the user flows, edge cases, and expected behaviors for each scenario. The goal was to provide clear guidance to the engineering team, ensuring they understood the design intent and could implement the features accurately.
Visual Quality Assurance I developed a new Notion template for meticulous bug tracking during VQA. Collaborating closely with QA and engineering, I provided detailed reports with screenshots and videos to ensure issues were resolved efficiently.
Final Production Version The final production version as seen on sierranevada.com incorporates many of the elements discovered early on, while also adding new features as found to be important throughout the user testing.
Results
The enhanced product locator, featuring robust VIP data integration, launched smoothly with minimal usability issues, a direct result of the iterative testing and design process. This pivotal update significantly boosted MikMak's competitive edge in alcohol e-commerce. It empowered major beverage brands to effectively guide shoppers to nearby purchase locations, thereby expanding omnichannel opportunities and providing richer data insights into consumer behavior for in-store sales. The project's success also led to the internal adoption of its innovative testing methodology for future initiatives.
Learnings and Takeaways
- Leverage Existing Patterns: Speeds up initial feedback.
- Innovative Early Testing: Validate patterns on live sites before prototyping.
- Early Engineering Collaboration: Avoids wasted effort, adds constraints.
- Strategic Hi-Fi Prototyping: Validate core patterns first, then prototype.
- Test Edge Cases: Design clear feedback for "dead end" scenarios.
- Clear Documentation: Crucial for successful implementation.
