3D Printer HMI

3D Printer HMI

Redesign, product development and addition of high-impact feature.

Overview

Case Study shows the process of implementing changes and improvement of 3D Printer HMI.



The first iteration of the product was created by a different UX/UI Designer. I took over responsibility for it, when the product was already on the market, but the designed HMI wasn’t finished and required some improvements. At the same time, the Product Manager realized that the current version couldn’t support planned features.

HMI was supposed to provide the additional functionality, and it was impossible to do without introducing significant changes.

Problem

Product was chaotic and counterintuitive. Main problems were related to the Information Architecture, which did not provide for the support of additional functionalities. Some important data was missing and some shouldn’t be visible for the user, vocabulary was incorrect or inconsistent, UI design needed modification. Manual calibration was frustrating.

Solution

  • Reorganizing Information Architecture.

  • Improving UI design and maintaining consistency.

  • Designing a game-changing calibration procedure that gave the product a market advantage.

My Role & Responsibilities

UX/UI Designer: Information Architecture, Wireframes, User Flows, UI Design, Design System

Team

  • Product Manager

  • Junior Product Manager

  • UX / UI Designer

  • Product Specialist

  • Development Team

Design Process

Design Process

FIRTS THINGS FIRST

When joining the project, I started by getting acquainted about the Product Manager’s vision. I listened carefully about the plan for the future and ideas for changes. During the first meeting, I learned about the problems with the current version and product’s roadmap. I was experienced with the technology, because I used to work as a 3D printing specialist for the same company. With all my knowledge, I started to analyze the product.

INFORMATION ARCHITECTURE

After several workshops conducted with the Product Manager, the first draft of the Information Architecture chart was created. This was the basis for further work.

MISSING FEATURES

The first thing that needed to be addressed was the missing product features — elements necessary to ensure proper functioning.

The scope has been prepared according to user scenarios, by Product Manager and Product Specialist.

Knowing the main structure of the product, the team could divide the work. Each part was first discussed and analyzed. Based on that, I was able to prepare the wireframes and mockups. The next step was to deliver it to developers and collect feedback from them. If any changes were needed, design was revised until it was ready for implementation. The product was tested by a team of employees involved in the project. Necessary corrections or modifications were implemented until a satisfactory effect was achieved.

WIREFRAME - FLOWCHART

UI DESIGN LIMITATIONS

The fact that the product was already on the market was limiting the design process. Delivering all modifications required longer time. Some crucial elements had to be fixed as soon as possible, so we had to release smaller updates. For this reason, the new UI Design had to relate to the current one. So I didn’t apply huge changes. I made sure that it was improved enough and still fits to the rest of the product.

BEFORE

AFTER

COMPONENT LIBRARY

To ensure product consistency, I started working on the UI Library which contains of components, variants and explains how and when to use them. The instructions have been prepared in a way understandable for all parties - Designers, Developers, Product Manager and new team members joining the project. The prepared guidelines allowed for consistent product development and facilitated the implementation of changes.

DESIGN IMPACT

At the very beginning, I paid attention to one of the issues. Once in a while, 3D printer needs some maintenance work to be done. One of the operation like this is bed leveling. Three screws must be properly adjusted to obtain a perfectly leveled glass bed, which is the base for the printed objects. The task is not easy and can be really frustrating, even for the experienced user. I wanted to use the capabilities of the machine and make the process easier. An idea was in my head, but it required discussion with the machine designer. Once my assumptions were confirmed and improved, I prepared a draft of a procedure that would lead the user to the goal step by step. It was a game changer. Later, sales team and clients appreciated the semi-calibration and pointed it out as one of the valuable product enhancements.

Adding such procedures to the HMI structure was an excellent idea. I included more of them in the Information Architecture chart and planned to develop them in the future.

CALIBRATION PROCEDURE - USER FLOW

CALIBRATION PROCEDURE - USER FLOW

WHAT WAS NEXT?

Together with the team, we had determined the general form of the product, and we worked conscientiously to develop it piece by piece according to the roadmap.

CONCLUSIONS

The calibration procedure and all the experience associated with it confirmed my belief that teamwork allows to achieve wonderful results. I was very happy with the final result, and I am still delighted every time I think about this project. This makes me want to work on innovative solutions that will benefit users.

FIRTS THINGS FIRST

When joining the project, I started by getting acquainted about the Product Manager’s vision. I listened carefully about the plan for the future and ideas for changes. During the first meeting, I learned about the problems with the current version and product’s roadmap. I was experienced with the technology, because I used to work as a 3D printing specialist for the same company. With all my knowledge, I started to analyze the product.

INFORMATION
ARCHITECTURE

After several workshops conducted with the Product Manager, the first draft of the Information Architecture chart was created. This was the basis for further work.

MISSING FEATURES

The first thing that needed to be addressed was the missing product features — elements necessary to ensure proper functioning.

The scope has been prepared according to user scenarios, by Product Manager and Product Specialist.

Knowing the main structure of the product, the team could divide the work. Each part was first discussed and analyzed. Based on that, I was able to prepare the wireframes and mockups. The next step was to deliver it to developers and collect feedback from them. If any changes were needed, design was revised until it was ready for implementation. The product was tested by a team of employees involved in the project. Necessary corrections or modifications were implemented until a satisfactory effect was achieved.

WIREFRAME - FLOWCHART

UI DESIGN LIMITATIONS

The fact that the product was already on the market was limiting the design process. Delivering all modifications required longer time. Some crucial elements had to be fixed as soon as possible, so we had to release smaller updates. For this reason, the new UI Design had to relate to the current one. So I didn’t apply huge changes. I made sure that it was improved enough and still fits to the rest of the product.

BEFORE

AFTER

COMPONENT LIBRARY

To ensure product consistency, I started working on the UI Library which contains of components, variants and explains how and when to use them. The instructions have been prepared in a way understandable for all parties - Designers, Developers, Product Manager and new team members joining the project. The prepared guidelines allowed for consistent product development and facilitated the implementation of changes.

DESIGN IMPACT

At the very beginning, I paid attention to one of the issues. Once in a while, 3D printer needs some maintenance work to be done. One of the operation like this is bed leveling. Three screws must be properly adjusted to obtain a perfectly leveled glass bed, which is the base for the printed objects. The task is not easy and can be really frustrating, even for the experienced user. I wanted to use the capabilities of the machine and make the process easier. An idea was in my head, but it required discussion with the machine designer. Once my assumptions were confirmed and improved, I prepared a draft of a procedure that would lead the user to the goal step by step. It was a game changer. Later, sales team and clients appreciated the semi-calibration and pointed it out as one of the valuable product enhancements.

Adding such procedures to the HMI structure was an excellent idea. I included more of them in the Information Architecture chart and planned to develop them in the future.

CALIBRATION PROCEDURE
- USER FLOW

CALIBRATION PROCEDURE
- USER FLOW

WHAT WAS NEXT?

Together with the team, we had determined the general form of the product, and we worked conscientiously to develop it piece by piece according to the roadmap.

CONCLUSIONS

The calibration procedure and all the experience associated with it confirmed my belief that teamwork allows to achieve wonderful results. I was very happy with the final result, and I am still delighted every time I think about this project. This makes me want to work on innovative solutions that will benefit users.