Shoppable Storytelling
The goal is to create a component library, within our Design System, to enable product storytelling and shoppable content. We want to build a system with the guardrails needed to maintain usability and allow for controlled customization. A component system will create efficiencies for our partners, giving them the tools to tell their stories in a sustainable way.
Role: Lead UX Designer & Researcher
Teams: Marketing, Content, UX, Merchants, and Leadership
Design Process.
My UI/UX design process is a journey of understanding, creativity, and refinement. It starts with research, dives into wireframing and prototyping, iterates based on user feedback, and collaborates closely with developers for implementation. Continuous testing and refinement ensure the final product meets user needs and stays competitive.
Step 1: Define Scope
We met with all of our cross functional partners to define the scope of the project.
My responsibility was to represent UI/UX and collect the brand need to combine them with the customer ones.
Step 2: Compile Research
This involved analyzing competitors' digital platforms to identify trends, best practices, and areas for improvement, informing our design strategy.
Step 3: Prototype
Created interactive mockups and prototypes of the digital product to visualize design concepts and test user interactions.
I facilitated iterative design improvements, collaborated effectively with stakeholders, and ensured the alignment of the final product with user needs and project goals.
Step 4: User Test
Designed and conducted tests to gather feedback on the digital product's usability and effectiveness. Through user testing, I iteratively refined the design, ensuring it met user needs and expectations.
Step 5: Refine & Iterate
Evaluated the design based on feedback, data, and user testing results. By iteratively refining the user interface and experience, I ensured the product evolved to meet user needs and business objectives effectively.
Step 6: Support Technical Delivery
Collaborated with developers to ensure the seamless implementation of design elements and user interface components. By providing detailed design specifications, documentation, and guidance, I facilitated effective communication between the design and development teams.
Step 7: Test Live!
The experience was launched in production and A/B tested against a traditional shopping experience. We observed how customers interacted with the live experience and adjusted accordingly.
Step 8: Modify and Scale
We combined the live experience with moderated tests, voice of customer surveys, and data & analytics tracking. By compiling all of these inputs we refined the components to be scaled across the website.
Research Spotlight
Moderated studies where performed across the duration of the discovery process. Each round I gathered 5 consumers for 45 minute prototype reviews to understand how they shop for particular occasions and moments.
Research Highlights and Quotes
“I think that is super helpful as opposed to just like going to dresses and then trying to like figure out which ones are fancy enough to wear to a wedding.”
— Katie (Customer Interview)
“(It would be helpful to have) specific wedding filter or, um, you know, a, if it's a black tie wedding or stuff, like stuff along those lines of like specific occasions or events that, um, can be filtered.”
— Emily (Customer Interview)
Customer Needs
Customers come to our website to “Shop, Not to Read”. We must provide curated pathways to shoppable elements
Customers think of assortment in different ways that assortment is typically presented to them. For example, occasions, themes, seasons.
Shopping for event wear is a different process than traditional shopping. It’s typically more curated and has a higher spending.
Brand Needs
Brand needs to showcase Romantic and thematic imagery
Brand needs help reducing effort in creating these bespoke experiences and streamline the process of creating collection pages.
Brand wants to differentiate experience from traditional shopping
