I wish I didn’t find it so difficult to write. I’m much more of a visual thinker, which is the reason why I became a designer. I’m constantly looking for ways to improve my writing though, as it’s a useful skill, not only in sharing my design knowledge but in all aspects of work. Also, my writing isn’t very good and desperately needs improving.

In researching how to become a better writer, I’ve found a number of lessons about writing can be applied to design. Here are 5 lessons I’ve learnt:

1. First Drafts (Designs) are Always Bad

Don’t you love opening your design tool, excited to start new design, only to find out your first version is utter rubbish? No? Well, I do.

Anne Lamott, author of Bird by Bird, is often referenced in the writing world when it comes to first drafts:

Almost all good writing begins with terrible first efforts. You need to start somewhere. Start by getting something—anything—down on paper. What I’ve learned to do when I sit down to work on a shitty first draft is to quiet the voices in my head.

Great writers never expect their first drafts to be any good and designers should adopt the same mindset.

I don’t ever have to “quiet the voices in my head” when I sit down to start a design but I certainly never expect the first version of anything I design to be any good. I accept it and embrace it as part of the process.

Consequently, I rarely show anyone the first version I design, unless I want to demonstrate how I arrived at a design I’ve settled on or show how much exploration work has gone into the project.

I naively thought as I improved my craft over time my rate of producing great design work first time would increase. It hasn’t. Not even after almost 13 years. I still need to get the first version out of my system, no matter how bad it is, just to get started.

2. You Write (Design) to Find out What You Have to Say (Create)

Sean McCabe realised the act of writing is what actually leads to you discovering what it is you will create.

You don’t write because you have something to say, you write to find out what you have to say.

Writing helps you process the way you think, and gives you insight into why you’re feeling a certain way or what you’re thinking about.

Like all articles I write, writing this one has led me to discover exactly what I wanted to say and research about the topic. I had a general idea but I’m still shaping it as I write this very sentence. Design is the same way.

When I have what I think could be a great idea, it isn’t until I get the idea into my design tool do I know if it actually lives up to my expectations or if I need to explore a different direction. Then, like writing, it gets shaped and moulded into something better.

3. Re-writing (Iterating) Is the Single Best Way to Sharpen Your Ideas (Designs)

After you’ve let your first draft spill out onto the screen, you need to figure out what to do with it.

David Perell is a prolific writer online, whether it’s one of his tweetsorms or thousands of words for an article. His advice resonates with me as a designer:

Re-writing is re-thinking. It’s the single best way to sharpen your ideas.

I love this advice as it’s exactly how I think when I design. You don’t simply design something once and you’re done. You need to continually refine your idea to narrow your way towards the best version.

Writing and re-writing improves your thinking, so improving and iterating your design improves your design thinking.

It's important to try different ideas to see what will be the best at solving the problem. There are usually many ways to solve the same problem but experimenting will lead to better results.

I always have an “Exploration” page in Sketch. It’ll often get very messy but that’s a good thing. This isn’t final work I’m going to show anyone.

Often, I’ll abandon the first version way before it gets close to a finished state because clearly isn’t heading in the right direction.

Rarely will everything click right away with the first version (unless the task is relatively small and straightforward). Fortuitously, this happened to me recently but I simply can’t remember the time before that when I was so lucky. Needless to say, it was a long time ago.

4. Every word (element) has to earn its way onto the page (screen)

This is advice I’ve heard from Ramit Sethi when talking about writing sales pages and I’m sure I’ve heard similar from other writers. It’s pretty obvious how it applies to design.

As I write this, I’m currently in a battle to remove a single form field on a registration page. Marketing wants a phone number for… marketing reasons. No, thanks. It’s marked as optional to the user but it shouldn’t even be there in the first place. It hasn’t earned its way on to the screen.

I love removing unnecessary elements from a design. Reducing a design down to the absolute essentials is one of my favourite things to do. There are already enough things in this world to distract people, don’t add to the noise.

5. Easy reading (easy to use) is hard to write (design)

David Perell again:

“To write well, you must accept that you will only publish a small percentage of what you type”

You have to get comfortable throwing away a lot of your work.

“Watch a Chris Rock special on Netflix and you’ll see the well-timed jokes and the sold-out arena. But you don’t see the work. You don’t see the 50 performances he gave at small comedy clubs around the country, and you certainly don’t see the jokes that bombed along the way. It’s the un-natural grind of failing, failing, and failing some more that makes Rock look so natural under the bright lights.”

This is a common theme among the most successful comedians. They create a lot of work and test to find out what works best. As I always say, quantity leads to quality. We’ve all heard the “quality over quantity” but when it comes to creativity, the opposite is true.

This advice is echoed by American author and screenwriter, Ray Bradbury:

“Quantity produces quality. If you only write a few things, you're doomed.”

To read more about how writing can help you as a designer, here’s some extra reading:

• 7 Ways Writing Improves Creativity
• 5 Ways Writing Helps Your Design Career

“90?!”, you might say. While that number may seem high to some, to me, it demonstrates a professional’s desire to create the best work possible.

As Charlie points out, ConvertKit’s homepage attracts a high number of views and is a significant page for communicating how the service helps creators.

Quantity leads to quality. I see examples of it time and time again.

It happens in all creative fields. For example, video games.

