Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

UX Planet — Medium | Tarun Kohli
A good design ain’t just about glossy buttons or fancy interactions. It’s about making a product experience useful and enjoyable for all of its users.
For every interaction with the UI, there are two choices- one can empathize with the users and design something that solves their problems. The other is of course easier — one can design as per their whims and fancies and force your end users to use it.
Just as one needs expert leadership to execute a business idea, one needs holistic thinking to flesh out all aspects of the user experience. Not merely the happy scenarios.
Generally, most of the designs cover all the happy scenarios like regular amount of data on the pages, successful messages, basic screen interactions but forget few important ones which have the potential to turn the user experience into Goldilocks user experience. Just right.
A Goldilocks user experience takes care of a user who is using the product for the first time to an expert.
One could bake the following questions/checklist in their design process to make sure that it covers all aspects of the user experience –
These questions are over and above the other functionality related or happy scenario questions that are asked to get to the Goldilocks user experience.
Asking the above questions would lead you to design the below states. Here are all of them in detail with some examples.
Treat your first time user like a baby learning to walk. You need to hold the user’s hand and guide her towards her end goal.
It can easily be done by empathizing and thinking about all the possible actions a user can take to either onboard or start using the product.
We were challenged with designing the first time experience for MentorCloud.
We had two options — to have the user login and then figure out how to add their interests. This would have caused the user to land on an empty dashboard. Or, seamlessly integrate adding of their interests experience at the first time use. This would have helped them see a relevant feed related to their interests on their dashboard.
We chose the latter and it made the world of difference for MentorCloud users.
There are times that we forget the cases when there might not be any data to show. This is one of the most common scenario which makes a pretty slick design take a fall on its knees.
Engineers typically solve this by showing informative yet unhelpful messages without any suggestions or call to action like “No Search Results Found” or “Sorry, no entries have been created so far”.
But, there is another way.
We could use this moment for a user to take an alternative action. Most of the scenarios lend themselves for a user to do something meaningful when there isn’t any data in the system.
Below is an example to design for such cases. We designed for a teacher to nudge students to become active when they haven’t enrolled yet. The design options were simple — either leave her wondering what she should do next or be a good Samaritan and light up her way.
We chose the latter.
On similar lines, we designed the below screen for our product- AGORA. Here, she is encouraged to start a discussion when there isn’t an active one.
It’s unfair to make people look at that boring white background while they wait to see some data.
This is where one could add some sparkle to the user experience and make it worth the wait.
Let your user know that the wait is about to get over- any moment.
Credits- Nick Frost
Do you have lots to tell? Is your UI brimming with data? Like gigantic heaps of data?
If that’s the case then it’s prudent to take a pause and reflect how would the user navigate through the monstrosity of data.
Would the users like to see a list? Would they like to see the recent records first? Would they like to search? Filter? What all aspects of data would they like to see in this gigantic heap? There could be questions galore to understand the user’s perspective and design accordingly.
That said, the 2 most popular paradigms to solve this state is to use pagination or an infinite scroll.
An easy example could be a bank statement. A user wants see her bank statement for the past 12 months. With hundreds of transactions, its apt to use pagination which not only sorts the data into chunks but also looks clean.
Yes, we all do mistakes and we all like to hear what went wrong so that we do not repeat it the next time.
An error state must be clear. Concise and with a little friendly tone. They should instruct what to do next.
Unlike this-
A fatal error occurred. And to add to my horror, they expect me to be ‘OK’ about it.
Will you be able to recover that? YES! NO! MAYBE?
The right idea should be to show a helpful error with some call to action to either take an alternative route or fix the error.
For example, Hostmaker gives you information about what exactly happened. If you try to enter an address which is not available for hosting, they inform you that they are unavailable for service here.
What more? “Try a different address” prompts users to check for another address which might be available.
I’m writing a design series to share my experiences and learnings as a designer. You can find my earlier writings here –
How to design Goldilocks user experiences by keeping these states in mind was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
AI-driven updates, curated by humans and hand-edited for the Prototypr community