Articles Category

How to be a Faultless Designer in Web Design

Less is more is a fascinating, age-old concept (and the concept upon which minimalist design is based). When applied thoroughly, less is more can generate higher user engagement, better usability, and more aesthetic appeal.
Unfortunately, many designers can’t seem to get it right.


We see so many boring, seamless, and emotionless design products that just don't spark joy.
I wonder: what are the ideal attributes for a designer to possess. Those timeless, versatile qualities that work with just about any trend, and can be easily applied to all design fields?

I began a personal crusade to find out. The result was the discovery and definition of a brand-new figure in the world of design.

Meet the Faultless Designer.

 

Who is the Faultless Designer?

Aside from being a wonderful title for a book, the Faultless Designer is able to properly create less with more.

This, of course, is far more complicated than it sounds! Creating less with more is a skill that’s very hard to master.
So I decided to challenge myself. I began by searching for some ‘simplicity hacks’ from my own life.

The timeline of my life

Over the past twenty years, here are some of the ways I’ve been able to do more with less:

In 2000, I was fearLESS when I left Sicily to live and study in Milan
In 2008, I was doubtLESS when I moved to live in Greece
In 2012, I was restLESS when I started my own design agency

Now in 2019, I want to do even LESS!  

I want to add pure simplicity to the ways in which we design experiences for users, to create efficient and enjoyable products.

 

Less and More

From my research, I’ve narrowed down five essential characteristics of the Faultless Designer:

Less Confusion
Less Information
Less Frustration
Less Error
Less Nonsense

However, would LESS be so powerful if we didn’t also understand its vital counterpart, MORE?

Here’s what I mean by this:

Less Confusion is More Focus
Less Information is More Meaning
Less Frustration is More Time
Less Error is More Trust
Less Nonsense is More Emotion

At first glance, this looks like the ideal wishlist for a dream life!

But in our case, it’s a to-do list for becoming a better designer. It can form part of a commitment to design memorable experiences with simplicity.

Of course, practice is far more illustrative than theory. So I’d like to share my attempts to apply these five characteristics in the specific field of web design, using personal examples from my work over the past year.

 

Characteristic n°1:
Less Confusion, More Focus

Categorise, organise and prioritise

 Less confusion, more focus


Does the name Marie Kondo ring any bells?  An acclaimed author and TV presenter, she is the famous founder of the KonMari method. The KonMari method encourages people to be ruthless in discarding items that clutter their houses. We should keep only what truly "sparks joy", or things that we are emotionally attached to.

This is a clever method; one that also works very well when analysing what content should be included on a web page. You might have noticed that many designers have a tendency to fill each page with as much information as possible, so that its message can be made clear.

We should all stop this immediately!

The way our mind processes the information it receives is very selective – meaning it cannot be overloaded with too much. It has also been proven that efficient content organisation is easier to remember.

My design interpretation of the KonMari method was to imagine a website as a house, in which each page is a different room. Just as in a house, each room communicates on a different level. For each page, I then scribbled a simple list of information on a piece of paper. The list included what the client wanted to see, and the kind of interaction I wanted to create (for example, impact vs. informative, inquisitive vs. explicative).

organising content on paper

I added symbols to each item on the list, which were:

Star: mandatory (this item sparks joy!)
Heart: nice to have
Eye: check for fit - otherwise, discard

This is a very simple way to understand what information is really essential for each page. From this starting point, I sketched some variations of wireframes that could be presented to the client. This can help to ensure their focus on content and interaction, rather on more emotional aspects such as colours, typography and images.

 

wireframe of Spore magazine for CTA
design of Spore magazine for CTA

Of course, including less information means more white space. This brings us nicely to the second rule.

 

Characteristic n°2:
Less Confusion, More Focus

Appreciate white space

Less information, more meaning


In November 2018, I was honoured to speak at NYC’s Smashing Conference.  Soon after my speaking engagement, I spent a few days touring Manhattan and Brooklyn.
One of my stops was the National September 11th Memorial.