An extensive leak of Nintendo’s old code and documentation shows different iterations of Yoshi before he became the lovable dinosaur we know today.

Some of them are very different to the real Yoshi.

I would bet there are many more versions that didn’t even make it past the sketching stage and probably many more making it into the digital process than we see here.

Some ideas are absolutely terrible, like Mario punching Yoshi in the head to trigger a fire attack:

But it’s OK to have terrible ideas at this stage. No one is going to see it. Well… unless hackers break into your system and share it with the world as happened to Nintendo, but even then we can clearly see why most of their ideas never saw the light of day.

Amateurs stop iterating too soon. Professionals iterate as much as it possibly takes to create something great.

If you want to create better designs, get comfortable creating more and throwing most of it away.

This simplicity can be misleading and it could be harming the usability of your designs.

I’ve picked out a number of examples of false simplicity and what to do to actually make them simple and usable.

Menus

During my experience of working on large sites with millions of users, I’ve found the hamburger menu is not exactly to everyone’s taste.

It was initially seen as a necessary step to fit many items onto smaller screens but then something terrible happened. Designers started using them on desktop views, even when there are only a handful of menu items that could comfortably all fit on screen.

Presumably this is so the website can adopt a cleaner, more minimal view. Sure, it can look a bit nicer but it comes at the expense of usability. The old saying, “out of sight, out of mind” applies perfectly.

Here’s an example I found after literally spending less than 1 minute on a well known “inspiration” gallery website:

They have a grand total of just 5 links in their menu. There’s no reason to hide them, except if you’re a weirdo and want prioritise minimalism over everything, so much that you don’t even want to include the name of your company on the design. WTF?!

“We create homes with soul”. The same certainly can’t be said about your website. Zzz…

Even if there were too many items to display, there are better ways than hiding it all behind a hamburger menu.

If you want fewer people to use your navigation, then by all means, stuff it behind a menu button, even on desktop. Fewer people will bother going into the menu and use the navigation than if it was exposed for all to see.

But what happens when you can’t show everything?

As a news site, The Guardian covers a wide range of categories. With that, comes an extensive number of navigation items.

On mobile and desktop, The Guardian shows what most likely is the most commonly viewed sections first. Following that is a “more” button on desktop and our old friend, the hamburger menu on mobile.

A similar approach is taken by the BBC. The sport menu uses the same technique, until you go down to mobile widths, where a hamburger menu appears.

The sport category page uses a horizontally scrollable list of items beside the “more” (All Sport) navigation button to fit as many menu in as possible no matter what width the screen is.

I see this as the best of both worlds. Like The Guardian, they’re guaranteed to have at least the first few items visible no matter the screen width, and then more are accessible with a simple swipe or by using the All Sport button.

Navigation Study

Nielsen Norman Group performed a study on menus that were hidden, visible or a combination of both (like The Guardian and BBC) to test usability. Here’s what they found:

Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.

• On desktop, people used the hidden menus in only 27% of the cases, while they used visible or combo navigation almost twice as much: in 48% and 50% of the cases, respectively.
• On mobile people used the hidden navigation in 57% of the cases, and the combo navigation in 86% of the cases — 1.5 times more.

Search

Even hiding a search field behind a button will reduce usage.

On multiple sites I’ve worked on, we discovered conversion rates when using search was significantly higher than those poor souls who choose to aimlessly click/tap around to find what they’re looking for.

I’m kidding of course. Browsing is fine. However, if it looks like people are benefiting from using search but it’s hidden, bring it out into the open. Give the people what they want!

You might think there isn’t much difference between the two. They’ll still have to click something before they can actually search. One click on the search icon, one click in the search field. It’s the same, right?

Not quite.

A search field is much more prominent than a magnifying glass icon. You’re effectively communicating to the user they should use search. Look, we've made it big so you can see it, please use it. It’s an open invitation for how you want them to navigate.

Smashing Magazine reported an 80% increase in searches when they exposed the search field rather than showing a magnifying glass icon which reveals it on click/tap.

So we’ve switched from hiding a search under the “Menu” button towards displaying search box all the time. The outcome? The searches have increased by 80%.

Don’t hide important navigation/search behind an icon if you’d like to drive more traffic towards it. pic.twitter.com/kyLkKlB3ta

— Smashing Magazine (@smashingmag) June 1, 2020

A site I worked on gained 2.5 times more searches when we did the same thing as Smashing Magazine. An other site I worked on also gained a significant higher usage when implementing the same design.

Icons without Labels

UserTesting conducted a study into icons with and without labels:

In our study, we found that for icons with labels, users were able to correctly predict what would happen when they tapped the icon 88% of the time.

For icons without labels, this number dropped to 60%.

And for unlabeled icons that are unique to the app, users correctly predicted what would happen when they tapped the icon only 34% of the time.

If there’s any doubt about what an icon does or where it will lead to, add a clear label. It really is as simple as that.

A design team I worked on were tasked with designing a comparison tool and it needed to be part of the main navigation. It also needed an icon to match its neighbours. Problem is, there just isn’t a great commonly understood icon for comparison. The only way we could to make it clear was to include a label. We even kept the label on mobile despite the limited space. It’s that important.

Here’s an example from YouTube’s iPad app where some of its icons could benefit from labels:

• Wifi icon with a screen(?): Unsure what it does.
• Video icon: probably for creating your own video.
• Magnifying glass: obviously search but it isn’t prominent enough.

