lululemon Digital Store Pages
Connecting online and in-person shopping
Overview
lululemon “experiential” stores offer a unique shopping experience with fitness classes, dining and events. All of these stores have their own “digital” store page. The experiential stores naturally have different considerations than standard store digital pages.
The Ask
I was tasked with redesigning the digital experiential store pages to improve discoverability, awareness of services and provide a template for future stores that required significantly less development effort for future content updates.
The Result
After two months I delivered a redesigned experience that showcased these stores’ unique offerings, improved discoverability and optimized for reuse by utilizing the design system.
The Problem
The experiential store page needed a new design that utilized the design system to decrease developer time needed for future content changes. Since page views and content engagement were low compared to overall site traffic, we also wanted to improve discoverability and content strategy.
My Role
I was the lead UX designer and collaborated with a team of two other designers, two researchers, five developers and one product manager. I was responsible for every UX aspect of the project; from user research and content strategy to a high-fidelity prototype.
My responsibilities included:
Research design and user interviews
Competitive analysis
Content strategy
Wireframes
Prototype
The Process
To ensure alignment with stakeholders, the Product Manager and I collaborated on the UX and product briefs, required UX inputs, timelines and outlined expectations. We setup weekly meetings to address any road blocks and to check on progress.
Preparing with Research
What can we learn from the existing research? Where are the gaps?
I identified the research gaps after sifting through existing research reports and our analytics dashbaord. To build upon this knowledge, I took the existing design through usability testing and conducted a competitive analysis. We wanted to learn:
What level of awareness do users have about the experiential stores?
What information are users most interested in seeing on this page?
Does the current amount of information provide enough confidence for the guests to take action?
How are competitors displaying store information and offerings?
Testing Insights
Overall, I was surprised that user sentiment was relatively positive about the existing page.
However, the testing did confirm some discoverability flaws and ways to improve confidence for engaging with content.
From the competitive analysis, there were not many direct product comparisons. However, I did learn our store page could benefit from streamlining the user journey; help me find nearby stores that offer services I’m looking for.
Make experiential stores more obvious when searching. Users struggled to notice experiential stores on the “Find A Store” page.
Users enjoyed the current amount and depth of information. Participants were able to understand what was offered.
There was a strong desire to see more photos. Many participants wanted to see more photos of the spaces themselves to know what to expect.
Defining the Details
Scope
The discoverability component of the “Find A Store” page was initially out of scope. After learning through the research what a critical role this page played in the overall experience and learning it’s importance for business goals, I pivoted to include this page in the redesign.
User Goals
Learn store hours and address so I can plan my visit
Understand what services, classes and/or events are happening at an experiential store
Sign up for an event or class that I’m interested in attending
Business Goals
Have users learn about unique experiential store offerings and take action on in-store services and/or offerings
Increase awareness and discoverability of experiential stores
Ensure experiential stores are clearly differentiated from standard stores
Design Iterations
The Setup
To organize my thoughts, I first outlined required page elements by drawing from what a standard store page must have. I then listed all the possible content requirements for each experiential store.
Lo-Fi Wireframes
My initial designs were mainly concerned with the content strategy/layout. I wanted to ensure the users were receiving the right information in at the right time.
Since this was a relatively straight-forward single page design, I rapidly iterated on layout ideas.
Frequently looping in my design and developer teams for feedback sessions was crucial for catching potential issues early.
Hi-Fi Designs & Prototype
I created high fidelity designs after gaining alignment on the lofi designs with our tech, business and product partners.
Beginning with mobile, I kept the focus on providing content above the fold that communicated what an experiential store is and what services they offer.
As users work their way down the page, they see expected basic store information to plan their journey. Further down, I provided additional information about the store spaces as was done in the original design. It was important to me to listen to the research and not mess with what was working well.
Usability Testing
Usability testing was my next step to ensure what I designed met our user needs and expectations. Collaborating again with my research partners, we created a research outline with these goals in mind:
Does the visual emphasis placed on the label ‘experiential’ in the find a store search results increase users’ ability to notice there are two types of store?
Are users able to successfully find all the information they need?
Do users understand what an ‘Experiential Store’ is after viewing the store page?
What might be missing from the current designs?
Usertesting.com test recording
Research Results
I was surprised to find there were no critical changes to address based on the research. However, testing did reveal particular copy and content considerations to improve discoverability and confidence in services.
Since I was on a tight timeline for this project, I made sure to communicate these less critical content recommendations to the larger stakeholder team to implement later on.
Presenting to Stakeholders
Presentation artifact & Figma annotations
To leave the larger team with a clear understanding of the user research and design decisions, I provided annotations across the different design states in the Figma file. I also created a presentation artifact reviewing future content recommendations in greater detail.
It was important to make sure the stakeholders impacted by the redesign understood my design decisions and rationale. I also wanted to leave them with valuable usability testing insights to consult for content tweaks and future improvements.
Figma annotations
Presentation screenshots communicating design rationale & user research
Prototype
Desktop
Mobile Web
Final Thoughts
If I had more time I would’ve liked to dive deeper into improving page discoverability as it’s a critical component to raising experiential store awareness.
I also would have looped in the brand team sooner to ensure the delivered copy fit in well with the design.
No project is perfect. While this design is a step in the right direction, Adobe analytics from post-launch can reveal more about these engagement and discoverability improvements.