Updates

Same Site, Different Pictures: How Web Designers are Painting Themselves into a Corner

August 8, 2016 • By

 

What nobody could have failed to have noticed is that web designs have, in general, become very formulaic and standardized.  There are a few truly unique and interesting designs out there, and their saving grace is that they’re so good they’re almost impossible to copy.  But such sites are true exception to a very well established norm.  Typically what happens is somebody creates a really good design that isn’t so complex or sophisticated that it’s basic structure can’t be duplicated, and then you see multitudes of people taking that frame work and hanging a new skin on it.

Perhaps that wouldn’t be so bad if there was something genuinely original and interesting about the result, but the truth is that hardly anyone has made efforts in that direction.  Sometimes the similarities go beyond the structure and you’ll see visual elements that are just way too familiar.  Even the content is sometimes just blatantly ripped off, and this can’t be good for the web design industry.  It’s something that is going to kill our industry because these uninspired and frightened designers are making themselves (and you) obsolete.

How site duplication makes you redundant in the design equation

For now, website buyers haven’t entirely caught on to the situation.  They don’t seem to have noticed that every other site on the Internet is just a recycled version of some other site.  Currently the design trend is to make huge scrolling walls of giant images with text overlays.  The flavors of the month are white text on light blue (thanks for that, Twitter!), white text on brown, white text on just about any other color where it can be used, and when it can’t then we’ll see gray text, or at least something really pale and washed out.  We’re also going to town with big flat buttons.

Now it’s important to understand that it’s not bad to make a website like that unless a whole bunch of other people are making websites like that.  If you continue down that path, where every sheep is just following another sheep off the cliff, there’s no way to salvage the situation.  Clients are going to realize they can simply copy this structure, replace the background pictures with their own, and away they go.  How do you justify your existence?  Especially if you’re one of those designers who doesn’t write their own code?

All of us need to be steering clients towards originality and fresh looks.  We need the kind of innovation that spawned awe-inspiring websites.

Case study: Dollar Shave Club

When I first saw the Dollar Shave Club website, I was impressed far more by the quality of the web design than by the offer they were presenting.  Perhaps this is why their site today has regressed back to being “standard”, even though it’s still pretty cool for a standardized site.  But the site today has very little to differentiate it from the PayPal website, or actually a whole bunch of other websites that followed the same trend.  The pictures are different, the text is different, but where’s the oomph?

It wasn’t always that way, though, so let’s take a look at how that site evolved over time and see if we can discover the sweet spot where they should have stopped following trends and kept rolling with the awesome.

Our journey begins on May 19, 2011.  It’s a testament to how anyone with a great idea can make a success of it if they know how to get attention the right way.

 Nothing too amazing about that design, in fact it probably can’t even accurately be called a design.  It stayed like this until there was an update in July, where the heading got a make-over, the wording was changed extensively, and a lot of sub-pages were created:

 Still not a very inspired page, but it must have made an impression on the audience anyway, because by October they had made enough money to produce a website that actually looked like a website:

 A new year rolled around, and by March the site was sporting a new rugged, masculine look, which is very close to how the site looks today:

 Some of the changes included:

  • Complete change of style from geeky and modern to old-timey and cool
  • Addition of a new logo
  • Highlighted bonus offer
  • Less complex navigation with better link titles
  • Easier to see log in and registration links
  • Intro video
  • Huge tag line
  • Page footer is no longer isolated from the rest of the design

This design is arguably really close to the point where they probably should have stopped innovating.  In this form, it was already beautiful, with the only flaws being that the intro video was set in an iframe and AutoPlay was enabled.  Neither of these things is a good idea, and no designer in 2016 should even consider doing them without a very good reason.  Apart from that, the site was as close to perfection as it was ever going to get.  The only other major change for 2012 was the addition of a blog link in the main navigation area.

Towards the end of 2013, the site received a significant behind-the-scenes overhaul of its source code, busting the intro video out of that pesky iframe and no longer using that obnoxious AutoPlay feature.  Users wouldn’t have seen much visual difference, but they sure would have appreciated being able to choose whether or not they had to watch the video.  If you’re wondering why that’s such a big deal, well… perhaps you’re new to the Internet.  Perhaps you have never known the joys of metered bandwidth, or other lovely things like that.  That would make you a very special person indeed.