There’s plenty of room for each icon to have a label. There’s no excuse. Here Google, I’ve done some free work for you.

The funny thing about the weird wifi screen icon is that I’ve used it multiple times before, and I still forgot what it did. It’s actually for sharing your screen to another device, such as an Apple TV or Google Chromecast.

Apple have a universal symbol for AirPlay. I know what that means because I’ve used it many many times. It’s instantly recognisable now. Google’s icon is only used in the YouTube app, so I just don’t have the same familiarity with it at all. Remember back to UserTesting’s study that only about 34% of users will know what it means.

As we discovered earlier, search usage is almost guaranteed to be increased by making it more prominent and exposing it instead of hiding it behind an icon, hence why I’ve recommended showing the search bar, but there’s a better way and Google already do it elsewhere.

Here’s YouTube.com, with a big search bar. The search is the most prominent element at the top, which is what you would expect when you’ve got an almost endless world of videos you can watch. The iPad app really needs to do the same.

Dropdowns

If a select dropdown element only has a handful of options, consider displaying them all at once using radio buttons. Not only will it require fewer actions to make a selection but users will be able to see all options at once, allowing them to make a faster decision.

Look at this dropdown that only has a single item hidden away when there’s an embarrassing amount of room available. It drives me crazy.

Carousels

Studies about carousel usage shows they barely have any usage beyond the first slide. Even then, the total engagement with the carousel element, even including the first item, tends to be very low too. As low as 1% of total visits, with only one site in the study going above 3%.

Thankfully, I’m seeing far fewer homepage carousels as I browse the web these days, so the message seems to finally be getting through. It took a while but hooray!

iPadOS Files App

I’ve recently started using iPadOS for writing and I noticed something annoying about the files app. It defaults to a grid view of icons, as you can see below:

That’s not really a problem in itself but what do you do if you want to change it to a list view? Can you even do it? Without any prior knowledge there isn’t an obvious way of doing so but it can be done.

If you guessed you have to scroll down to reveal the options but only while the view is already at the top of the page, you’re a genius and we may need to send you off for scientific testing for the benefit of everyone using digital interfaces. Please get in touch (and don’t worry, I’m sure they won’t do too much damage poking around your brain).

Or you may have accidentally come across this in iPadOS 13 like I have.

The key here is you have to be at the top of the page before you can scroll to reveal them. There isn’t a way to reveal the options while you’re further down the list of files.

I only discovered the options accidentally, otherwise I would’ve had to search the internet just to see if they exist.

macOS shows these options by default without the need to do anything. Did Apple prefer a cleaner look on iPadOS at the expense of usability? Or were they sticking too closely to making the iPad as simple as possible that they crossed the false simplicity line?

It’s baffling why this isn’t displayed by default in iPadOS, or at least incorporated in a way that doesn’t require accidentally stumbling upon it or having to search to see if it even exists.

Good news! This is no longer an issue in iPadOS 14 as there’s now a button at the top of the screen and it's always available.

Form Field Labels

Hiding form labels and only using placeholder text may make for a cleaner looking form but it also creates usability issues, as Baymard found: issues with hiding labels in forms:

we observed that when users had to correct errors in forms with the field labels inside the field, they ended up deleting the entire input just to be able to read the label once again – after which they’d have to re-enter the same information once again with just a couple of characters changed

This is more problematic with longer forms, as you’re unlikely to forget what each form field is when there are only 1 or 2 text inputs.

A smart solution is to use a “floating label” where a label appears as you focus on a text input, retaining the compactness of the form and also keeping context for the user filling it out.

Dyson Dial

While studying Dyson’s app to show how I would fix its biggest UX problem, I noticed a smaller issue in the behaviour of the timer function’s UI. The numbers only appear when you start moving the slider.

There's just no reason to hide the numbers around the dial at all. What are they gaining except a slightly more minimal design? If it was visible at all times, I would be able to see all the available options and I would know exactly where I would need to move the slider before interacting with it. It’s just pointless minimalism.

Be careful of oversimplifying. A minimal visual design does not necessarily mean it'll be easier to use.

Usually known for mostly cold, wet and cloudy, summers have become noticeably warmer, so my wife and I decided to upgrade our cheap fans by investing in something better.

We opted for a Dyson fan that also purifies the air (hopefully good for my horrendous hay fever) while it cools the room and like most technology these days, it's controlled with an app. Unfortunately, it comes with a rather frustrating flaw in the UX design.

The Dyson Link App

At first glance, it doesn’t look bad at all. It actually looks quite nice. The background image of the house looks great and the data is displayed in an easily glanceable way, separating inside and outside conditions.

The controls of the device are easy to grasp and use too. Placing the controls towards the bottom of the screen is smart as they’re all within comfortable reach of my thumb.

If the air quality changes beyond a certain amount, an obvious change in colour of the house or the outside area changes to warn you. “Fair” should be yellow according to their air quality scale though, but you get the point.

There’s a lot to like about the Dyson Link app.

The main UX issue mentioned earlier comes when you want to switch between different sections.

There are effectively 5 sections in the app. The 4 icons in each corner of the screen take you to 4 of them with the home view you see when you first load the app being the other.

