12 Product design principles

Disclaimer: The following 12 principles are my own (based on what worked and what didn’t in the past) and might not reflect the company’s view.

• (1) 👉 Build the right it
• (2) 👌 Stay pragmatic and iterate if needed
• (3) 😱 If uncertain, try it
• (4) 🖥 Mobile is secondary
• (5) 🕸 It’s okay not to touch things that are old (but working)
• (6) 🤷‍♂️ Even professionals are not experts everywhere
• (7) 💡 Don’t act on behalf of the customer
• (8) 👻 Disable don’t hide (mostly)
• (9) 👋 Inform about interface change
• (10) 🏖 Design with high contrast
• (11) 🇫🇷 Layout that accommodates more text
• (12) 📊 Where possible, work with data

👉 Build the right it

Doing one thing means not doing another thing. Resources in a startup are limited (even if millions in funding sounds a lot) so saying Yes to the right things is crucial.

“Build the right it” by Alberto Savoia ³ has been highly influentual to us.

👌 Stay pragmatic and iterate if needed

This works in tandem with (1) because we want to “build the right it” as well as “build it right”. Even if tempting we don’t have the resources to make everything perfect immediately. We commonly evaluate what the minimum⁴ is that provides value and ship that.
It might sometimes feel like shipping unfinished things, but the difference is that it’s a conscious decision. Often the small solutions already fixed our customer’s issues.
This is especially true since the quality of B2B services still lags behind the quality we are accustomed to from the B2C sector.
If we notice however that a solution is not complete we improve on the feature later.

😱 If uncertain, try it

One of the upsides of the startup/agile approach is we can ship something and if it goes awry we either revert the changes or ship an update quickly. You can’t always predict how a change is gonna affect the system (conversion rate, sales, customers support tickets, etc.), but we can ship and monitor closely the effects.

Example: As part of the purchase flow you have to upload what is called a “technical drawing” which thoroughly specifies a part’s production. Due to various reasons we had to alter how this worked.
We did successful user testing of the new flow, but that’s a tiny sample size compared to all customers. Instead of doing additional (and time consuming) research or interviews we shipped the feature and watched the numbers. It turned out, our worries were superfluous.

Note: A/B testing would have been a valid approach too, but is resource intensive. And might not be possible if you don’t have the necessary traffic⁵.

🖥 Mobile is secondary

Our customers mainly order from their desktop computers at work. This results in a mobile usage inside the app which is much lower than the web’s average.
We make mobile work but are cautious on the time spent on it (again “(1) Build the right it”).
However certain areas like Account management or Past orders might become important use cases in the future (e.g. business man or woman on the go) where it’s worth investing time into.

🕸 It’s okay not to touch things that are old (but working)

Many areas of the system haven’t changed much in the many months, e.g. login, past orders, saved quotes. They might not be perfect but for our customers they work well.
In the end we want to work on things that create a positive impact on our customers.

Example: I personally don’t like the icons from FontAwesome⁶ … the style is too cartoony … but replacing them is time consuming and will have 0 impact on our customers. Thus we keep them and it’s fine.

🤷‍♂️ Even professionals are not experts everywhere

In the past we thought: We have professional customers that know exactly what they are doing → We explain only the things that they can’t know.
Example: We don’t explain what an “inspection report” is but only which type we offer because it’s a common industry term.

→ This has been proven to be not true many times:*
You might be a great engineer with many years of experience but it can still be your first time designing metal tube parts.

We have to find a balance because it’s impossible to explain everything – a reasonable approach might be: Explain the minimum possible in a tooltip, and link out to an article/video for a more general explanation.

💡 Don’t act on behalf of the customer

This one is a bit Laserhub specific since an important part of the platform is “The Configuration” where customers specify how their parts should be produced:
It’s possible for the customer to configure a part that is not manufacturable. We give the reason why this is the case but don’t automatically fix the “error” for the customer.

Why? Often there are multiple ways to resolve it and it depends on the customer’s needs which option should be chosen.

Example: Selecting powder-coating (a color finish) with a material that can’t be powder-coated (due to its material properties). Here we tell the customer what to do to get a powder-coated part:

👻 Disable don’t hide (mostly)

Related to “(7) Don’t act on behalf of the customer”. We don’t hide unavailable options, we disable options them and explain why they’re not available. This educates customer about what is (not) possible and due to which reasons and also shows our full offering which can be important for the customer’s future considerations.

Example: Material is not available for bent parts

Sometimes we consciously violate this principle:
E.g. the option “relief cuts” is only shown for bent parts because a flat part can never have an issue that is solved by relief cut.

👋 Inform about interface change

Big changes are often necessary, but to users they can be frustrating (especially complete redesigns). They might interrupt you in a moment where you wanted to get a task done.
You know how to get it done in the current interface, which makes the changes annoying even though the new solution might be better.
As in our web-app we can’t let you decide whether to update, but we at least make it as pleasant as possible and explain what changed.

Example: When we redesigned the offer screen, we showed this popup with a gif of how the interface changed.

🏖 Design with high contrast

Many of our customers are more senior (as is their hardware) but it should be a pleasant experience nevertheless.

I go with the rule: The interface should be readable on the beach ☀️ 🌴 💻 🕶️
(I made a small page of dos and don’ts⁷)

A before and after example of some of our interface elements:

🇫🇷 Layout that accommodates more text

It didn’t happen only once to us: Text length varies a lot between languages (especially French is often longer than the others) and can break the interface.
If an interface works nicely because the words just fit … don’t go with that solution.

📊 Where possible, work with data

Data can be really helpful to challenge your assumptions. How frequent do customers use the system? How many parts do they commonly configure? Which file formats do they prefer?
Business intelligence tools such as Mode⁸ (which is what we used) make this possible, quick and easy.

---

Footnotes

1. Laserhub homepage (in German) ↩

2. CAD stands for Computer-aided design and is the common way today to design parts to be manufactured ↩

3. “Build the right it” by Alberto Savoia on Youtube ↩

4. In the startup world you often hear the term MVP which stands for Minimum Viable Product. The idea is to create the most bare version that still provides value to customers. ↩

5. A/B Test Sample Size Calculator by Optimizely ↩

6. The icon library we are using is called FontAwesome ↩

7. UI design accessibility (common pitfalls and their solutions) ↩

8. Business Intelligence tool Mode ↩