Creating the coolest door 3D configurator ever
With the high demand for steel doors, Edwin, my co-worker saw an opportunity to create his own configurator with a sales back-end for manufacturers, I got the lovely task to design the interface for the configurator.
Skills
Research
Design
Prototyping
User testing
My Role
Design lead
Timeline
3 weeks
Team
Eward de Vos
Edwin Bos
Problem
The main reason which led Edwin to start this project: The demand for steel doors is great, but most manufacturers don’t have good product configurators because building one is expensive and time-consuming.
Recognizing this gap, We created a configurator that manufacturers could easily be customized and implemented into the websites of these manufacturers.
Research
To gain insight, I examined available 3D configurators offered by manufacturers on the market. Besides looking at Steel door configurators, I also took a look at configurators for other products like cabinets and furniture.
Design Goals based on examination
Clear Visuals:
Use of recognizable controls, icons and colors inside buttons to show the user exactly what they are configuring.
Usability on Smartphones:
With most traffic coming from mobile devices, I wanted to spend extra attention to usability on mobile devices.
Clear distinction between sections:
Make it super clear what the user is configuring, to prevent confusion.
Design process
Edwin had already created a beta version of the configurator, which gave me a solid foundation of features to work with. During this project, I used this design process:
- Design and prototype interface
- Short meeting with Edwin about development attainability
- User-test with co-worker designers and other employees (without design knowledge)
- Collect feedback and implement
- Repeat for each iteration
Designing in Figma
I really enjoy designing and prototyping in Figma. In this video, you can see how to create elements and string together to a functional prototype.
Highlights
Mobile Experience: Big Screen Features on Small Devices
Augmented Reality: Place a door in your environment for a realistic preview
Responsive Configuration Panel: Intuitive controls with instant feedback
Project learnings
- During our design process, we couldn't test with a wide range of users. Instead, I showed each version to my co-workers. Some were UX designers, others from HR. They all gave helpful feedback. In most cases, you can always find someone to test with. That's why I make interactive prototypes.
- Working closely with the developer, we managed to create a beautiful and functional product, while keeping development time reasonable
