Skip to content

Product Design

Design that's so bad it's actually good

Recently, a relative sought my help to tweak a badly designed poster on Microsoft Paint.

This was meant to be circulated on Whatsapp as an advertisement for the handyman services his friend was offering in his locale.

He wanted to ‘jazz’ it up and asked if I could help. I quickly fired my Figma and started working towards revamping the layout.

Before pushing some pixels, I took a brief pause—What if crappy design is sometimes good?

Does everything have to be 'designerly' with a better sense of aesthetic? I started searching online, and elsewhere for 'terribly bad but good design' examples.

Craigslist is an example of a successful company with a website that might make Dieter Rams roll in his grave.

usertesting.com

Craigslist website is sprinkled with various UX violations. Lack of responsiveness. No clear hierarchy. Dense information architecture. Lack of contrast. Missing helper text for images. No advanced filters for search.

Despite all this, it's hugely successful attracting millions of users each month to put their local listings. And I'm inclined to think that the so-called 'crappy' design has played a role in achieving the business outcomes of Craigslist.

Part of the reason why it’s clicked is the bare-bones design which gives the impression that it requires minimal development and maintenance resources.

The 'crappy-design' effect makes Craigslist resemble a thrift store more than a high-end boutique, catering to users seeking affordable items.

Let's take another example.

Most of Japanese websites can also be considered under the 'terribly-bad-but-good' category.

Take Kakaku—A popular price comparison site with a text-heavy design displaying. Kakaku is not bad design, per se. It's just so different and unusual compared to western design principles. Just like several other Japanese websites, there is a lot of information condensed into a single page, with multiple columns and minimal white space.

A video that inspired me to write this. Good design is a relative term and is subjected to the culture and context. What Japanese consider as 'good design' is way different compared to Western design principles.

Coming back to the poster for handyman services. I'm beginning to think that there is a particular context in which even the current Microsoft Paint poster might fly well.

If I make the poster too pristine and professional would it then hurt the business? The opposite of what this poster intends to achieve.

If we work backwards from the business outcomes, the perspective around good design changes completely.

And sometimes, the design of the website can be so bad, that it's actually good for the business. Good design is a relative term. And context is everything.

Making Nielsen’s heuristics more digestible

A new spin to an ancient usability heuristic.

Jakob Nielsen’s heuristics are probably the most-used usability heuristics for the design of interfaces.

If you go to their website, you might encounter these dry prescriptive statements as shown in the image.

Recently came across this blog by Michael Prestonise and loved the way he had repurposed the old wine in a new bottle.

It converted a boring user manual into an engaging flashcard format through great questions. Some of these questions for reference—

Does the interface provide visibility of the system status throughout the task to keep the user informed about what is happening?

Will the user need to learn any new terms in order to understand this interface and complete the task?

Does the interface provide an “emergency exit” if the user makes a mistake at key points in the task?

Does the interface use consistent language throughout the whole task?

What error conditions might the user accidentally find themselves in as they try to complete the task?

Will the user need to remember anything from earlier steps as they complete the task?

Does the interface provide any affordance(s) for experienced users to complete tasks more efficiently?

Does the interface display extra information that is not relevant to this step in the task?

Does the interface provide a clear explanation of the error and how it might be resolved?

If the user gets stuck or is unable to complete the task, can they find any documentation or help?

It can take time to learn new ways to think about your designs and build them into your design process. You will benefit from these heuristics even if you add them one at a time. Additionally, these heuristics aren’t just for designers. Product managers, engineers, operational team members, sales, marketing, etc. can all apply these heuristics to interfaces (whether they are in your product or somewhere else, like your marketing website). You can share these with your team and evaluate your user interfaces together — Michael Prestonise

How to arrive at on-brand colours?

Designing for color psychology is tricky

While creating a brand, one of the hardest things to do is to arrive at the right set of colors. Colors are a tricky subject—when done incorrectly, the emotions get mismatched, and in the worst of situations, the brand might just seem all over the place.

Think of the last time you went to a fast food joint. What was the color of the brand? Most probably, it might be a combination of red and yellow. And that’s definitely not a coincidence — research suggests that red or pink occupies 41% of the food industry when it comes to branding.

