Weedmaps eCommerce
Direct to Consumer
I had the pleasure of joining the talented WM Store squad to define design solutions for our first loyalty and payment integrations.
WM Store serves Retailers and Brand Owners. It’s eCom PaaS enables clients to customize their online ordering store’s appearance and manage menu, payment and loyalty integrations.
In this second product iteration, a big focus was aligning styles and components with our Style Guide. The retail locator experience and checkout journey were also audited for usability. We discovered opportunities to reduce friction points and add helpful context for consumers along the way.
Project Background
THE GOAL
Deliver design solutions that enable payment and loyalty integration features for both consumers and clients.
THE DESIGN CHALLENGE
Work across teams to ensure these new features can be supported holistically so that engineering and design share patterns.
SUCCESS METRICS
Grow payment and loyalty adoption by clients and consumers. Help consumers get more value with each purchase while growing customer retention. Drive order frequency and through-put.
DURATION
5 months
TEAM
1 Product Manager
1 Senior Product Designer
(My Role)1 Senior UX Researcher
1 Senior Engineering Manager
3 Front-End Engineers
3 Back-End Engineers
Legal team
SOFTWARE
Figma, Atlassian, UserTesting, Google Docs
Design Process
What did we start with?
Version 1
Our first version was built directly in code without design specs, leading to a number of usability issues. New design assets and accessible styles needed to be defined to give engineers clear direction for version two.
Inline Retail Locator
The original retail locator experience was occurring on product detail pages using inline anchoring. On pages with longer content, this interaction was disorientating. After locating, it gave the page state a dual identity. Additionally, the retailer list was missing our jackpot marketing, which spotlights each regions premium retailer.
Dark Theme
The dark theme styles in v1 were set up by our engineering team. In my audit, I found the colors being used were not aligned to our Style Guide swatches. I saw an opportunity to define dark theme by inverting our light theme specs.
WM Design Style Guide
WM Store happens to feature WM’s first consumer facing dark theme. I needed to help define proper guidelines for how color should be applied going forward.
Design InspIration
Design goals
Optimize retail locator experience
Support jackpot retailer logic
Co-design checkout components with Orders design team
Define dark theme guidelines
Align components with Style Guide
Address accessibility issues
Encourage touch friendly interactions
Design mobile first
Wireframes
Custom components
UX Research
Before spec handoff, we partnered with our UX Researcher to get an objective assessment of our new solutions.
First, we validated that our optimized retail locator experience works as expected. Last, we validated that promo and loyalty rewards were discoverable in drop-downs.
In our study we found our participants rated our new retail locator experience 4.6/5 (Positive). While 100% of participants easily discovered the rewards in cart.
Final design
