TeamCarts
Designing Collaboration in a Chrome Extension
Some images are best viewed on a wider screen.
Overview
TeamCarts is a Chrome extension that allows people to shop online together. By saving items across various online stores to lists called 'Carts', users can share these items, vote on their favourites, and comment their opinions.
I was independently contracted to integrate workflows and design wireframes for a collaboration feature to allows different users to create and edit carts together.
Timeline
2 weeks (started May 2023)
Project Team
1 UX Designer (me)
Discipline
Web Design
Problem
Users want to create and edit carts alongside their friends
TeamCarts' main feature is receiving opinions on saved items through a voting system. Users want to be able to include their friends in their shopping before this stage.
Final Solution
Users can now invite their friends to collaborate in TeamCarts through an icon in the top right that opens up to a modal. In addition to this, the overall structure of the chrome extension was improved for ease of navigation and scalability.
↓↓↓ How did we get here? ↓↓↓
Existing Solutions
I began by looking at existing designs of sharing features in order to ensure what I design will follow user expectations. In particular, I looked at Google Docs, OneNote, and Figma. These platforms all followed the same patterns and workflows - it's clear there is a conventional layout that works.
In all of these platforms, recipient access varies depending on the permission set. In TeamCarts, there are two different things the "share" action needs to do:
- Allow user to copy a link → recipient can access webpage where they vote on items in a cart
- Allow user to invite friends → recipient can join the cart as an editor in the extension
Challenge
Voting and editing are too different to be grouped together under "sharing"
In typical workflows, actions (view, comment, edit) are all done in the same destination. However, voting and editing in TeamCarts happen in completely different places. They cannot be grouped under the same high-level action.
Design Options
After brainstorming design options and speaking with the client, we decided it would be best to separate voting from collaboration entirely even though they both involve inviting other users. Because of the difference in invitation method (link vs email) and recipient destination (webpage vs TeamCarts extension), these two features will be accessed through different buttons.
Roadblock
Usability problems prevent integration of cart collaboration
When integrating this feature into the existing UI, I noticed some usability concerns.
Analysis
After discussing this roadblock with the client, the scope of the project was broadened to the entire platform. In order to integrate the collaboration feature, I needed to effectively identify all problems with the interface. I conducted a heuristic evaluation for the following reasons:
- Evaluating entire platform (not a specific use case)
- No immediate access to user sample
- Time constraints prevented user testing entirely
- Able to methodically identify and categorize usability problems
The following are the top three areas of concern based on the heuristic evaluation:
Flexibility & Efficiency of Use
- Not scalable
- Adding a product is multi-step
Consistency & Standards
- Inconsistent colour styles
- Unconventional button usage
Aesthetic & Minimalist Design
- Lack of visual hierarchy
- Busy appearance
Design
Structure and Navigation
First to tackle was the overall structure and navigation of the main interface, which will influence everything else. After experimenting with different layouts and discussing with the client, we settled on using a side menu for navigation.
This solution sets the cart as the "home page", guiding users to use the extension as intended. Additionally, this solution is consistent with expectations, allows users to switch between carts easily, and is scalable for long cart names as well as numerous carts.
Layout
Users should be able to differentiate between the two main types of pages in the extension at a glance since they serve different purposes. I did so by introducing a gallery layout for the 'All Products' page.
Collaboration
After this, I was able to complete my original goal of integrating collaboration into the platform. Taking the selected design option, which visually separates the two functions of voting and editing, I added these actions to the top right of the popover. This location is consistent with all existing solutions.
Adding a Product
There was one more usability problem I wanted to resolve before handing off my work. Although it did not affect the collaboration feature, resolving this issue would improve user retention.
The first and most common action that a user partakes in when using TeamCarts is adding a product from a website (e.g. Nike) to TeamCarts. This is done through a popover on the right side of a product's webpage.
However, the current workflow is tedious and time consuming. Users first add their product to the 'All Products' pool and then have to navigate to the main popover at the top of their browser in order to move it to a specific cart.
I resolved this problem by keeping all of these actions within the side popover. This allows users to add a product to TeamCarts in as few as 4 clicks all within one small section of their screen.
Final Solution
The final solution consisted of an overhaul of the entire platform in order to integrate collaboration.
Collaboration
Adding a Product
Handoff
Providing easy to follow prototypes is essential for a successful hand off. Below is an excerpt of my final workspace that specifically details the interactions for the product card in the cart view.
Metrics
Impact
- Introduced collaboration!
- Resolved 3 major usability heuristics through improved ease of navigation, scalability, and visual hierarchy
- Reduced time taken to add a new product
KPIs
Some key performance indicators to keep track of for the collaboration feature would be:
- Growth of user base
- Percentage of carts shared
- Conversion rate of items in shared carts vs. non-shared carts
- Qualitative user feedback
It is also important to ensure that the changes made to the overall platform are performing effectively:
- Churn rate
- Percentage of carts created from side popover
- Average number of items in carts
Next Steps
It would be beneficial to improve the flexibility of the platform even further by providing filter and search options for carts, items in carts, and items in the 'all products' section.
Additionally, merging the voting and collaboration features may fit user expectations better even though it was out of scope for this iteration.
Takeaways
A good foundation is crucial for success
Like a building, the foundational structure is what holds everything together in digital products. It is so important to think about scalability and flexibility when designing MVPs because even though the goal is the minimally viable now, it will need to sustain so much more in the future!
Include your stakeholders every step of the way
What made this project successful was ensuring my client and I were on the same page. And specifically, not every check-in or conversation needed to be formal! Short and sweet goes a long way.