Problem is, once you go into a page, you’re unable to jump from one to another as easily as you could. They’re just overlays and you have to close each one to go back to the home page before you can navigate to another page. Switching between two sections becomes more work than it needs to be.

It also took me a while to know what the clock icon actually meant. I kept thinking it was the snooze function but it took me many wrong taps for me to learn it is actually for scheduling the device to turn on and off at specific times.

A Better UI Solution

The tab bar rearranges the icons to the bottom of the screen in a more convenient location. The addition of labels makes them much easier to understand. I wouldn’t have had the initial confusion with the clock icon if there was a label.

The benefits of this tab bar redesign for Dyson:

• You can get to any other page from wherever you are with a single tape making it much easier for someone like me who likes to regularly check the status of the fan and adjust accordingly.
• Each icon has a label. Now there is no doubt what each icon means.
• The tab bar is easier to reach than close buttons on larger devices.

Additionally, if you have more than one Dyson device, another tab bar can be introduced above the main navigation, to allow you to switch devices no matter where you are in the app.

Other Examples

Slack moved away from placing everything in a menu (it wasn’t even a menu icon, it was just their logo) to...

...you guessed it, a tab bar!

Apparently, Facebook also introduced a tab bar at the bottom of their app at some point. I say apparently because I wouldn’t actually know, having deleted my Facebook account many years ago due to their creepy behaviour. Delete your Facebook account!

Even Snapchat, which was somewhat known for its less conventional navigation, adopted a bottom navigation bar.

It’s become such a standard element of an app design over the last few years, it makes you wonder why Dyson didn’t go down the same route.

That’s it. A simple but effective change.

So simple, you might think, what’s the big deal? The big deal is you may be using the app multiple times a day when stuck in doors in the heat. It needs to be better, especially considering the premium price of any of Dyson’s devices.

Next time you think about using custom navigation, consider using a tab bar.

I was interviewing for a university Master’s degree course in 3D design and animation but they were unexpectedly interviewing in pairs.

So there I sat, watching in disbelief, as the guy paired with me pulled out these amazing biscuit tins he designed himself.

Yes, biscuit tins.

It might not sound like much but they were really impressive, especially for someone still learning their craft. They weren’t ordinary biscuit tins. They were uniquely shaped with a nice graphic design on the lid, making my already pathetic character animation look even worse.

My animation may have well been my character packing his bags and walking out of the door, shouting “I’M OUT!”. I wanted to do storm out myself but I was mesmerised by the beauty of the biscuit tins.

He didn’t even need to bribe the interviewers with actual biscuits. The tins were completely empty. They did all the talking.

I learned an important lesson that day. The best thing you can do when interviewing, is to do something unexpected and impressive to stand out from everyone else.

You can probably see where I’m going with this but the amazing thing about this advice is almost no one else does it. You’re practically guaranteed to stand out.

How to Stand Out

You’re a designer, so get designing. Do what the biscuit tin guy did with his 3D skills and use your design skills.

Study the website or app of the company you’re applying to and pick out one aspect you think needs improving and then... improve it!

Whether it’s reworking a user journey to improve conversions, or redesigning a UI element to make it more usable, redesign it the same way you would if it was actually your job.

(If you’re unsure what to do, see an example towards the end of this article for what I would do if I was interviewing at a specific company.)

Do the work and bring it with you on a laptop/iPad. Wait for the right moment, and surprise your interviewer(s) by saying, “I’ve got something I would like to show you, if that’s ok”. At the same time, grab your device from your bag.

There’s something very dramatic about it. It grabs attention.

If it’s a remote job, you can simply share your screen on the video chat and walk through your work, just as you would if you were in the same room.

Free Work can Pay

You'll no doubt have been told by “experts” to never work for free but it’s terrible advice. In this case, it shows you’re keen to:

• work on their product
• go the extra mile
• think outside the box
• take the initiative

You’re also giving the interviewers an insight into what it would be like if they hired you and you were actually working for them. This project is the closest you will be to working at the company without actually working there. It helps reduces a potential concern they may have.

Stand Out Even More

Write up the process of your redesign. Show your design thinking and explain the benefits your changes will have. Print as many copies as you need to give to everyone attending the interview.

Hand your physical report to them at the end of the interview. Surprising them with it just as you’re leaving will add an extra dramatic moment.

If it’s a remote job, email the interviewer(s) to say thank you and share it with them then.

It’ll act as another reminder of you, as well as your great work.

Example of Work to Show

Let’s say you were applying for a design position at American Express. Have a look at their website or app and see what you would highlight as something to improve.

Here’s how I would improve American Express’s app as an example of something you could do. I focused on one aspect of the design I knew I could improve and then documented the work.

The article you see there is an example of a report you could print and hand out.

This is quite a simple example. You could do something more complex if you choose. Additionally, you could prototype something in order to get a better feel of the new design.

What to do if you’re asked to do an assignment

You may be asked to do a small piece of work or test/assessment. In this case, you’re on a level playing field with everyone else. Or are you?

Do the design work/test they’ve asked for and do an extra piece of work as well.

It might be a squeeze to fit them both in before your deadline. If that’s the case, see if you can do something smaller in scale as your extra piece of work. An additional piece of work, even smaller, is better than nothing.

Thank you, biscuit tin guy. You helped push me towards the design career I have now by teaching me a very valuable lesson.

