Xom-Product@2x.png

Xometry Materials

01 - The problem

Many of our customers ran into supply chain issues during the pandemic and a lot of the effects are still felt today. To address the backlog and shortages, Xometry is expanding our offerings to include raw materials. Xometry wants to develop a marketplace on our site to help our users explore, research, and purchase raw materials all in one location.

02 - Competitive research

The gold standard for our user base is McMaster-Carr’s marketplace. Their site is probably the #1 most visited spot for our customers to source different parts and raw materials. The simplicity of the site is what is well received. There isn’t a lot in terms of design, but the core functionality and the wide range of available products make it the one stop source for all your manufacturing needs.

03 - INternal INterviews

We are fortunate to have so many engineers on staff here at Xometry and many of them refer to McMaster-Carr for our own manufacturing projects. We’ve interviewed a few of them and consolidated a list of main features that must carry over in order for our own marketplace to be competitive.

04 - Findings and Needs

To synthesize all the data collected from engineer interviews, we identified similar patterns across interviewees. The main focus consolidated into four main points:

  • Users must be able to easily go from visiting the site to placing an order in as few steps as possible.

  • Users must see that we carry a vast selection of materials and not just specific ones.

  • Users should be able to research and compare different materials against others in the same setting (ie. Aluminum 6061 vs. 6063).

  • The design must be kept simple with the products as the main focus.

05 - How might we…

We created How Might We… statements that allowed us to ideate and create a goal-driven approach to problem-solving.

06 - USER JOURNEY

One of the main tasks was for a user to be able to come to our site, find their materials, and place an order. I mapped out the main components for when a user wants to order or research an aluminum 6061 part.

07 - Wireframing

I started to create a basic wireframe with all of the main functions of the site. I focused solely on the main page of the marketplace where users would be able to see the list of materials.

During initial review, there was a slight pivot. Originally we were going to build this site from scratch but given time and engineering constraints, we were moving towards building with existing taxonomy like the hero segment and the navigation bar. This altered the initial design with a lot of the main elements being pushed below the fold.

08 - Higher Fidelity and a robust Filter

To better visualize the UI, I designed a mid-fidelity wireframe with more descriptive elements for the main filter accordion and the materials grid. One of the main goals was to create a better filter than our competition and our team came up with a filter that was adjective-based vs. noun-based. Many user interviews revealed that outside of the standard materials they buy, they don’t deviate as much. A lot of it is attributed to lack of knowledge with other types of materials. Instead of searching through hundreds of materials online, what if users could search for what they need based off the material properties? What if they usually use aluminum 6061 but they wanted an alternative that was just as heat-resistant and durable but at a lesser cost? That lead the way to creating our unique, adjective-based filter system.

I also designed out the main material properties placement. This was a critical element within the material-specific page that would house all technical details of the materials. While this is a marketplace, we also wanted to implement learning as much as possible so that users can get the finest details of the material they were researching to purchase.

09 - Putting it all together

I wrapped up the mid-fidelity wireframe and pieced together all the components necessary to examine the overall layout, aesthetic, and functionality.

10 - New Information = Top/picks Buy now feature

Our data showed that a vast majority of users often selected the same materials. We capitalized on this and decided to design a “top picks” feature to launch with our MVP. This in turn eliminated steps for a user to purchase the material needed.

Initial user flow

Expedited version

New design to be finalized

11 - Testing the new ideas and Finalizing

We gathered both internal and external engineers to test our new site. The feedback was overwhelmingly positive and participants, especially the external ones, were excited about the new “top picks/buy now” feature. Other feedback showed curiosity about the new adjective-based filter system and how it would function in real use cases.

I designed out the final hi-fidelity version and got my Figma files ready to developer handoff.

12 - Last minute MVP updates and Next Steps

As the site was being built out, our timeline was moved up to meet a few business goals and for MVP, we launched with just the marketplace. The researching pages were roadmapped later towards the end of the year for a V2 release.

There were many great ideas with this project that reimagined tried and true methods of a marketplace and functionality. Creating another option outside of MacMaster-Carr was a challenging decision but we believe given our expertise in materials and our new filter and buy now functionality, we will be able to claim our share of the materials marketplace pie.