Imagine if you were already a member of this site and every time you wanted to log in, you were subjected to that intro video loading itself and starting to play, and you had no way to prevent it.  If you want to make users avoid your site unless there are no alternatives, this is the strategy to accomplish that.  It is very good to see a website like Dollar Shave Club, where the operators are listening to their users and they actually do something to address the concerns raised by complaints.

The first major change for 2014 was the discontinuation of a Flash-based video player, opting instead for HTML5 video playback.  They also added some extra menu items.

 September of 2014 marks the last time this site would have this compact and sensible design.  Starting from October, they isolated the page heading / navigation section and the footer section from the main content again, and thus the site became once again a generic, homogeneous, herd follower.  The orientation of the wooden boards also changed from vertical to horizontal.  With the apparently intentional downgrade of the site to a generic “Fortune 500 Approved” look, they appear to have done the very thing Kirk Lazarus warned one should never do.

 

At this point the site had already crossed over into the generic look sported by thousands—maybe even millions—of other corporate sites, taking it from wow to yawn at the speed of an FTP upload, but it was not entirely a lost cause.  It still had not completed the full transition.  It was hovering there like a pre-op kathoey, having a similar look to the generic template, but not every single one of the features.

The site attempted a new look in June of 2015, and it finally took hold a month later, once they’d worked out the bugs.  This marked the moment where the site had finally lost all of it’s modesty and elected to undergo the final surgery that would transform it into full corporateness.

 What you can’t fail to notice is that with each of these “upgrades” the site is growing in height.  The simple navigation that made this site a joy from the start has now been lost.  Users now must make achoice.  It has gone from “where do I click?” to “should I click, or scroll, or do I need to scroll and then click?”.  Then maybe the user does scroll but they don’t see what they want, and now they have to scroll back up to find the right place to click, if it even exists.

All this extra work and decision-making is adding to the CUF rate (cumulative user frustration), and makes it more likely that the user will abandon shop.  In the case of Dollar Shave Club, the offers are good enough that users will probably tolerate a lot of annoyances (a high CUF threshold), but that won’t be true for every site.

The site title also evolved during all this time, with some of the titles listed below:

  • Cheap razor blades for $1 per month
  • Cheap razor blades
  • Dollar Shave Club: Our blades are f***ing great!
  • Dollar Shave Club – shave time, shave money
  • Dollar Shave Club

It’s easy to see from this evolution the influence of corporate culture on otherwise great ideas.  You can picture some weedy little dude dressed in Armani and clutching his Gucci attaché case, piping up at the company meeting with “Hey, you can’t say something like that!”.  But guess which line got them the most attention, the most shares, and the most people linking to them?

The Internet exists outside of advertising regulations and sometimes we forget that.  What people “approve of” and what they like are completely different things.  Somebody can be officially offended by something that they’ll privately acknowledge is really cool.  Sex sells, and so does humor.  “Boring” never sold anything.

So here’s how the site looks today:

 It’s unbelievable the lengths some people (and sites) will go to, isn’t it?

 Some of the blame falls on the tools we use

Designers and developers have always used certain systems and frameworks to help make the process of creating a new site easier, and there’s nothing inherently wrong with that.

Unfortunately there are some of these tools that have become too popular and are now over-used to the extent that the limitations built into those products are becoming manifest in the designs, so we see similar structures emerging more clearly than at any time before.

This is so much the case that sometimes when an expected “standard” element is missing, clients question why.  This is not good… clients should not have expectations about the result of the design process, they should be saying “Wow! This is great!”, not “Where’s the [gimmicky fad design element]?”.

The second contributor to this problem is a Cheap Charlie approach to design, where a single layout is the only one created and it’s expected to scale down to a single column for mobile users.  Google wants us to design for mobile, and of course we ought to respect that, but when you consider how much space we have to play with on a desktop, we should be taking advantage of it.

The problem is going to get worse.  Many clients actually demand that their sites be built with certain tools and technologies, often without actually knowing why.  There’s going to be another article appearing on this site in the near future pointing out why that’s such a bad idea for the client and for you, but the point to take away for now is that as long as clients think they understand your job better than you do, corporate sites will continue to grow more similar to each other.  Once they achieve perfect singularity, you will be obsolete.

So if you care about the longer term, if you can focus beyond earning next month’s rent and groceries, you need to do everything you can to encourage clients to go for originality and real design, as this gives you a reason for being.  Otherwise, you’re just another brick in the wall, easily replaced by any other brick.