Hopefully you’ll also be thanking the biscuit tin guy one day.

For the rest of us, the user experience of paying off something like a credit card doesn’t have to aim to be fun. It just needs to make it as quick and painless as possible to get the task done.

Towards the end of last year I got my first ever credit card and of course, “there’s an app for that”. I use it almost every day to keep on top of payments but the payment flow could do with a little attention.

Amex App Payment Flow

American Express’s UI design for their app’s payment process bugs me every time I use it because I know there are a few small enhancements that could make a big difference.

Here’s how the payment process works currently:

I’ve been using the app for a few months now but it didn’t take me long to realise they could reduce the number of steps to speed up the process.

A Better Design

Here’s how I would redesign it:

There are two obvious differences from the original:

1. Number of steps reduced from 5 to 3
2. Visual design enhancements

Steps 1 and 3 have been removed to streamline the process, as you’ll see in the detailed explanations below.

Step 1

The first step is unnecessary, so the process now starts at what was previously step 2. Off to a good start.

Why though? Pressing edit in the payment amount section simply shows all the options available. There’s no reason why the options can’t be shown immediately without having to do anything.

The edit button in the payment method section is also guilty of not being required as it only revealed a single option: “Add new card”.

I’ve also taken the opportunity to clean up the visual design. Thanks to the larger headings, each section is more distinctive. There’s a clear difference between what options are available and what aren’t. It looks nicer too.

The continue button is redundant as the process can simply advance to the next step as soon as you select your payment option.

Step 2

Now that we’ve gone straight to the next step without the need to press continue, we need a way to get back, hence the addition of the “Change” action, should you change your mind.

The big improvement though, is making the number entry much more obvious.

The tiny area highlighted in red is where you have to tap to enter in your security code. It doesn’t even look like an input field!

With the introduction of a familiar input field, it will be much more obvious what to do here. It’ll also be much easier to select due to the 36x larger surface area.

Step 3

The last step remains the same but now happens sooner. Hooray!

What Went Wrong?

Paying bills and credit cards isn’t exactly fun, which is why the design needs to let you complete the task as quickly and easily as possible.

As demonstrated, there are only a few simple changes needed to help people do that. It begs the question, why has a huge company like American Express missed it?

When I’m looking at a design like this, I try to see if I can understand the reasons for the design decisions.

From a business point of view, Amex aren’t necessarily incentivised to improve this flow as they make money from charging interest and fees on payments not made.

It’s the only reason I can think of. I’m not saying that is the only reason but it’s possible. It could just be design and development resources are stretched thin, which can happen even in large companies. Believe me, I’ve experienced it myself.

Whatever the reason, designers need to think about the users first and foremost.

The design tool is the most important thing we have as designers

I completely disagree. Knowledge is the most important thing we have.

A tool doesn’t make you a better designer. Knowledge and understanding of design does. No amount of features in a design tool will make your design work more effective. You may become more efficient but the actual quality of design work won't change, unless you improve your design knowledge.

People like to think tools are the answer to becoming a better designer because it’s much easier to start using a new tool than to learn what makes great design truly great. That’s why experts constantly get asked what tools they use but in reality they can produce the same quality of work with any design tool. Their knowledge and experience gives them their expert status, not the tools they use.

Your tools DO NOT affect the quality of your work. The less time and effort you spend worrying about your tools the more time and effort you can spend creating great design. The right tools just makes it easier, faster or more convenient for you to get the results you need.

Knowledge is the real power to great design.

And knowledge is exactly what you’ll gain from my book, Learn from Great Design Volume 1. I teach you what makes great design from great websites with hours and hours of studies done for you, so you can take that knowledge and make great websites yourself, no matter what tool you use.

Learn more about the book and get your copy today.

Warby Parker disrupted the eyewear market back in 2010.

“Warby Parker was founded with a rebellious spirit and a lofty objective: to offer designer eyewear at a revolutionary price, while leading the way for socially conscious businesses.”

As of April 2015, Warby Parker has been valued at a cool $1.2 billion. Quite impressive for a young eyewear company.

In June 2014, they announced they had distributed over 1 million glasses through their “Buy a Pair, Give a Pair” program, which also means they’ve sold over 1 million pairs of glasses.

Clearly business is strong and great design has been played a significant role, as you’ll see.

Redesign in Action

At the time of writing, it seems like a redesign of the website is being tested as I’ve come across two different versions of the site.

Here’s a screenshot of the old and new homepage designs side by side:

Gone is the carousel and good riddance because they’re extremely ineffective. Spoiler: people barely click beyond the first slide in carousels and are being ignored by some because they associate them with advertisements.

The new design has a more personal feel simply with a focus on photos of people actually wearing glasses. It’s also more than double the length of the previous version at 4,417 pixels tall instead of 2,194 pixels.

As you’ve learnt from the design study on Beliyf, long pages can be very effective, so don’t be afraid to redesign with a longer page.

Glasses Page Design

So you’ve found a pair of glasses you like. Let’s look at how they are presented on the individual glasses page design.

Taking center stage are the glasses with big, full-width photos and an extremely clear purchase call to action, with a great visual design of the secondary call to action that doesn’t distract from the primary one.

I almost want to buy a pair because this page looks so good and I don’t need glasses!

These buttons have hidden great design that goes beyond how they appear as primary and secondary call to actions.

