Miller Welds Product Selector

Overview:

As the UX'er of the group, I helped Miller Welds and the internal team create a product selector that can be found on their website today. During this process, we used the agile methodology to create a fully functional solution.

Problem:

From feedback, Miller Welds team noted that choosing a product could be difficult for their users. They stated that, some users simply did not have the knowledge and may benefit from a product selector. Therefore, Miller Welds began tackling the problem by creating flow charts, but needed additional assistance to digest the material and create a working solution.

Digest the user flowchart provided by Miller Welds.
Come up with wireframes and a design to be used on the Miller Weld Website.

Goals

Process

[1a. Building Context]

I began this project by first exploring the work Miller Welds already has done. They had a flow chart which followed a direction depending on what the users choose. For example, the first question may be: What type of input power with you be using? The next question would be determined by the user's choice.

Originally, the product selector was supposed to be an active filtering tool that would be part of the product category page. There would be widget with questions at the top of the product cards and depending on what users choose, the product cards would filter out. From my observations and talking to the developers, I recommended that we move to a dedicated page due to the complexity of the flows and the amount of work that would need to be done for having active filtering (something to do with the product SKUs).

That said, with a flow already defined, I knew that the right of design would to be to make this a wizard pattern. We knew what products to display at the end, we just needed users to pick the path they wanted in order display those options.

[2. Designing]

The design process was an iterative process that followed the agile methodology. We would run weekly sprints that had weekly meetings with the internal team and Miller team. At the end of each sprint, feedback would be taken to improve the overall design and functionality.

Designing consisted of the designs of the cards, banner, and over design of the widget.

The cards had the most iterations, because choosing the right layout with the correct information was important so that users would be able to make an informed decision. My cards were designed based on Miller Weld's current cards and by taking inspiration from competitors in the industry.

For the banner, it was a simple banner that would sit at the top of the product page and invite users to use the product guide.

The next step would be the wizard pattern. With my design, I followed traditional wizard pattern:

I wanted users to be sure of where they were in the process (progress bar/indicator).
The navigation would be linear and intuitive.
Users would be able to navigate forward or backwards to change their answer.

As I went through designing, I would define all possible screens (one for the intro, questions, etc.) and it would be an iterative effort to get my designs finalized.

During this whole process, I became part-time UI designer until we brought in an internal graphic designer to clean up my designs. That being said, my designs were passed down to the graphic designer to clean up. Then, it was passed down to the developers to implement.

Outcomes

- Improved User Experience: The product selector addresses the specific pain point users were experiencing, making it easier for them to find the right welding product. This translates to increased satisfaction, reduced frustration, and a more efficient purchase journey.

- Reduced Support Costs: By empowering users to find the right product themselves, the product selector can reduce the need for customer support inquiries related to product selection. This translates to cost savings for Miller Welds.

- Enhanced Brand Image: Offering a user-friendly product selector demonstrates Miller Welds' commitment to customer satisfaction and understanding. This can contribute to a positive brand perception and build trust with potential customers.

- Increased Sales Conversions: By simplifying product selection, the tool leads users directly to relevant options, increasing the likelihood of them completing a purchase. This translates to potential revenue growth for Miller Welds.

Takeaways

- This project took different directions during my time working on it and after passing it on. This being said, it made me realize how complex designing could become. The project seemed fairly simple, but there are a lot of factors that were unforeseen until it was discovered. For example: Dedicated Page vs. Active Filtering - Considering technical limitations and user experience, opting for a dedicated page was a wise decision, ensuring better performance and intuitiveness.

- Collaboration: Working closely with both the internal and external teams through agile methodology fostered effective communication and ensured alignment on project goals. Additionally, beyond UX: working with developers and graphic designers highlights the importance of cross-functional teamwork in product development.

That said, why not check out the product selector today?

https://www.millerwelds.com/product-selector

See what you like? Let's Connect.

See what you like? Let's connect.