Red triggers appetite, hunger and stimulation. And when red is combined with yellow, it’s used to convey a sense of quickness (fast food is served fast, expecting the customers to also leave the restaurant fast).

As color plays such a big role in influencing emotions (and sometimes even our appetite), it would be silly to ignore the color palette when it comes to brand design. Having launched multiple products, brands and experiments in the past, this is my current process of arriving at the right set of ‘on-brand’ colors—

  1. Finalise the brand DNA
  2. Finalise the emotion
  3. Finalise the color palette

Finalise the brand DNA

Brand is not just a name, a pallet, and a logo. It’s the emotional response in the minds of the customer. In fact, the word “brand” comes from ranchers identifying their cattle using an unique logo that was branded onto their skin. A brand is not just a mark, it’s a “relationship”.

Under this context, brand DNA, to be simply put, is not a design system, it’s the genome. To understand this further, we could use some handy frameworks that help us think deeply of this “relationship”.

The easiest way to capture this, is through a thought experiment — If the brand were a person, what would the person be? Would it be a friendly person? Shy? Sophisticated? Playful? If the person had a voice, how would that sound like? What would be the style of communication?

Now that we have a rudimentary understanding of the brand persona, we then start describing the persona of the target customer.

Finalise the emotion

For this purpose, understanding the psychographic profile comes in handy—What are the customer’s styles, preferences, brands they love and care about. You want to dig deeper into their motivations, needs and aspirations. (it could even be the cars they aspire to drive)

An important point to note here: psychographic profile is very different from the demographic profile. You are not as keen on understanding the age, country of origin, activities etc, but on a deeper front taking a peak into their psyche: their motivations, needs and aspirations.

Both Ozzy Osbourne and Prince Charles were born in the same year, both stay in castles and are wealthy and famous. That doesn’t make them similar customers. This is a famous meme circulating on the internet illustrating the key issue when only the demographic profile is considered.

Based on the psychographic profile of the customer, and the DNA of the brand, we move to the next step: selecting a color palette.

Why color? The color palette is one of the many elements that would finally comprise the brand, albeit an important step. We would still need to fledge out the typography, proportions (grids and scales), volumes, tone and editorial voice. And these elements go beyond the visual and editorial aspects and touch upon behavioral and experience design pieces.

However, for the sake of restricting the scope of this essay, I will cover the color palette.

Finalise the colors

I first start by collecting inspiration. Dribbble is a handy tool for this purpose as it lets you search by color. It’s easier to find out, however, it lies hidden within the search filter options. 🌈

I then start dropping pieces that resonate well with the brand DNA, and customer psychographic profile, and put the pieces together. I do this in the form of a moodboard. There are also specific tools that could make your job easier when it comes to a moodboard — Milanote is nice, but the billing is slightly expensive. Pureref is one of the best I could find, but sometimes it’s an overkill. I stick to plain old Figma to quickly conjure up a moodboard.

You can also start looking for colour palettes in isolation, but you might miss out on the context in which the palette was formulated. To get a sense of the context while ALSO exploring the colors, I use Happy Hues for this purpose.

Typicality and Novelty

Before I get into the selection of colors in the color palette, I want to take a slight detour into the gestalt theory of aesthetics.

Remember when we were young, and were asked to describe nature and landscapes using crayons. I, like other children of my age, we all did the same thing: we drew two mountains, there was a river flowing right in between the two mountains. There was also the sun rising exactly in between the mountains, and there was a flock of five birds flying together on the right.

This, my friend is too too typical. Everyone has seen this, and is too cliched to call it anything. Quite boring, isn’t it?

Now, if you compare this with the Mona lisa, it’s unique and innovative. Da Vinci experimented with a novel type of painting technique termed sfumato, subtly blending colors and tones to create soft transitions and hazy, smoky effect leading to the enigmatic expression of Mona Lisa—the mysterious smile.

It’s quite novel isn’t it? It however, need not be a Mona Lisa to be called ‘novel’. It could be an innovative painting technique, or even a modification of an existing piece. It just has to be something new—for instance, using a hexagon to represent a futuristic structure or an irregular polygon to symbolize abstract concepts.