Pressing on a button reveals extra information. In the case of the home try on button, it shows you how many of your 5 slots you’ve used and gives you logical options that people would want to do next. Great design guides people to where they want to go.

The button text changes to “Added to Home Try-On” to also notify you it’s been added.

The buy button shows the available purchase options when you press it.

Shortly, we’ll look at previous version of this page to see just how much of an improvement this redesign is.

Look Over Here!

The crowning feature of this design is the interactive photo of the person wearing the glasses. It looks like line an ordinary photo but if you over it with your mouse, they will turn their head to follow the mouse.

Even better on mobile, it moves when you tilt your device. How cool is that?!

This design feature even made it into their 2012 April fool’s joke website about eyewear for dogs, Warby Barker.

Unlike the April fool’s joke, this feature is meaningful and not just something cool for the sake of being cool.

Glasses Page Previous Design

As we have access to the old version, let’s have a look and compare the two.

The call to action feels a little crowded compared to the redesign.

The price has now been integrated into the purchase button and the free “try at home” option has been separated out, making it much clearer. The home try on option gets a bit lost in the crowded design of the previous version. The try at home service was a key reason why they have been successful because no other companies were doing it, so it now has the attention it deserves.

The colour options were more difficult to see on the thumbnails of glasses in the old design. The redesign gets rid of photo thumbnails for colours and introduces circles containing the colours, which not only looks neater but it gives greater clarity to seeing the colour options before selecting them.

Checkout

You’ll notice that the checkout pages have a different layout design. The logo is now the only element that remains from the header.

This is no accident. Removing navigation during the checkout process increases conversion. Giving people less choice increases the chances they will complete the checkout process.

Form Design

The form design is simple and clean but doesn’t look particularly special until you start interacting with each element.

Here’s a video of the checkout form in action:

On focus of each text input, the label transitions up and perches itself nicely on the border. It allows for a cleaner look when no details have been entered but it doesn’t just look nice as it also provides a clever way of keeping the labels visible while you’re filling in your details.

“Good Designers Redesign, Great Designers Realign”

I’ve referred to the new design as a redesign but it’s actually closer to a “realign”, being made up of many smaller improvements rather than tearing apart the old design and starting over. The designers have built upon the solid base Warby Parker has been established on.

Cameron Moll wisely once said, “Good designers redesign, great designers realign” and that’s exactly what the designers at Warby Parker have done.

A number of small improvements can add up and have a big impact and require as much time. Something to think about for you next project.

It could be a good experience with one particular train company or a terrible one with a different operator in the same country. Then it all changes again when you visit another part of the world and you won’t know what you’ll get there either.

Captain train gives you the opportunity to book train tickets with several European train companies without having to deal with them individually.

So it’s intriguing to come across the Captain Train website for the first time with the bold headline of “You are going to love buying train tickets”. Am I really? Is that even possible? Let’s have a look.

First, The Bad News (or is it?)

You’re required to create an account before you can do anything. While this obviously isn’t the best user experience, it doesn’t necessarily mean the company can’t be successful in delivering a great service to its customers.

For example, a client I previously worked with also required customers to create an account to see any of their products and still managed to acquire over 4 million users.

As of March 2014 Captain Train had approximately 200,000 users but it now has over 1 million users. I know you may be thinking “well, if they didn’t require registrations, they would have millions more!” but that may not necessarily help.

Email is the most powerful marketing channel available. For example, most of the $690 million President Obama raised online came from emails sent to subscribers and supporters.

Forget about social media. Email is still the number one marketing medium online. That’s why they want you to create an account but it isn’t all about greed. In theory they can provide a much more personal service.

Having not actually ordered a ticket with them, I can’t comment on what Captain Train do but as they want to make you love buying train tickets, I’m sure they only have good intentions to help you and improve your experience.

Why Should I Register?

As you need to create an account, Captain Train need to convince you why you should create one as they will want to reduce the number of people leaving at this point. After all, it will turn people away.

They have to create some trust in order for people to allow them into their inboxes and to get over the hassle of having to create an account, no matter how easy it seems.

“Join over 1,000,000 existing Captain Train users.”

Captain Train uses social proof by letting you know how many people use their service. Imagine if you’re a bit skeptical of having to sign up, this figure will help you decide it might just be worth it if that many people have signed up before you.

The Captain Train Guarantee

Another tactic Captain Train have used is their own guarantee which is list of 4 simple reasons why you should sign up.

Each reason has a link to find out about it in more detail. This is great for those who are curious but not necessary for those who don’t. The green checkmarks add a positive visual design to reinforce each reason.

“Why do I need to create an account?”

If you’re still not convinced by the 1+ million users and the Captain Train guarantee, there’s a section that literally spells out the one question people will be thinking.

“By creating an account, you can benefit from the best fares, lock in the prices of your tickets and access them on your phone or tablet. It also means that we can guarantee a super quick response time, in case you have any questions or need some help.”

Even though this section repeats some points made earlier, it reinforces them and introduces other benefits like accessing everything on multiple devices and better customer service.

Testimonials

If you follow the link on the testimonials reason in the Captian Train guarantee you’ll see they creatively use favourites they mark on Twitter.

This is smart for a few reasons:

