The Lists feature streamlines the shopping experience and increases user interaction.
Interaction Design:
Collaborative Shopping List Feature
Adding a social feature for Zola to enable
group purchases.
Overview
Is it just me or does it feel like everyone is in a post-pandemic frenzy to finally have that wedding that’s been postponed for three years? My friend, Trace, is a bride-to-be and has been texting links from Zola to our friend group.
What follows is a chain of clunky actions where each of the bridesmaids view and screenshot the item and then send comments in our Whatsapp group.
I started to think about how to make the group shopping experience on Zola more seamless by adding a social Shopping List feature to it.
Objectives
Add a collaborative Lists feature to Zola to improve the user's shopping experience.
Drive user interaction and acquisition through group purchases.
The Results
The Lists feature allows brides (and grooms) to create and share a list of saved items with their bridal party for a collaborative shopping experience.
Users can interact with each other on Zola and place group orders for the same event e.g. a bachelorette party.
Improves and streamlines the shopping experience by reducing time spent off-app coordinating choices and collecting payments.
Increases time spent on the app and drives new user acquisition by encouraging bridesmaids to also shop on Zola.
Zola, an online wedding registry, wedding planner, and retailer makes a 20% - 40% commission by selling experiences and items from partner vendors in its eCommerce store.
User Interviews Revealed Several Pain Points
To better understand Zola's users, I recruited 5 participants who were either engaged or a bridesmaid in an upcoming wedding. All five participants have used Zola, but only 3 had signed up for accounts. The participants live in the Bay Area, New York, and Miami and were between the ages of 29 and 36 years old.
Insight #1
Planning a wedding is very collaborative and social. 80% of the interviewees said that they consult with others on their purchases, whether it's flowers and decor or their attire.
Insight #2
The bridal party is the "inner circle" and having an easy way to coordinate and communicate with the inner circle about wedding-related purchases is key.
User Persona
After getting to know the users, I created a person for Trace, a bride-to-be, planning her bachelorette weekend. Trace is a busy professional and works in Operations at Tesla. Building a persona helps me keep Trace's needs top of mind when designing.
User Journey Map
I built a user journey map to understand what tasks Trace was performing and how she felt during each step of the shopping experience. Seeing the whole picture, I could identify that there were three areas of opportunity that I could address with a new feature.
Feature Requirements
To determine what the feature would include, I addressed how might we help Trace do the following:
save items in self-determined categories
share the list and gather feedback from her bridesmaids
allow her bridesmaids to personalize selections from the list and add items to her cart
manage list preferences and permissions
User Flows
Before setting out to design any screens, I had to map out the path that the user would take in order to complete a task. In this case, I wanted to show you how a user would create a new list and where it would occur in the existing user flow. By building a user flow, I could see what design would be needed for each screen/step for the user to complete the task and where I would need new screens or designs.
Evaluating Existing UX/UI
With the user flow to help inform my designs, I evaluated the existing Dashboard screen to determine where “Lists” would live and landed on the "Registry and Shop" section:
Users indicated that they would share and update "Lists" more frequently than "Registry," so I added a link to Lists on the bottom nav menu for quick access.
Sketching to Validate Designs
I set my timer for 20 minutes, and I rapidly sketched the screens I would need based on my Product Roadmap. Below are the sketches I chose to move forward with for how a user would create and save items to a list:
Wireframing & Peer Feedback
As I was wireframing, I changed the design of the "List" screen from my original sketch to look more like the existing UI on the "Boutique" screen. I then quickly got some peer feedback on my wireframes, and I've highlighted below some of the updates I made:
Prototyping
Once I had my wireframes done, I set out to create a high fidelity prototype of the different user flows. Below is the prototype for adding an item to a new list. The user can browse items before creating lists since that's the better user experience and then select the item to save and that would navigate them to the "Lists" screen where they could choose an existing list or create a new list. They can then share the list. See below for this task flow:
Usability Testing
I conducted usability testing and revised my designs yet again. Below is a snapshot of the "Confirmation" screen before and after usability testing.
The Final Design
The Lists feature allows brides (and grooms) to create and share a list of saved items with their bridal party for a collaborative shopping experience.
✅ Users can interact with each other on Zola and place group orders for the same event e.g. a bachelorette party.
✅ Improves and streamlines the shopping experience by reducing time spent off-app coordinating choices and collecting payments.
✅ Increases time spent on the app and drives new user acquisition by encouraging bridesmaids to also shop on Zola.