Most of the compositions everywhere — be it landscapes, artworks, or even websites come under this axes. It’s either typical or novel, or somewhere in between the two.

Unity and Variety

Now, take an example of your toddler son given a piece of paper for the first time and starts scribbling random things with his crayons and asks you how it is. You would probably say, “great piece of work, son!”, but you might be squirming inside.

It’s too chaotic to call it a drawing. This then comes under the other axes of gestalt theory. ‘Variety’. Anything with too much chaos has a lot of variety.

Now, take three square boxes and place them alongside each other. What do you make of this composition? Isn’t this too plain, simple, cliched and boring? As the shapes of the boxes are also identical, there is a lot of ‘unity’ in this composition.

Unity and Variety come under the other axes of differentiation.

Any composition you can put them in this two-by-two grid. Unity and Variety. Typicality and Novelty.

If it’s too novel, it would be dismissed as avant-garde and too early for the society/culture to accept it. It’s an extreme outlier and sometimes be lucky enough to gain popularity when the society is matured enough to embrace it. The prison escape drama, Shawshank Redemption (1994) and Blade Runner (1982) are some examples of films that achieved cult classic status long after their release. For anything to be a hit, there has to be the right balance of typical and novel, what Paul Hekkert calls as the Most Advanced Yet Acceptable model.

Similarly, if we just use two colors across the whole UI, it has too much of ‘unity’. You need a balanced color palette to spice things up. Here’s how everything adds up:

  1. Unity: Choose a boring, dull color for 70% of the product, which will be used for backgrounds. This color should provide a sense of consistency and cohesion throughout the UI.1
  2. Variety: Select a slightly interesting color for 30% of the product, which will be used for headers. This color should add some visual interest and differentiation to the UI.
  3. Typicality: Opt for a super loud, shiny color for 10% of the product, which will be used for buttons. This color should grab attention and create a focal point for important actions.

Now, for the next step, let’s compare the moodboard created and analyse them in terms of the gestalt principles. How much of unity, variety and typicality is consisting in this piece?

Now that we have the theory in place, let’s come back to how we are translating brand into color. Brand is broken down further into action, verb and emotion to then pair up with the appropriate colors.

Come up with the emotive words — bright, warm, fuzzy, cozy, nostagic? For Tesla it would be — sexy, sustainable. And for Microsoft, the emotive words could be — friendly, faithful etc.

Come up with verbs that make up the company, the noun.

I use this tool to arrive at the appropriate color for the emotion.

One thing to keep in mind while choosing the palette is the context and culture. Color means one thing in one culture, and it could be mean something else in another culture. As a quick example, in the Western world white is more commonly seen as a pure color worn at weddings and festive events, while in China it’s perceived as a mourning color.

  • In the Western and Japanese culture, red symbolizes anger while in Hindu anger is represented by black
  • In Japanese and Hindu culture purple represents wisdom, while for Native Americans you would use brown and for Eastern Europe you’d use the color blue.
  • Love takes on different colors in different cultures too: red for Western and Japanese, green for Hindu, Yellow for Native American and blue for African

Rapid questioning to supercharge your process

Back in TU Delft, during my Masters, we had a very interesting course on the Design Process. One of the key topics of discussion was around reflection, and the ways in which designers could actively reflect on the work which they do.

Reflection in Action. (Reflecting on your work while you’re doing the work)

Reflection on Action. (Reflection after having done the work)

Essentially, one should reflect on their work all the time. While we reflect, that’s when the real learning happens.

However, there is also the trouble of having done too much reflection. This involves a fine balance about thinking about the past work, present actions as well as the enacting our future self in the right way.

This might..err.. sound a bit complicated. To ease things up, I’d made a video around how one could navigate this.

This process is not just for design but for various facets of life.

When we look at cab drivers, we believe that they are better drivers especially judging them based on years of experience. However it would be silly to evaluate primarily on the years of experience. You might have been a cab driver for 10 years, but still be okay-ish.

The actual skill of driving is inculcated when we do these two actions: reflection in action, reflection on action.

That’s also one of the tactics adopted by extreme learners who involve in rapid reflection for a shorter period of time to achieve the same skill level as compared to a more experienced learner.