If you haven't been, let me describe it for you.  Where the Twin Towers once stood, are two large waterfall pools. All the names of the people who died that day are engraved on the pool walls.

There are eight acres of empty space, which is surrounded by trees and benches.  From here, you can admire the Tower of Freedom, which stands high and proud.
In such a vast, empty space, other skyscrapers – those of more commercial and practical use – could easily have been built.

Instead, the deep void of these two pools forces our minds to reflect upon and think about the tragedy of that day.

This is a very shocking example. But it also explains precisely how white space can make something even more meaningful.

In design terms, white space can equal respect.  For example, brand guidelines always suggest having a mandatory clear area around the logo.

Cramming a web page with content and huge text won’t deliver the experience your readers crave.
By adding less content, and increasing the amount of negative space (another term for white space), you naturally give each element its own dignity and meaning. You can create something elegant and clear, whilst improving the user experience.

I have designed the website for the J and Beyond conference for the past nine years. Here’s how its website design has evolved during this time.  

J and Beyond 2010 and 2011

J and Beyond 2018

When you are able to use white space to create harmony and visual support in your site navigation, you are also saving time and frustration for the user. 

 

Characteristic n°3:
Less Frustration, More Time

Create enjoyable experiences

View of Ermoupoli, Syros

 

In 2014 I and my husband, Spiros, decided to move away from the noisy city of Athens to live on one of the many beautiful islands Greece has to offer. We chose Syros, the capital of the Cyclades islands.

In this evocative, four-season island in the middle of the Aegean sea, I realised I had been rewarded with something the city had taken away from me.

Time.

My life feels much simpler. I finally have more freedom to do all the things I really like, instead of spending unaccountable hours stuck in traffic on my way back home, or standing in line at the post office.

Saving time is the reason technology exists.

Of course, by filling your web pages with less content, prioritising only the most important information, you will save your user some crucial loading time. However, this is not the only way users perceive time when they surf the web.

Something as simple as completing a form, or buying a ticket, can easily become a disheartening experience when there is no feedback, entered information suddenly disappears, or the confirmation page doesn't load properly.

Now imagine that the user is physically impaired, and they need your digital product to improve their quality of life.

This is exactly the case for Valys App, a booking service for people who need assistance with public transport when travelling around the Netherlands.

When designing this app, I took particular care to illustrate the perception of time. The dashboard features different cards that indicate the status of each booking, when the booked taxi or assistant will arrive, or if there is a delay due to traffic or road works. It will also signal a reminder for when an upcoming trip will take place.

 

Valys App dashboard and cards

Valys App booking system with timeline


The booking system was split into three steps, so I could divide the amount of information needed into manageable chunks. Each step was also designed to take just a few minutes to complete.
Additionally, the app offers a way to save the most frequent trips, so that users can auto-fill the form without going through each step again.

The booking system includes a timeline that not only indicates progress, but rewards the user by confirming when each step has been correctly completed.

When loading transportation options, the cards display a simple animation to inform the user that system is working on a result.

Finally, users can check their journey, and the amount of time left to reach their destination, whilst sitting comfortably on the train or bus.

Valys App itinerary


Simple tricks that reduce the amount of discomfort in complex tasks, and adding the right amount of feedback to guide the user, can thoughtfully change the perception of time – with the happy result that waiting is not so frustrating!

More focus, more meaning, and more time inevitably leads to an online environment that the user feels free (and happy!) to navigate.

 

Characteristic n°4:
Less Error, More Trust

Design for consistency

Metro sign in New York City

 

As I toured Manhattan last year, I felt comfortably lost in the city.

I didn't need to use a map, because I was immediately able to discover and master the organisational street pattern. This meant actually getting lost was almost impossible!

Now here’s a curious thing about Manhattan: it’s basically a giant grid, divided into avenues and streets. The avenues run north and south, while the streets run east and west.