• Cheaper and easier: No extra development required. A Simple embed or link to the favourites section of the Twitter account is all that’s needed. Very easy to add new testimonials.
• Unsolicited praise: Twitter users sharing their positive experiences haven’t been asked to do so. They are doing it simply because they are so happy to tell the world.
• Authenticity: Peoples’ Twitter accounts feel more authentic. Images of the person giving the testimonial is known to increase trust and with Twitter they get that and more.

A select few testimonials have been included at the bottom of the page for those who don’t go exploring.

Booking Tickets

(Here’s a video of entire booking process from start to finish so you don’t have to create an account yourself to see this great design in action.)

The Captain Train design takes a two column approach I can’t recall seeing on any other ticket booking websites. The left column is the standard search details you expect and I like to call the right column the “contextual column” because it changes depending on the action you want to complete.

First Use Design

When you land on this page, nothing is filled in of course. This is a good opportunity to help people get started and often missed by designers.

You’ll see how useful the right column is when we explore the search process more but even before you’ve started it lists the frequent searches. I live in London, so chances are I probably want to book a train from London to Paris and there’s a button to greet me that fills in those details with one action.

Look Mum! No Hands!

If you do need to choose different stations, it couldn’t be easier. When you select the from field, it gives you a list of stations to choose from before you’ve even typed anything. Booking a ticket from London to Paris required no typing!

Of course, if I selected a different language when I signed up, I would get relevant initial station recommendations specific to that country:

Forms are boring and a pain to fill out. Showing popular options to choose from without having to manually fill them out speeds up the process for the most common use cases.

Also benefiting speed, when the departure station is chosen, the “To” field is immediately in focus and you can now select from a list of popular arrival stations without selecting the field manually. I love attention to detail like this!

First impressions are important, so consider the design of a service even before anyone has filled in any information. If you can improve usability for most people by providing them with a button that fills out two fields like Captain Train have, then do it.

If you do have to type a location, the contextual column changes to provide suggestions based on what you’ve typed.

Search Button Magic

Now you may not think the search button is anything special but once you press it you’ll see some great design in action.

When actions require some sort of loading time, such as searching for train routes, provide some sort of feedback to the user to let them know something is happening and the more obvious you make the feedback, the better.

Upon pressing Captain Train’s search button, it morphs into a progress bar giving you immediate feedback while you wait for the results to appear. You can’t miss it.

Including a visual indicator reduces the perception of time it takes to wait. For example, if it takes 5 seconds for results to appear, the visual indicator will make it seem less than that as it provides your mind with a distraction but it also informs you of how long you’ll have to wait.

The Search Continues…

Well, actually this is where the search process stops but the next sections appears below without refreshing the page while automatically scrolling you into position.

The scrolling animation nicely informs you that you can just scroll back up to change your search details and search again. Much better than clicking a back button and waiting for everything to load again.

Eurostar Comparison

Let’s have a quick look at what it would look like if I decided to book this trip directly with Eurostar:

Ouch.

Eurostar have squeezed their search form into as small of a space as they possible can so giant promotions can take up most of the screen.

I’m sure the designers have fun designing each individual promotion but they need to challenge the way Eurostar’s homepage is designed and they could do well following in the tracks of Captain Train.

The only good thing they do is populate the to and from fields with what I assume is the most popular route. Other than that, it’s a mess. I’m not saying it’s terrible design but it’s clear why Captain Train is a subject from Learn from Great Design and Eurostar isn’t.

Payment

Obviously I’m not going to buy an actual ticket to test the Captain Train’s payment process but what we can see is an extremely simple payment form.

It’s one of those forms where you think to yourself, “why aren’t all payment forms designed like this?!”. It’s so simple, there isn’t anything else to say about it.

“You are going to love buying train tickets”

That was the bold claim when you first meet Captain Train and they weren’t making it up. I certainly will love buying train tickets with them instead of other companies, that’s for sure.

The homepage is incredibly simple. So simple that it only includes two headlines, a button and an image but it’s well targeted to the type of people they want to help:

“Your product can be copied in a heartbeat, your prices undercut, your people poached.”

“Uncover the one thing that can never be stolen.”

The headlines speak directly to business owners’ common fear of being copied. I know this is a common fear from learning about business over the last couple of years myself. Beliyf have hooked business owners in because they know this is one of the biggest fears they have. It’s the ideal start to this great design.

Great copywriting comes from a great understanding of your customers.

Although the second headline is a little vague, it has enough intrigue to find out what exactly can’t be stolen and only one action to take, there can be no confusion as to what to do next.

Your Journey to Beliyf

Following on from the Discover Beliyf page (another simple page after the homepage), you arrive at the start of “Your Journey to Beliyf”.

The design for this page is over 8,000 pixels long! For a while in the design industry we’ve been told to keep as much above the fold as we can, or at least the important stuff. This has changed over the last few years as designers have become better at communicating to clients that people do scroll.

See this study carried out by Huge Inc:

“We learned that participants almost always scrolled, regardless of how they are cued to do so – and that’s liberating. While it’s hard to make universal recommendations, we’d suggest that designers use the cue that works best in its context.”

Explore the screenshot to see how well the page flows from top to bottom, despite its length. Clever use of the “stepping” stones guide you through from one section to the next and each section is clearly defined with its own beautifully arranged collection of leaves.

Use the power of design to entice people down a page.

The stunning tree assortment of leaves at the end of the page is one of those moments where I wished it was something I could design.

