ROLE -

UX Lead, Content Strategy

PROJECT TYPE -

E-commerce/ Responsive Web /Retail

TIMELINE -

Apr 2017 - Nov 2017

AGENCY -

Deloitte Digital

WEBSITE

lululemon.com

PROJECT IMPACT -

Increased conversion from 2% to 3.6% Lululemon's Q4 Report

THE ASK

Retain traffic & increase conversion on lululemon.com

“ Our current online sales are declining and revenue is only driven by brick & mortar stores. Our stocks have dropped by 21%.”

lululemon pioneered a new category of yoga-inspired clothing in the early 2000’s. Soon there was a quick line up of new and existing brands (like nike, Adidas etc.) targeting the same customer base.

In the world of e-commerce, lululemon was struggling to resonate with their guests and merchandise highly innovative products. Unfortunately, a newly launched website(in 2016) further worsened this situation and led to a drastic decline in their online sales.

The ask for this project was to evolve lululemon’s online experience to a place that resonates with their guests. A place where customers don’t just shop but seek real inspiration, from real people and innovative products.

THE SOLUTION

Create a unified, inspire and shop experience

In order to increase engagement and drive conversion on lululemon.com Deloitte’s creative team - 2 creative directors and 4 UX designers decided to revamp the experience by building a storytelling platform. My role was to design an entire component system for lululemon’s landing pages, and support content strategy. I designed -

13

DESIGN COMPONENTS

7

DURATION OF MONTHS

3.6%

INCREASED CONVERSION

THE CHALLENGE

Quick but big wins in 7 months!

TL;DR

A fixed launch date and ambitious scope led to an intense environment, accompanied with lots of coordination & overhead.

lululemon came to us with a dire need of speed to market. The expectation was to go live before Thanksgivings. During this the company had multiple product launches in pipeline. The idea was to launch a new website right before the holiday season and chase a sales target.

Architecture wise, the decision was to follow two parallel feature tracks - design quick fixes on existing codebase (PDP pages, category grid pages, checkout etc.) and design a fresh platform to support content strategy on landing pages. I led the design for the content strategy platform and global navigation.

We followed a waterfall model, starting with design, followed by multi-level approvals, finally leading to development. Majority of the requirements were defined and driven by designers, while juggling collaboration with engineering team, e-commerce team and an executive posse.

INITIAL DISCOVERY

Brand & customer insights

Before jumping into design, it was important for us to understand lululemon’s brand personality and the kind of customers they cater to. We visited a nearby store and conducted a contextual study of the store. We also interviewed a store manager.

In addition to the contextual inquiry, we also had access to a lot of marketing material from lululemon’s marketing team on their targeted user base. This approach helped us map user behavior into 4 proto-personas to represent our user groups. Throughout the project these personas guided us to stay true to user goals and align stakeholders views of the customers.

See Detailed Personas

GATHERING INSIGHTS

Finding the missing pieces

Although we had a vague idea of the challenges that lululemon was facing, the why part was unclear. To gain a better understanding of the current problem, it was necessary to have a qualitative and quantitative perspective of the current state. Along with a co-designer we pursued the following approach -

HEURISTIC ANALYSIS
This exercise helped us uncover functional issues related to usability, performance time, interactions, information architecture, taxonomy etc.
COMPETITIVE ANALYSIS
It was interesting to see how some of the direct and parallel competitors were pitching and merchandising their products to the same user groups. This exercise helped us understand more about brand marketing and place lululemon on a continuum of who and what they represent as a brand
SOCIAL MEDIA LISTENING
Lastly, we were lucky to get our hands on some social listening thanks to our audience experience team at Deloitte. This was crucial to understand lululemon’s perception in the market and uncover motivations of their customers.

After gathering this data, the entire creative team got into a room and we prepared post-its to group similar issues. Aggregated data from above exercises helped us distill the scattered findings into three buckets - or what we decided to design tenets. These design tenets, along with findings were then presented to the client for an initial direction alignment.

These themes served us to strike a balance between user and business goals. We used them to identify foundational quick wins and define future opportunities.

REFRAMING THE CHALLENGE

Overarching problems

EXTENSIVE NAVIGATION

The navigation lacked visual distinction between categories. “Features” section had become a dumping ground category. This unordered, clutter caused cognitive overload on users.

SHORT & ABRUPT LANDING PAGES

Landing pages lacked action items and did not lead to logical flows. These pages were a crucial entry point but failed to anticipate multiple customer journeys.

GOOD CONTENT WAS HIDDEN

A lot of great, inspiring content was concealed behind the cryptic “Inspiration” tab. Relevant information related to products was not highlighted.

MORE ACTIONABLE FEATURES

Landing pages only had floating product cards and no other form of actionable buttons. This prevented user interaction.

In addition to above, there were several usability and website performance issue across the website. We revamped some existing features like My Account, Checkout etc. and built some new features to introduce a unique shopping experience. We also redesigned the mobile breakpoints and ensured the website followed accessibility compliance.

RE-THINKING NAVIGATION

Starting from the top

GRASPING INDUSTRY KNOWLEDGE

In order to suggest a more user aligned solution for nav, understanding lululemon’s product catalog was not enough. We wanted to design a solution that was generic enough but also specific to lululemon.

Example of product categorization study for Jackets.

HIGHLIGHT BREADTH & DIVERSITY OF PRODUCTS

We aimed to design precise filters by uncovering more distinct product attributes and surfacing the ones that matched users’ conceptual model. With the backing of industry standards, I led conversations with the e-commerce and brand team to leverage insights about customer's shopping habits and drive decisions based on it

Initial explorations for product filters.

Re-designed navigation and taxonomy updates in Axure

ANTICIPATING USER BEHAVIOR