The same philosophy is used for the metro. I just needed to remember the direction I needed to follow, then identify the number of the avenue or street to stop at.

I felt I was living another, more organised, life. But most of all, I felt in control.

So what does all this have to do with visual design work?

You’ll know instantly, if you’ve ever tried to navigate an e-commerce website with a design so sloppy that you were afraid to provide your payment details.

A consistent and harmonious design adds an unspoken layer of trust to your website.

For this very reason, when designing a digital product I always create very comprehensive design libraries, so that the experience is uniform and intuitive across the whole site.

By doing this, I not only avoid interaction errors, I also raise the bar of user trust and brand familiarity.

In creating design libraries, I usually start by listing all the elements I believe I may need, even before jumping into the real interface design.
From colours to headings, from buttons to links, I like to document every single component I intend to use in the design itself. I try to refrain from adding numerous variations, because these are difficult to manage in development.

When the views and interactions start to grow, my library is a great way to get back to basics; by using existing UI, and ensuring the design remains inline with those aspects I had designed months before.

Here are some of the most important elements in an app design that helps drivers track their working hours.

Design library for the Driver App


Designing libraries may sound uncreative at first. But trust me: using them won’t turn the interface into a boring and predictable experience!

In fact, I strongly believe that you need the ‘emotional’ factor to help create a truly amazing and inspiring experience.

 


Characteristic n°5:
Less Nonsense, More Care

Design with and for emotions

Mount Fuji, Japan

 

Two years ago, I travelled with my husband to Japan, a country I admire for its belief in minimalism and attention to detail.

Our last day, while comfortably sitting in our plane seats, we witnessed a very unusual scene.  Baggage handlers and staff suddenly downed tools, so they could bow and wave goodbye to our departing aircraft.
This curious scene makes us wonder for days afterwards: what was that?

We then discovered the answer in a book: Ikigai: The Japanese Secret to a Long and Happy Life.

We learned that Japanese people believe in the philosophy of eight million gods. Every lifeless item has a god inside, so it must be treated with respect.

This religious attitude extends to humans too, and it forms the unconscious undercurrent of Japanese culture today.

I used this learning to reflect on my own work as a designer, and now I ask you to do the same.

Our digital products, when created with love and respect, can shine with their very own life and light.

Of course, we don't need to believe that there is a god inside an icon or a button. But we do need to design whilst thinking about the people who will use our products, and how many lives will be affected by our work.

This is the very essence of user-centred design. Each and every element of our interface should be crafted with care and consideration for the end user.

I always try my best to create memorable and emotional experiences, even when, in reality, the tasks I have to execute appear boring or mandatory.

The Bus Driver App I exampled previously (point n.4) was built for the Dutch logistics company, Transvision. It’s an app for contractors to ensure the continuous quality of their transportation service, avoiding drivers who are not available when needed, or those who have worked excessive hours.

Driver App tracking button

At first glance, this could have been a very dull experience! However, I started by thinking about the user and their state of mind. Drivers work for eight hours, affecting many different lives every day.

Don’t they deserve more than a boring tracking button?

Along with the main functionality of the app (the tracking button), I created a ‘reward’ card to be displayed at the end of each shift, to thank the driver for their hard work.

Driver App reward cards

 

Conclusion

In summary, being focused, adding meaning, preserving time, building trust and thrilling emotions are just the beginning of our design transformation.

The Faultless Designer characteristics

I’m sure there are many other characteristics I could add to my ongoing research. However, I think those I’ve listed here are the most important in facilitating real changes to the way we work.

Last year in New York, I had the pleasure of meeting a truly inspirational person, the designer John Maeda.  

So I would like end this piece with his words. For me, they form the ultimate golden rule of design, and they should help you remember the five characteristics I have discussed here.

 

Simplicity is about subtracting the obvious, and adding the meaningful.