Digi Key Electronics
UX/UI Design:
Marketplace, product design, SaaS tools, and platforms
TIMELINE
2.5 Years
TOOLS USED
Sketch /Invision/Figma
Summary
As a newcomer to a marketplace, Digi-Key launched with the intent of breaking those notions and creating a unique scenario where both sellers and customers can come away with a great experience. How was it done? In a nutshell, it took nearly five decades of supplier vetting and partnership nurturing experience and strapped it to a rocket ship. In just under two years, were able to quickly double our number of active supplier partnerships while maintaining the high service levels that customers have come to expect from our brand. Increasing overall revenue in $5.34 Million.
The Challenge
How do you build a marketplace for the electronics industry with a UX that surpasses even Amazon's? It began with two years of in-depth research into marketplace models and identifying the unique experiences they offer, all with the goal of creating a platform that would revolutionize the electronics industry.
The vision extended beyond just building a marketplace—it included integrating complementary services like seller stores, fulfillment, design services, education, automation, a PCB builder, and a solution center.
With extensive research, strategic planning, and the dedication of a full-stack team, the marketplace was successfully launched in under two years. Additional services were seamlessly integrated, establishing a platform that not only leads the electronics industry but also sets a new standard for marketplace excellence.
My Role
Working with a full team of engineers, project managers, business development leads, along with Digi-Key’s executive team there were constant reiterations on improving functionality. I was specifically hired for the marketplace project and was instructed to take the lead within 6 months. With the challenge accepted I took on lead UX designer prior to the 6 months. I helped build the best user experience for a marketplace while keeping up with research and educating myself on the third party platform that was being used to integrate into existing systems. There were many client facing interactions, traveling, and presentations to teams within the company to make sure all teams were aligned with the marketplace experience.
Product Page
Same product with a seller only or DK + Seller
Challenge
Some initial key questions….
•Who gets the buy box?
•How do I know who ships?
•What if DK is competing with the seller?
Working with teams we went back and forth if we should label the product as a “Marketplace” product and settled with the only difference would be who ships the product to keep user consistency (after 2 years this was later added because users weren’t clear what was a marketplace product vs. not). Next, going through many revisions of how it should look with one, two or multiple sellers while integrating business rules and knowing how to utilize the backend of the 3rd party systems capabilities.
One Seller
If there was one seller of the product it wouldn’t look different to the user other than where it said shipped by. The user would see the same layout and functionality as if it was a Digi-Key product in order to keep consistency of the site and functionality for the user.
Digi-Key + One Seller
If DK and another seller sold the same part. Digi-Key would always get the main buy box as a business rule. Similar to Amazon you would see the main buy box with DK information but the other seller would be listed below with the difference in pricing. To keep the list short since there could be multiple seller, the other seller was built in an accordion where the user could add directly to the cart or open to view more information or pricing tables.
Product Page - Multiple Sellers:
Same product with seller selections
Multiple Seller Challenge
Similar to the questions asked previously. Having multiple sellers offered some interesting questions.
• Who gets the main buy box?
• Is it based on pricing?
• Fasted shipment time?
• Largest quantity?
Business Rules/
Buy Box
Digi-Key as a business rule wanted the seller who had all of the questions fulfilled to have the main buy box. That meant the most quantity, fastest shipment, and lowest price. If it came close in instances the seller with the lowest price and highest quantity would lead. If DK offered the same part though, they would always get the buy box in that case.
Product Pages
Today
Digi-Key took the project back over internally on the design side and after two years opted to not have competitive parts. Moving forward as a business rule they wanted to bring in new products they didn’t offer because they didn’t want there to be competitive pricing.
Marketplace Shopping Cart
There are many more sections to the shopping cart but the three main categories is where adding marketplace parts was affected, cart dropdown, shopping cart, and order preview. Overall, to the user the change was minimal keeping their experience and comfortability at a minimum.
Cart Dropdown
In the cart preview the only indication of a marketplace part was the shipped by. If the part was a Digi-Key-Key part you can see the logo was added to make it more clear that it was coming from DK and not from another seller. The links would take the user to the seller store for that marketplace seller if the user needed more details or more information on the seller prior to purchasing.
Shopping Cart
The shopping cart was changed even more minimally than the cart dropdown. The only indication of a marketplace part here was the shipped by seller. The links were removed in this case to keep the user in purchasing mode and to continue on with their shopping cart in order to complete purchasing.
Order Review
Similar to the shopping cart the review page was dialed down with no links and only indicating marketplace parts with the shipped by. DK has future plans to implement a fulfilled by service (similar to Amazon Prime) where DK will provide warehouse storage and shipping services.
Marketplace Final Thoughts
This project was initially signed as a 3 year contract. I helped implement many projects and service to the DK site for 2 years before the DK design team took the project internally (which was the plan for them to takeover moving forward). Our contract has been extended twice with Digi-Key because we built a solid team of onboarders and recruiters to keep the marketplace growing and increasing revenue. Today Digi-Key has made $5.34 million increase in revenue since the launch of the marketplace which was June 2019.
Printed Circuit Board Builder (PCB)
A printed circuit board is a medium used in electrical and electronic engineering to connect electronic components to one another in a controlled manner. Digi-Key had the idea of expanding on printed circuit boards through a marketplace where other suppliers and manufacturers could sell PCB’s on their website. The tool seems simple to the user but the backend integrations into existing systems and adding other suppliers where most the thought and heavy lifting was. The live tool has since been reduced, but full initial designs are below based of initial client meetings.
PCB User Flow
Because the backend and frontend was complicated. A user flow was built out for all working pieces to finalize how everything would connect for customer facing users and backend pieces behind the scenes.
PCB UI
Adding to the marketplace, three different experiences were created for various user experiences.
Gerber Flow
The Gerber flow is when a user (engineer) had a layered file previously designed and was able to upload their file directly to the site to be printed. Itar agreements were established with this flow because of the seriousness of agreeing to not creating explosives against the government.
Guest/Quote Only Flow
Digi-Key as a business rule wanted to implement a guest flow. As a guest, a user could go through the full process without a Gerber file and could see a rough quoted estimate, but could not purchase a PCB until the user was able to provide a Gerber file in order to print.
DK Red
DK Red was a service that came later after the PCB tool was launched. This was an option where DK provided their own product in competition with other marketplace suppliers. DK Red was an offer for a cheaper cost but had strict limitations on selections.
PCB Gerber Flow
PCB Guest/Quote Only Flow
PCB DK Red
PCB Marketplace Final Thoughts
This project had a lot of thought process that went into it to make sure the front end and backend all connected and worked. I was fortunate to even visit a PCB company in order to learn more on how a marketplace supplier produces a PCB and see all the steps that go into the process in creating a PCB.
