Bidding Widget
B2C, E-COMMERCE / 2023 - ONGOING / MY ROLE: SENIOR PRODUCT DESIGNER, UX/UI
Bidding Widget
Background 🔎
ATG (Auction Technology Group) has been supporting the auction industry since 1971, helping auctioneers connect with bidders around the world. With eight marketplaces across two major sectors, Arts & Antiques and Industrial & Commercial, ATG hosts thousands of live and timed auctions every day.
As part of the Bidding Team, I was responsible for redesigning the Bidding Widget, a key component in the company’s vision to modernize and unify the auction experience.
What is the Bidding Widget? 🤔
The Bidding Widget is where users place bids, track live updates, and monitor the status of lots. It is one of the most critical touchpoints in the user journey, where engagement, excitement, and conversion meet. My goal was to create a seamless and intuitive experience that builds user confidence and supports successful bidding across all marketplaces.
The bid widget in one of ATG's marketplaces:
The Problem 🤯
Over the years, ATG has acquired multiple marketplaces, each built on its own infrastructure and using a completely different bidding widget. Many of these marketplaces are outdated, not fully mobile-responsive, and run on technology stacks that are difficult to support and maintain.
This fragmentation created challenges in providing a consistent, modern, and scalable user experience across all platforms.
A few screenshots from the current bid widget at one of ATG's marketplaces:
Goal 🏆
As part of the company’s three-year vision, our goal was to consolidate all marketplaces into a single unified platform powered by one design system built with React. The Bidding Widget would be integrated across all ATG marketplaces, maintaining each brand’s unique identity while preserving conversion performance.
We also aimed to enhance the overall user experience, improve SEO performance, and ensure the long-term scalability and sustainability of the company’s technology infrastructure.
Users 🥸
ATG’s marketplaces are divided into two main sectors: Art & Antiques (A&A) and Industrial & Commercial (I&C), each with very different audiences. A&A users range from students and first-time buyers looking for affordable furniture to collectors and enthusiasts purchasing unique or high-value items. I&C users are often business owners or farmers buying machinery and equipment for professional use. This diversity required a flexible and inclusive design that works seamlessly for a wide range of users.
Audit 🕵️♀️
After defining the problem and understanding the goal, I began by auditing all existing bidding widgets across ATG’s marketplaces. The goal was to identify each marketplace’s unique user needs, map out all possible widget states and messages, and understand inconsistencies across experiences.
This process required significant hands-on exploration. I gained QA access to each marketplace, created test auctions, and placed bids from different user types to capture every possible state and scenario.
By the end, I had compiled a comprehensive Figma file filled with organized screenshots, helping me visualize differences, pinpoint pain points, and identify shared opportunities for improvement.
Few examples from the bid widget's audit I did:
While auditing I decided to divide the bid widget into 3 main states: Pre-bidding, During Auction, and Post-bidding. I also learned about different types of lots, such as lots with piecemeal, lots with reserve price, etc.
I created a list with all the bid widget states, so I will have as a work guide:
User Flow 🏊♀️
Another thing I wanted to have before starting work on the designs was the user flow chart. I created the first draft and refined it with the help of PMs from the relevant teams. Building the user flow helped me identify the exact steps users needed to take to place a bid. For example, users first needed to be logged in, then register for the specific auction and add their payment details, and finally, be approved to bid. This is the latest version we came up with:
Vision Workshop 🌈
As part of my vision work, I invited designers, product managers, and developers from different teams to participate in a bid widget vision workshop that I facilitated. The goals of the workshop were to understand the user needs (which information they want to see in each state), identify the key pain points within the user flow, and come up with solutions to improve the user experience with the most creative ideas.
In this part for example, the table was empty at first, and I asked the participants to copy and paste from the list on the left (or write their own) the top 5 things they think the user needs to see on each of the stages (Pre-bidding, During Auction, Post Bidding). After the workshop ended, I gathered together all of the same ones and circled the top 3 of each stage:
In another section, I asked the participants to look at my audit and find user pain points. Here are a few examples they wrote:
MVP 🚀
Proxibid, one of ATG's marketplaces, has started to replace some of its pages with the new design system as part of the company's 3-year vision. They began with the lot page, which hosts the bidding widget. We identified this as an opportunity to implement the new bidding widget first for Proxibid, with the ultimate goal of integrating it across all marketplaces. Due to a very tight schedule, the MVP focused on replacing the current bidding widget with the new UI without changing the UX. However, after identifying some minor UX issues, I was able to convince the team that this was a good opportunity to make a few small improvements. I also considered the needs of other marketplaces to ensure that the solution would be flexible enough for future integration.
How do we measure success? 🤔
Proxibid’s “Click Bid Button” conversion rate is currently 10.16% (12-month average). The primary goal of this project was to move toward the company's vision without negatively impacting the current numbers. I believe that by updating the UI and implementing small UX improvements, we can positively influence micro conversion rates as well as the North Star conversion rate, which is the number of bids. From a business perspective, this is also a great opportunity to demonstrate tangible results to investors.
User Interviews 🎧
While I was working on the bidding widget, my colleague was designing the new lot page. As part of his work, he conducted interviews with potential Proxibid users, and I joined to gather insights on both the lot page and the bidding widget. Some key takeaways were:
1. The outdated look of the site made users question whether they could trust it.
2. Users wanted to know how they would receive the item if they won.
3. Users wanted clarity on the final total cost, including shipping and any additional fees.
The Design 👋
ATG has a new multi-brand design system called "Hammer". For the MVP, I was using the Hammer components that were built for the Proxibid marketplace. Since the design system is relatively new, it may still be missing some components. In such cases, the team requiring the missing components is responsible for developing them. For the bidding widget, for example, I needed to add the element called "Inline Notifications".
UX improvements 💎
One of my main goals was to build users' trust. To achieve this, I proposed adding the total number of bids placed next to the high bid amount. This shows users how many other people are interested in the item and helps them make more informed decisions. Another UX issue I identified was related to the max bid feature. When users set a max bid, the bid button still displayed the next increment of the current high bid, rather than the next increment of the user’s own max bid. I addressed this to make the bidding experience clearer and more intuitive.
Some more variations of the bidding widget for different scenarios:
Next Steps 📜
The Proxibid bidding widget is currently in development. Once it is ready for release, we plan to run an A/B test to compare it with the old design. I will also schedule several user interviews and usability tests to gather additional insights. Meanwhile, I will continue working on the "North Star" design for the bid widget, focusing on further improving the bidding experience and making it more playful and interactive.