Shareable Shopping Bag

It Works! Connect App | 2023 | Lead UI/UX Designer

As the Lead UI/UX Designer, I designed a user-friendly app feature that allows Distributor users to easily create and share customized shopping bags with their customers. This feature streamlined the shopping experience and enhanced customer satisfaction, ultimately increasing engagement, retention, and driving sales conversions.

Jump to Prototype

Role

Lead UI/UX Designer

Duration

1 Month

Screens

Tools Used

Stage 1: Gather Insights

Discovered Users' Need for Seamless and Streamlined Sharing of Curated Product Lists with Customers

Overview

Defined User Needs

Automation
Customization
Ease of Use

Established Research Goals

Survey users to understand expectations
Identify challenges users may face
Assess technical feasibility and align with company goals
Analyze existing competitor features

Research Approach

I focused on developing a research strategy to gather valuable insights into user needs and behaviors. I planned to conduct user interviews and surveys to identify pain points and collect feedback, while also conducting a competitive analysis to understand industry trends and product benchmarks. These research efforts would help in creating user personas and mapping out user journeys to ensure the design would meet both user needs and business objectives effectively.

Goals For My Research Process

Conduct user surveys to explore users’ expectations around the new feature and functionality.
Investigate the key needs and challenges distributors would face in creating and sharing customized shopping bags with customers.
Analyze current features offered by competitor apps and websites
Collaborate with stakeholders to assess the technical feasibility of the feature and ensure it aligns with the company’s goals.

Discovering User Needs

In order to understand both the users' needs and pain points as well as the business objectives we conducted a combination of user research, customer surveys and market analysis.

Establishing User Needs

Automation: Users need the ability to automate tasks, reducing manual effort and improving efficiency.
Customization: Users need full control over personalizing shopping bags to customize them based on specific needs, enhancing usability and satisfaction.
Ease of Use: Users need the feature to be intuitive and simple, allowing both distributors and customers to easily create, customize, and interact with shopping bags without complexity.

Stage 2: Define

Identified Key Features Desired by Users, Such as Notifications and Customizations, That Align with Business Goals and Constraints

Overview

Technical Restraints

Product Availability Updates
Static Products and Promotions After Sharing

Essential Features to Include

Show a summary of shared items before user shares bag
Add messaging, language, and country customizations
Notify the user once the recipient clicks on the shared bag

Defining the Problem

Distributor users often struggle with effectively sharing product selections, promotions, and personalized offers with their customers. The absence of a streamlined, efficient process makes it difficult to provide a tailored and convenient shopping experience, which can result in missed sales opportunities and reduced customer engagement.

The Challenge

The goal is to design a shareable shopping bag feature that allows distributors to easily share curated shopping carts with their customers. The feature should include customization options, such as personalized offers, and provide tracking capabilities for engagement, all within a user-friendly interface.

Technical Restraints

Static Products and Promotions After Sharing

Challenge: Once a shareable shopping bag is sent, any changes to product availability or promotions (e.g., out-of-stock items or expired discounts) will not update in the shared bag.

Consideration: Since the shopping bag is static once shared, users may encounter issues like items going out of stock or promotions ending after the bag is sent. The app needs a system to notify users of such changes and offer options to update the shared bag, ensuring transparency and minimizing frustration.

Product Availability Updates

Challenge: Handling real-time updates on product availability, prices, or promotions for an existing shareable shopping bag.

Consideration: Due to delays in stock updates, users may add products that appear available, but by the time the shared bag is accessed or purchased, the item could be out of stock. The app needs to manage these delays, alert users in real-time, and offer alternatives or notify users if the item becomes unavailable.

Defining Key Features and User Needs

Customers Want to See a Summary of Shopping Cart

Users wanted to view a quick summary of the items they were sharing, including key details like product names, images, and prices. Some felt uncertain about sending a link without seeing the full list of items.

Takeaway:

Include a clean, concise preview of the shopping bag before sharing. This preview should show product names, images, and prices, ensuring users feel confident about what they’re sending.

Customization Options Matter to the Users

Users wanted the ability to customize shareable shopping bags, particularly for language, country settings, and messaging, to ensure the content aligned with their specific needs and preferences.

Takeaway:

Allow users to customize the shopping bag with their preferred language, country, and relevant promotions, such as local currencies and region-specific discounts. This enhances user satisfaction and engagement across diverse audiences.

