top of page

Role: UX Designer

Time Frame: 3 Months

Tools Used: Figma

Miller Welds Welding Calculator

Overview:

With an old and outdated welding calculator, Miller Welds needed a refresh. Taking inspiration from the currently existing mobile app, I was able to create a unified experience with an updated look.

Problem:

At the time Miller Welds reached out, their welding calculator was i-framed onto the page and was using flash. Miller Welds and many of users of the welding calculator noted that the old version of the calculator was sometimes sluggish, felt old, and in general needed a refined experience.  Additionally, there were multiple calculators (for different applications) in which the client hoped to combine. It was also important to consider that flash was being phased out by all web browsers. Therefore, it was essential for Miller to update the welding calculator so that it would be compatible and future proof. Along that way, that meant that a refresh of the user experience and UI would be necessary.

  • Combine all calculators into one eco-system.

  • Update the welding calculator experience so that it is easier to use.

  • Update the look and feel of the calculator to closely match the welding calculator app that existed.

  • Instead of i-frame and flash, natively host the welding calculator on the page using HTML/Javascript.

Goals

Outcomes

-  Improved cross-platform consistency and user experience across desktop and mobile, enhancing overall brand perception.

​​

- Increased website traffic and engagement through the mobile-friendly calculator, driving potential leads and users.

​

- Reduced page load times compared to the old calculator, offering a smoother and more responsive experience.

​

- Elimination of Flash reliance and adoption of modern web technologies, future-proofing the calculator for ongoing use.

​

- Increased dwell time on the calculator page, indicating deeper engagement with the tool.

I began with essentially bringing over the elements from the existing application. I also wanted to keep the wizard pattern as I wanted users to emulate a similar experience to the app. Additionally, users of the app would be familiar with the online calculator, making an overall cohesive experience. With this in mind, I had a general layout and process built out. There was the main screen, question screens, and result screens. Some additions to the welding calculator that I made that aren't present in the app are headers for a clearer hierarchy. Additionally, since there were lots of text and numbers, this would help in separating content, helping users be able to differentiate and associate content. I also added an optional tool tip option for some of the sections. I noted this could help new users like me who don't know what "short circuit transfer" refers to. This would be a great way to help users comprehend information whilst taking up less space.

​

In conjunction with the mobile design, I began to slowly build out the desktop version. Everything was essentially the same and most of the work I had to do were to make each section wider. With many suggestions and iterations, the final design was presented and approved.  See images below to see screenshots of the design in Figma.

[2a. Wireframing &  Designing]

 

The design process spanned a couple weeks and involved lots of iterations to perfect. The client wanted to see an example of the calculator as a whole, a desktop and mobile version, and an example of each calculators. That said, the entirety of the work was done using Figma as the design tool.

​

Initially, I focused on the general design since I knew all calculators would be combined. With the general understanding that the app will help be the inspiration for the calculator design, I began with a mobile first approach. As stated above, the mobile experience did not function well as it was an i-frame pasted within the page. Depending on the phone, sometimes the functionality didn't even work. Additionally, people in the industry would most likely be accessing the calculator via the website while on the field. That said, the mobile experience was critical to solve first.

​

[1b. Building Context: App Exploration]

 

Next, I decided to take a look at Miller Weld's welding calculator app. This app was brought to my attention by the clients in which they hoped to get a solution very similar in design and function to the app. Here are some of my notes about the app:

  • It used a straightforward wizard pattern to help users get a result

  • The app was intuitive, simple, and quick. It did exactly what the user wanted, when they wanted it.

  • The UI elements could easily be modified to fit desktop screens.

  • And most importantly, this app could be used as a starting point to the new design.  Let's not redesign something from the ground up if we have something to work off of.

With that in mind, a short turn around for a project, and client budget concerns - I decided the best choice was to move forward with translating the app and it's component into a feasible working website.​

[1a. Building Context: Exploration of Old Calculator]

 

I began this project by first exploring and playing around with each of the welding calculators. In total, there were 4 welding calculators that needed to be combined. Thankfully, exploration of the welding calculators allowed me to discover that each calculator functioned very similarly (each with their own nuances). During this process I noted a few things:

  • The experience felt unsatisfactory. Sometimes, results took upwards of 1 minute to load, which could cause higher bounce rate and user-dissatisfaction.

  • The low contrast ratio between the text and the background is an accessibility issue and could make it harder for users to read the text.

  • The mobile experience did not function well and most people in the field would most likely be using the calculator on their phones.

  • The overall design felt outdated and could benefit from a refresh.​

​

Process

Takeaways

- Use what you have already, and use it effectively. With a short turn around, this project showed me that we don't always have to start at the bottom. It is okay to take inspiration, especially when the client encourages it!

​

- Creating a mobile-first design helped accelerate the process. By creating a mobile version of the calculator first, I didn't have to go through the struggle of resizing large elements to fit a smaller screen.

​

- Function first over visual design. The welding calculator is fairly simple and does not have many visual elements. This is by design because we knew that we wanted to have a working solution. Additionally, our audience base (mechanics, machinist, etc.) didn't have visual appeal at the forefront of their minds when using the calculator. This helped save time for the overall design process and in turn helped reduce the overall cost.

​

Why not check out the welding calculator today?

https://www.millerwelds.com/resources/weld-setting-calculators

​

See what you like? Let's connect.

  • Linkedin

See what you like? Let's Connect.

bottom of page