.png)
Overview
Client
Lululemon
Location
Seattle, Washington USA
Role
Senior UX Designer
Tools
Sketch, Sketch Cloud, Zeplin, Anima Timeline
Timeframe
6 months
Story
Problem
Lululemon, the Fortune 500 yoga brand, was growing fast and needed to quickly design e-commerce sites for their international customers, beginning with Japan, France and Germany.
Challenge
Design an international e-commerce site on a Salesforce framework, without a style guide and without emulating the existing North American site, under the pressure of a tight deadline and fast sprints.
Outcome
I owned the checkout flow, account pages and region selector for sites launching in Japan, France and Germany, generating expected millions in revenue for lululemon. Together with a teammate who owned the product pages, I drove creation of an International Style Guide for future development.
Design Process
Teamwork and project coordination
Coming in midway on a project with tight deadlines and high business stakes, I took ownership of localized checkout flows, account pages and region selectors for Japan, France and Germany.
Working in tandem with the product page team, Deloitte project managers, offshore engineering teams and the Design Director in fast sprints, I designed, tested and delivered three accurately localized account and checkout experiences.
Testing and iteration
Designing within the constraints of a research-backed, Salesforce platform, I consistently advocated for improved solutions when appropriate, supporting my recommendations with examples and research.
While my involvement concluded before formal user testing began, I took advantage of an open office plan for informal testing and observation, constantly iterating for the best solution.
International Design System development
In designing for Japan, France and Germany, we needed to reference the existing lululemon North America visual style without emulating its functional patterns, built on a Salesforce template.
In the absence of an existing design system, I led the formulation of a style guide and library to guide functional, consistent and impactful use of patterns, grids, text, buttons, brand colors and other design elements, supported by a clean layout.
Design highlights
I designed an order history UI featuring thumbnails to enable authenticated guests to see what they had purchased at a glance.
Order History Visibility
Final Order History designs, desktop and mobile
To arrive at the above solution, I gave my Design Director several layouts to choose from. We landed on showing 2 thumbnails with a + placeholder to see more order items.
Iteration
v1: Ellipse
Pro: Easy to implement
Con: Easy to miss
v2: Carousel
Pro: Comprehensive
Con: Fiddly to use
v3: 2 images +
Pro: Easy to understand
Pro: Invites clicking
Pro: Easy to implement
To resolve how to display countries with multiple currencies without disrupting the existing accordion structure, I designed a drawer-style interface for mobile and a dropdown for desktop.
Multi-currency Region Selector
Desktop view with dropdown menu (detail)
Mobile accordion view
I owned testing of the checkout flow across desktop/mobile, authenticated/guest views, for the US, Japan, Germany and France. I created annotated screenshots and documented issues in Confluence (for lululemon stakeholders) and Jira (for Deloitte engineering teams).
Front-end review
Desktop view showing artifacts of Salesforce template and bug fix notes for developers
Logging issues in Jira for offshore engineering teams
Visual redline guidance, mobile
Pre-Figma, working in Sketch and inspired by Brad Frost's Atomic Design, I led the formulation of an International Design System to guide consistent development going forward, focusing on a clean layout, clear button UI and judicious use of brand colors.
International
Design System
International Design System creation in Sketch
Button UI: Non-competing actions
Button UI: opposing actions
Button UI: Single call-to-action
Outcomes
Success
✅
Successfully launched accurately localized international checkout flows for Fortune 500 platform processing 5 million+ payments globally
Creation of International Style Guide ensures consistency of brand
experience across global digital touchpoints
✅
Celebrating "Diwaloween" with co-workers in lululemon's Seattle office
View of Elliott Bay from lululemon's Seattle HQ
Challenges
🔴
🔴
🔴
Designing accurately localized purchasing flows for busy international e-commerce sites
Coordinating design with multi-functional teams under urgent deadlines, within platform constraints
Designing with red as a primary brand color while ensuring clarity of semantic functions
Key learnings
⭐
I distinguish between true constraints and flexible requirements; what seems confining ultimately clarifies and strengthens the design.
⭐
Mobile informs desktop, and vice versa. (For example, how do stacked elements in mobile translate into desktop? How can spaciousness in desktop inform mobile usability?)
Building stakeholder support is key to implementing meaningful changes, regardless of scale
⭐