Users Want Notifications to Follow-Up with their Customers

Users wanted to receive notifications or updates when the recipient interacted with or opened their shared shopping bag, as it would allow them to track whether their sharing efforts were effective.

Takeaway:

Implement a notification system that alerts users when their shared shopping bag has been opened, clicked on, or purchased from by the recipient. This feature allows users to track the success of their sharing and feel more connected to the process, providing a more rewarding experience.

Stage 3: Ideate

Generated and Explored Multiple Design Solutions to Address User Needs and Challenges

Storyboarding

Using the user personas, I created storyboards to visualize key user journeys. Collaborating with stakeholders, we identified essential user stories for the MVP. Given a tight turnaround time, our team prioritized these user stories and developed user flows to ensure efficient and effective deliverables.

As a user, I want a way to easily share a pre-made product list with customers to convert them and increase my sales.
As a user, I want to update an existing shopping bag list to include a new product.
As a user, I want to change the country of an existing shopping bag list.

Shareable Shopping Bag Flow

Developed a user flow to map the key actions users would take when interacting with the new feature, focusing on creating a clear and efficient process for completing tasks. By identifying decision points and potential friction areas, I was able to simplify interactions and ensure a smooth experience. This approach helped prioritize essential actions and streamline the user journey, providing a strong foundation for the next design phases.

Low-Fidelity Mockups

I created low-fidelity mockups based on the user flow to visualize the core layout and interactions of the new feature. These mockups allowed me to focus on the overall structure and functionality, without getting distracted by detailed design elements.

Stage 4: Prototype

Refined the UI and Interactions, Focusing on Usability, Accessibility, and Visual Consistency.

Mid-Fidelity Mockups

Prototype

After the low-fidelity mockups were reviewed and feedback was incorporated, I used Figma to translate my sketches into mid-fidelity wireframes. At this stage, I focused on refining the layout and functionality, adding more detailed elements and basic interactivity. I also created an interactive prototype to simulate the user experience, allowing stakeholders to better understand the intended flow and interactions.

Hi-Fidelity Mockups

Prototype

After reviewing the mid-fidelity wireframes with key stakeholders we got the approval to start creating the high-fidelity mockups. By incorporating our current It Works! Design System and utilizing high-quality graphics high-fidelity wireframes were created. Prototypes were then created off of the completed high-fidelity screens for usability testing and review.

Stage 5: Validation

Tested the Product for Usability and Made Refinements Before a Successful Launch

Overview

Post-Launch Iterations

Incorporate filter functionality
Integrated ability to add Promo Codes

Future Enhancements

Incorporate a subscription order option
Add a link to share the bag from the Shopping Bag listing
Simplify removing out-of-stock products for users
Ability to duplicate existing shopping lists

User Beta Testing

We reached out to 100 of our Distributor users, organizing them into groups based on the number of customers they had and their Distributor rank, and allowed them to Beta test the new feature. Based on their feedback, we identified several key pain points and valuable insights

User Pain Points

Users struggled to locate products, finding the process time-consuming and challenging.
Users found it difficult to remove out-of-stock products from existing lists.
Users experienced long loading times, leading to a frustrating experience.
Users found it annoying that they had to manually paste the shopping message, instead of having a seamless sharing option.

User Feedback

Users wanted the ability to choose between making the order a one-time purchase or subscription order.
Users wanted a link to share the bag straight from the Shopping Bag listing page.

Refinements Based on User Feedback

Introduced an Option to Apply Promo Codes

Users expressed the need to include promo codes and promotions to their custom shopping bags, so we introduced a feature to add promo codes.

Incorporated Sort & Filter Options

Based on feedback from our User Beta Testing, we decided to incorporate sorting and filtering features into the Add Products step to reduce user frustration and improve efficiency.

Project Takeaways

Use existing patterns to decrease cognitive load. Spending time designing a unique interaction for a common function isn’t necessary if users already expect it to work a certain way.

Value of Continuous Feedback: Continuous feedback from users and stakeholders allowed us to refine our approach and make real-time adjustments, ensuring the product met all expectations.

Collaboration Across Teams: Collaboration with cross-functional teams (designers, developers, and product managers) was crucial to the project’s success, with open communication and regular check-ins ensuring alignment between design, technical constraints, and business goals.