PROJECT CUSTOMISATION CONFIGURATORS
CLIENT RALPH LAUREN, DICKIES, NEW BALANCE, CASTELLI
ROLE
CLIENT RALPH LAUREN, DICKIES, NEW BALANCE, CASTELLI
ROLE
Creative
UX
UI
Art Direction
Brand
WHAT IS THE CONFIGURATOR?
Our configurator is a responsive iframe embedded on a clients site, offering a user the ability to customize a product. Configurators can be direct-to-consumer, offering curated customization and or business-to-business, where design and merchandising teams can use them for short runs or limited editions etc…
Crucially, a configurator visually displays the customisation to the user as they interact with it. This visualization means that there is no need for real life products, reducing the need for wasteful practices. There are many different use-cases for a configurator, but the core principles of design have remained similar throughout its evolution.
SIX KEY LEARNINGS FROM EVOLVING OUR CONFIGURATORS
----
01
DESIGN THE WHOLE JOURNEY,
NOT JUST THE CONFIGURATOR EXPERIENCE
One of the biggest learnings from designing the configurator relates to all of the parts that surround it. What’s the point in having a great configurator, if users aren’t compelled to use it? The configurator should not be thought of in isolation, but as part of a story, an ecosystem that provides opportunity to inspire users and onboard them before they even enter the configurator.
For example, why not use a product listing page to show the different ways a user could interact and have impact by customizing a product? Get the user excited about the prospect and learning early. This is where wireframing and prototyping the whole journey, even beyond the parts we control as a SaaS platform, and presenting that back to a client is really useful. Base it on an audit of their current site and flows. Within the prototype, it’s effective to visually call out the opportunities for storytelling. We use blue circles with text, and often try to reuse modules that already exist on a clients ecom site, to reduce the need for engineering work on their side.
This is also where a strong understanding of art direction and creative direction come into play. Our early work with Marc Kremers at Futurecorp helped shape our understanding around the importance of consistency of UI throughout the whole journey. It helps a user feel trust in the overall product.
Our configurator is a responsive iframe embedded on a clients site, offering a user the ability to customize a product. Configurators can be direct-to-consumer, offering curated customization and or business-to-business, where design and merchandising teams can use them for short runs or limited editions etc…
Crucially, a configurator visually displays the customisation to the user as they interact with it. This visualization means that there is no need for real life products, reducing the need for wasteful practices. There are many different use-cases for a configurator, but the core principles of design have remained similar throughout its evolution.
SIX KEY LEARNINGS FROM EVOLVING OUR CONFIGURATORS
----
01
DESIGN THE WHOLE JOURNEY,
NOT JUST THE CONFIGURATOR EXPERIENCE
One of the biggest learnings from designing the configurator relates to all of the parts that surround it. What’s the point in having a great configurator, if users aren’t compelled to use it? The configurator should not be thought of in isolation, but as part of a story, an ecosystem that provides opportunity to inspire users and onboard them before they even enter the configurator.
For example, why not use a product listing page to show the different ways a user could interact and have impact by customizing a product? Get the user excited about the prospect and learning early. This is where wireframing and prototyping the whole journey, even beyond the parts we control as a SaaS platform, and presenting that back to a client is really useful. Base it on an audit of their current site and flows. Within the prototype, it’s effective to visually call out the opportunities for storytelling. We use blue circles with text, and often try to reuse modules that already exist on a clients ecom site, to reduce the need for engineering work on their side.
This is also where a strong understanding of art direction and creative direction come into play. Our early work with Marc Kremers at Futurecorp helped shape our understanding around the importance of consistency of UI throughout the whole journey. It helps a user feel trust in the overall product.
Video showing an early high fidelity prototype encompassing art direction aimed at offering a north star to galvanise our teams approach.
Video showing an early proof-of-concept live D2C “whole journey”.
Suggested integration flow diagram, Interaction design mapping diagram, personalised journey ecosystem diagram, Working source-of-truth end-to-end journey wireframes worked on with the client (also were a clickable prototype)
02
BE TRANSPARENT WITH DESIGN PRINCIPLES
& CONFIGURATOR ANATOMY
Sharing the design principles internally and externally with clients helps contextualize design decision making, and focus on the needs of the user.
Below is an example of a slide we share early on with clients to help them understand the design thinking which underpins our configurators. The design principles have developed over a long period of working with different clients who have different users, but fundamentally the design principles should service all of them no matter their circumstances.
The principles transcend the configurators on mobile, desktop, and on our in-store solutions. They help give us a USP and make our configurators best-in-class. I think moving forward, also having a set of design principles around what a configurator “isn’t” would be a useful tool and something to think about further.
Introducing the anatomy of the interface is also crucial in having your client speaking the same language as you throughout a project. Not only introducing the UX, but showing creative ideas of how this relates to them as a brand helps develop a strong working relationship; show an understanding of their brand and how we can leverage it to create beautiful interaction design.
BE TRANSPARENT WITH DESIGN PRINCIPLES
& CONFIGURATOR ANATOMYSharing the design principles internally and externally with clients helps contextualize design decision making, and focus on the needs of the user.
Below is an example of a slide we share early on with clients to help them understand the design thinking which underpins our configurators. The design principles have developed over a long period of working with different clients who have different users, but fundamentally the design principles should service all of them no matter their circumstances.
The principles transcend the configurators on mobile, desktop, and on our in-store solutions. They help give us a USP and make our configurators best-in-class. I think moving forward, also having a set of design principles around what a configurator “isn’t” would be a useful tool and something to think about further.
Introducing the anatomy of the interface is also crucial in having your client speaking the same language as you throughout a project. Not only introducing the UX, but showing creative ideas of how this relates to them as a brand helps develop a strong working relationship; show an understanding of their brand and how we can leverage it to create beautiful interaction design.
Design principles for our configurators shared with our clients
Anatomy of the configurators, and in store activation on ipad.
03
DESIGN SYSTEMS
FOR SCALABILITY
Initially, when we shifted to be a B2B SaaS platform we built bespoke configurator interfaces for each customer. These used most of the same underlying manufacturing system and admin platform, but were unique in most of the front-end experience and customisation capabilities.
This gave us flexibility while we were still developing our standard capabilities, learning what customers wanted and enabled us to build experimental features as a one off to validate the needs. However, to be able to onboard and serve new and existing customers more efficiently and at greater scale, it became important to standardize this process.
Introducing Universal UI:
We workshopped a new mission statement with stakeholders from all disciplines:
“Deliver all future customisation UIs without ever building a new one”
The idea from a design point of view was to provide all Unmade features as configurable in one polished, themeable Universal UI. We would regularly present this impact back to the rest of the team to keep momentum and motivation high and show delivery of measurable key results.
We developed software which produces configurable interfaces for customisation.
The capabilities included:
As we developed new features, we developed a django admin interface that we called “Themebuilder ''. A system allowing our clients to style interfaces to match their own style guides, whilst the bulk of the UX was similar for each client. Atomic design principles really helped with communication from designer to engineer, as we could specify to a molecular level the parts of a UI element which was configurable by the client.
We shifted to calling out in Figma files as much as possible the atomic design principles for each part of the interface, as shown below.
DESIGN SYSTEMS
FOR SCALABILITYInitially, when we shifted to be a B2B SaaS platform we built bespoke configurator interfaces for each customer. These used most of the same underlying manufacturing system and admin platform, but were unique in most of the front-end experience and customisation capabilities.
This gave us flexibility while we were still developing our standard capabilities, learning what customers wanted and enabled us to build experimental features as a one off to validate the needs. However, to be able to onboard and serve new and existing customers more efficiently and at greater scale, it became important to standardize this process.
Introducing Universal UI:
We workshopped a new mission statement with stakeholders from all disciplines:
“Deliver all future customisation UIs without ever building a new one”
The idea from a design point of view was to provide all Unmade features as configurable in one polished, themeable Universal UI. We would regularly present this impact back to the rest of the team to keep momentum and motivation high and show delivery of measurable key results.
We developed software which produces configurable interfaces for customisation.
The capabilities included:
- “Out of the box” implementation of our standard customisation interface.
- The ability to configure any standard features for any customer/business use case.
- The ability to be themed to match brands’ style guides.
- The ability to continuously iterate and improve on the interface and customisation capabilities.
As we developed new features, we developed a django admin interface that we called “Themebuilder ''. A system allowing our clients to style interfaces to match their own style guides, whilst the bulk of the UX was similar for each client. Atomic design principles really helped with communication from designer to engineer, as we could specify to a molecular level the parts of a UI element which was configurable by the client.
We shifted to calling out in Figma files as much as possible the atomic design principles for each part of the interface, as shown below.
Examples of Molecular Design within our product design
Multiple clients on the same underlying configurator system.
04
WHO IS IT ALL FOR?
PERSONAS, ARCHETYPES AND JOBS TO BE DONE
Creating primary user personas allows us, along with engineers, to write useful user stories when generating solutions. They give us focus for having clear success criteria for the whole team. It can be prudent to create user personas, and then work with a client to validate them and tweak them until they are a shareable tool.
As we pivoted to a B2B SaaS platform mainly servicing sportswear clients, we set out to really understand our users. Without an in-depth understanding of your users, you cannot be objective in your product design, and you certainly can not empathize with those who use your product the most.
There are different methods of understanding users, and we opted to build our personas based on research, order data and begin empathy mapping and understanding the jobs to be done framework in order to make sure our solutions were scalable. We began dealing more with sports reps and dealers who were being paid on commision to use the configurator for bulk team orders, which was a far departure from some of our clients users who might be buying a custom polo shirt or padded jacket for example. Having these personas at hand was invaluable when working on a product like Universal UI, demonstrating the requirement for so much flexibility for different user needs in our solutionizing.
WHO IS IT ALL FOR?
PERSONAS, ARCHETYPES AND JOBS TO BE DONECreating primary user personas allows us, along with engineers, to write useful user stories when generating solutions. They give us focus for having clear success criteria for the whole team. It can be prudent to create user personas, and then work with a client to validate them and tweak them until they are a shareable tool.
As we pivoted to a B2B SaaS platform mainly servicing sportswear clients, we set out to really understand our users. Without an in-depth understanding of your users, you cannot be objective in your product design, and you certainly can not empathize with those who use your product the most.
There are different methods of understanding users, and we opted to build our personas based on research, order data and begin empathy mapping and understanding the jobs to be done framework in order to make sure our solutions were scalable. We began dealing more with sports reps and dealers who were being paid on commision to use the configurator for bulk team orders, which was a far departure from some of our clients users who might be buying a custom polo shirt or padded jacket for example. Having these personas at hand was invaluable when working on a product like Universal UI, demonstrating the requirement for so much flexibility for different user needs in our solutionizing.
EPersona cross-functional workshops with order data and insights. Archetypes/ personas. Testing script formed from persona work.
05
TESTING, TESTING, TESTING
KEEP CONVERSATIONS OBJECTIVE
Conversations with clients hit different when there is objective data and research to discuss. Otherwise, “solutions” are conjecture. It is important to listen to clients and understand their pain-points as insights, but having evidence from User testing (moderated or unmoderated) allows you to create features with strong, solid context. If you can show your screeners for user testing participants are based on the agreed user personas, the testing results should resonate loudly with the client.
Any testing is better than no testing. From guerilla testing of print outs in the corridors of Somerset House when we were D2C, to paying for a usertesting platform like Userlytics. Read about how we ran user testing and present this back to our clients as part of our service here.
06
HAVE FUN
IN THE PROCESS
Having fun and enjoying the process really shows in your work. Take your client on the design journey with you, collaborate together and the solutions you develop will be championed both internally and externally.
TESTING, TESTING, TESTING
KEEP CONVERSATIONS OBJECTIVEConversations with clients hit different when there is objective data and research to discuss. Otherwise, “solutions” are conjecture. It is important to listen to clients and understand their pain-points as insights, but having evidence from User testing (moderated or unmoderated) allows you to create features with strong, solid context. If you can show your screeners for user testing participants are based on the agreed user personas, the testing results should resonate loudly with the client.
Any testing is better than no testing. From guerilla testing of print outs in the corridors of Somerset House when we were D2C, to paying for a usertesting platform like Userlytics. Read about how we ran user testing and present this back to our clients as part of our service here.
06
HAVE FUN
IN THE PROCESS
Having fun and enjoying the process really shows in your work. Take your client on the design journey with you, collaborate together and the solutions you develop will be championed both internally and externally.
Part of my team and me, having fun - in the process.