Excellent Copywriting on this Page

Visually this design is wonderful but it’s a joy to read to. Here are some highlights:

“We’re here to take you on a journey to discover, frame and use the one thing nobody can ever steal. You.”

“Uncovering your Beliyf awakens a sense of wonder and unstoppable energy across your enterprise.”

“It turns customers into fans, employees into evangelists and the competition into dust.”

“How can every touchpoint be infused with a sense of your soul and your heart? What new opportunities are now revealed that weren’t visible before?”

“From your people, to your products, packaging to premises, we’ll help you animate your entire organisation with Beliyf.”

“So we dig into your deepest truth – your Beliyf, to draw creative inspiration and reimagine your communications in a coherent, consistent and compelling way.”

“Your Beliyf will become the life force of your reawakened, reenergised and uniquely vibrant organisation.”

“Wonder”, “energy”. “animate”. “awakens”. “reenergised”, “vibrant”. “creative”.

Words that ooze positivity and excitement are sprinkled generously throughout their story, expressing Beliyf’s passion and enthusiasm for the work they do. You can tell they care before you even talk to someone and if they’ve taken this much care with their own site, they’ll do the same for you.

The killer line comes at the end of the page:

“People will see themselves in your story and use it to tell their own. You’ll become an extension of who they are, making them not just customers or employees, but believers.”

Using all those positive words is all well and good, but at the end of the day, potential customers want to know the benefits of a product or service. Beliyf describe exactly what the result of their help will do for their clients.

Notice the smart copywriting technique of the periodic use of their name throughout this page, making sure you are aware of who they are, which is especially beneficial as they have a slightly odd name but this is their introduction to you so they certainly want you to remember them.

Focus

It’s very clear they’re very focused on one thing. They don’t do web design, SEO, web development, branding and every other digital service known to man. As they say themselves: “We help organisations articulate who they are and why they matter.”

As an introduction to Beliyf and what they offer, they want to guide you through the experience of who they are. You’ll find as you explore the site that there aren’t four or five things you can do, there’s only one. It’s very focused so they can achieve a goal.

Their goal is for you to find out who they are, like what they offer and contact them. The final step of this introduction process is the contact page.

For the reason of aiming towards a focused goal, it’s a perfectly fine choice to hide menu items behind a menu button, even at desktop sizes. Those who want to find more information can do so by exploring the menu.

The footer isn’t even included on previous pages until you reach this one. That’s how you know they’re deliberately focusing you down a path. General advice would say you must have a footer but there are times where ignoring design conventions can increase the effectiveness of a design.

Long Pages can be Extremely Effective

The length of this page reminds me of a landing page Sean McCabe designed to sell his Learn Lettering course:

“You’ll hear a lot of marketers tell you that you have to have your subscription box “above the fold,” but I’ve yet to hear of one experiencing the kind of numbers I did.”

Sean went on to make over $93,587 in just a few days. Clearly the length of the page didn’t negatively affect the success of his project. In fact, a longer page almost certainly helped because thoroughly why anyone should sign up and it was wildly successful!

You’ll also hear marketers say you’ve got to keep things very short and simple. An 8,000+ pixel long page is completely opposite to that advice.

When done well, long copy (and therefore long pages) can seriously boost performance, as Ramit Sethi found:

“In repeated testing with tens of thousands of data points, my long copy outperforms shorter versions. For example, I recently ran a test of 4 entirely different versions of an email. There were long versions, short versions, and minor variations on each.”

“In fact, the longest version won, beating out the next-best-email by nearly 50%…in revenue.”

The vast majority of “expert marketers” giving out advice simply have not tested long designs or copy.

Arm yourself with this information the next time a client wants to cram everything into the top of the page.

Creativity

It wasn’t a surprise to discover Beliyf was design by Mike Kus, one of the most creative web designers out there.

The visual design stands out in this rather drab world of flat design through the use of wonderful colours and painted leaves, wood and stones. A quick look at Mike’s dribbble account reveals his mix of digital and real world techniques:

“I collected the leaves, wood and pebbles for this project. I painted the leaves and then hand painted the patterns for the leaves. I did the same for the pebbles and the cross section of the tree trunk.”

It works beautifully and because no-one else is doing it, it feels unique and fresh, even though it isn’t the first time anyone has done something like this.

It contributes to a timeless design that will look just as good in five years time.

The creativity on show here is wonderful but it never takes away from the main message but enhances it. Their service is all about making their clients unique and they create trust by displaying their own uniqueness to the world.

I can imagine the design brief was something along the lines of

“Let us Contact You”

How often do you see a company offer to contact you? It’s very uncommon but that’s exactly what Beliyf do when you reach the contact page.

“We’re excited to see you become more of yourself and less of everyone else.”

Such a great way to encapsulate everything they’ve said previously in a single sentence.

Improvements

The call to action buttons are a little weak, visually. They get a little lost as a result. Being the great design it is however, there isn’t much to distract you. Having said that, they would stand out more if they were full colour buttons rather than text surrounded by a border (sometime referred to as ghost buttons).

Discover Your Beliyf

Make others believe in your own design work by learning from the great design Beliyf have released into the world.

Find your unique 10% to take your design work to the next level.

This is great design because it is simply good solid web design at its best. Just simple, straight to the point design.