Mirroring the store shopping experience on web

“The brand produces a lot of seasonal, evergreen rich content for their new launches. Current landing pages lack an interactive & inspiring experience.”

— lululemon Marketing Team

lululemon redirected a majority of customers to their landing pages, intending to drive conversion. Their most popular entry points included social media, campaign ads, search engines etc. However, their heat maps suggested extremely low customer engagement.

The solution to lululemon’s was identified as a system of interactive and intention-driven components to showcase regular and fresh content.

DESIGN FRAMEWORK

We adopted the atomic design approach to build a design system that comprises of diverse components. These components can be combined to build templates and pages.

Adopted from Brad Frost's Atomic Design concept

CONTENT STRATEGY + DESIGN

Context is the key to content

“The most important part of this project was understanding the content’s value and then ensuring that it’s rendered in an appropriate context. ”

Previously conducted client workshops, helped us communicate and validate our overall design direction. This also gave us a clear idea of what the business goals for this project were - sell more and educate customers. User goals on the other hand can be translated into improving usability and visibility of content.

With the above context, I performed a detailed content audit of the existing website and distilled it into diverse kinds of content that the client was producing. As a strategist, I tried to learn about the audience and then think how can content deliver it.

Initial on-paper ideation of templates and component types.

A crucial (and difficult!) part of this process was collaborating with back end developers. As much as it helped us understand the CMS system’s capabilities and shortcomings, we got a lot of pushback from lululemon’s developers. Producing detailed and updated documentation and regular check-in’s was our approach to ensure clear communication.

TOP-DOWN APPROACH

I took a top-down approach to find out what kind of components would be required to match both user and business goals. We sketched out a customer journey to understand how a user could be inspired to follow a more intentional shopping path. I used this journey to suss out different pages and their respective goals.

DESIGNING FOR SCALE & FLEXIBILITY

lululemon was creating a lot of seasonal content, hence it was crucial for us to keep flexibility in mind while designing these components. We collected input related to product launches, target user groups from a lot of internal teams and agencies like Chandelier Creative. This made us realize that the components needed to be versatile enough to scale across diverse subjects.

Glimpse of components designed in Axure.

Component wireframes were the source of truth for all teams including client side - branding, marketing, e-commerce and internal teams .

One of the intermediate deliverables was a library of components in Axure with details like usage of the component, its variations, content requirements, interaction, placement, etc. This library ensured that all stakeholders stayed on the same page.

Component Library built in Axure - 1) Component Index 2) Component Wireframe 3) Component Description

MINIMIZING GOVERNANCE

Defining requirements ..

“A lot of functional, including back-end and front-end requirements were defined along the way while designing the components.”

During this project, we followed a design-first approach in the true sense. While designing, I engaged in detailed understanding of AEM's technical constraints which helped me think of governance issues that the teams could run into. There were certain design of trade-off’s that I made to ensure minimum governance.

These functional requirements were first defined in the Axure prototype and then translated into a wiki. I updated this wiki constantly to ensure there were no gaps.

Axure Component library with governance requirement details built by me.

TRAINING CLIENTS / GOVERNANCE STRATEGY

Story page recipe ..

“Think of every story as a potential landing page. Start with your goals and story, then map them to page types, components and component usage.”

Content Strategy is like telling a story - it needs a beginning, middle and end.

Based on the above concept, I designed components across 3 buckets - editorial (beginning), merchandising (middle) and navigational components (end).

While detailing the usage and role of components, we stress tested them in different permutations, and actual content generated by lululemon’s marketing team. This helped us demonstrate diverse flavors and stories - new product launches, campaigns, lululemon's inspiring ambassadors, new designs, technology, seasonal launches and many more.

Along with our Creative Director, I built a detailed content strategy deck that showcased use of components as ingredients and a process to build a "story" page recipe.

Example of Landing Page Template & Component Use

THE DELIVERABLES

Documentation and Design QA

The entire design system and content strategy was translated & documented in an online component guide.

As the final deliverable, I created an online component guide in collaboration of our functional analyst. The intent of this guide was to help the client's back-end, brand, marketing and e-commerce team reference and align on any overlapping details. I also performed a detailed design QA and functional testing of the components built with actual content to raise any flags prior to launch.

Component guide/wiki documenting all the components and page templates.

THE LAUNCH

Final design

By the end of September, we had designed and delivered a lot of new features. The details of some of them have been omitted as some were adopted and few left for future scope. I also worked with the Creative Director to deliver an expansion plan that pitched some “What’s next?” ideas to the client. Here’s a quick glance at some of the features delivered.

Desktop breakpoint. Created by Hayato Itakura. Design contributions by the creative team.

Mobile breakpoint. Created by Hayato Itakura. Design contributions by the creative team.

THE IMPACT

Increased conversion from 2% to 3.6%

“Lululemon was one of the biggest, most successful and impactful projects in the past 5 years for Deloitte. The overall project and design model was presented to a lot of PPDs at the firm. In the shortest time, a site was launched with no major defects, within expected time and budget and with a very senior team.”

— Andy Main, Head of Deloitte Digital

Growth returned to lululemon within the first three months of Deloitte Digital’s engagement. A series of rapid releases helped to establish stability, structure and visibility to the digital organization and created immediate impact to the business value, including growth in email customer lists and an increase in conversion. For Black Friday lululemon's goal was 4 million but managed to make a 6.25 million.

See Lululemon's Q4 report

ACCOUNTED PRODUCT CATALOG EXPANSION

Flexibility created for the business to take on additional category expansion and an accelerated future roadmap empowered executive leadership to change perception in the market.

Overall this was a very fast paced project and the scope that we successfully delivered was up and above.

< prev / next >