Composable UX: How to make easier-to-use products
During the first decade of my life, I played with legos for thousands of hours. What makes legos magical is that you can compose different generic pieces into a creation that feels like your own. Products that can do the same thing, be composable, are easier to use and give their users a unique sense of ownership.
.webp)
Composable UX: How to make easier-to-use products
During the first decade of my life, I played with legos for thousands of hours. What makes legos magical is that you can compose different generic pieces into a creation that feels like your own. Products that can do the same thing, be composable, are easier to use and give their users a unique sense of ownership.
Key takeways
- A composable user experience is one where the user themselves can build the product to meet their needs.
- When designing a composable product the priority is put on making it easier for users to understand the grand picture of a digital product over the smaller details of each feature.
- Composable products are easier to understand and offer a faster onboarding experience.
Introduction
Any product is made up of a set of features. The common mistake we make when designing a digital product is assuming the average user will need the whole package. What we end up with is a product that is robust but is full of bells and whistles that only the power user will use.
.jpg)
If only there was a way to design lean and straightforward products for the beginner user that can become gradually complex as users get more comfortable with it. Meet a new concept: composable UX.
What is composable UX?
Composable UX is a set of principles I've come up with to help design products that are easier to use.
A composable user experience is one where the user can build the product to meet their needs. In their first contact, the user is handed a product with a narrow subset of features and can explore that minimum product in just a few seconds. From that first encounter, the user can use the product with just those minimum features or compose the product into a more complex one by turning ON more components.
Stripping the product down makes it easier for first-time users to get the whole picture. In other words, they understand faster in their minds the outer boundaries of a product.
I use this design methodology to design web and mobile apps, but it is applicable to service design, hardware, etc.
How to make any digital product composable
1. Make a distinction between foundational and optional features.
To make a composable product, start by defining the features that are foundational to those that are optional.
Foundational features
Foundational features are those required for the user to understand the big picture of a product in their minds. These are features that every user must use. The more rigorous you define the bare minimum list of foundational features, the more composable a product will be. Examples of foundational elements are:
- Account creation and login
- Profile settings
- Home or dashboard screen
Optional features
The vast majority of the features in a product should be optional. These features should be easy to access but optional for the user to understand or use.
The user should be able to play "legos" with these features and turn them on/off as they wish.
Example of optional features:
- Inviting other users
- Billing preferences
- Data export
2. Help the user get the big picture.
The key to a composable product is a blazing-fast onboarding experience so the user can, in a matter of seconds, understand in their mind what the outer boundaries of a product are. In other words, you want to make it as easy as possible for the user to "get" the big picture of a product. Once the user understands the grand vision, they can discover those smaller optional modules on their own and turn on/off which one they need.
3. Allow the user to skip onboarding.
The longer a user onboarding process is, the further the user is from getting the big picture. The user should be able to skip all onboarding steps and jump right into the product.
4. Use labels and tooltips
Help the user understand what the optional features are for with labels such as "recommended" or "advanced". Make it easy for users to understand those optional features with a tooltip.
5. Use on/off switches for user to add on optional features
To declutter the UI, you can add switches that allow the user to show a particular feature when turned on.
Conclusions
Under the hood, any product is made up of modular components. Yet, to the user, we often hand over a heavy package that can be tough to understand. We can incorporate composability into a product's user interface to solve this.
A composable user experience is one where we prioritise helping the user get the whole picture of a product over understanding its components. And we make as many features as possible optional for the users.
The result is a clean user experience and time saved in helping the user get a bird's eye view of a product.
.webp)
Chances are you played with legos as a kid and spent hours building a small town or a dream aircraft. The composable UX principles do that. It makes it easier for users to understand what a product is about quickly. From there, it allows them to turn on the features they need and make the product feel their own.
.jpeg)
.webp)