Blog / Design

The latest & greatest news you’ll want to follow. Seriously. SRSLY.

A Quick Web Design Case Study – Apple Macbook Air Call to Action

We tell a lot of e-commerce clients that if you’re not going to A/B split test, at least copy Amazon… I have a similar stance on design. If you’re not going to hire an amazing web development and design agency (like us, amiright?) then there are roughly two things you should keep in mind:

  • Keep it simple
  • What is Apple doing? (I’m only half kidding; you’ll see why.)

So what is Apple doing? Let’s take a look at what I consider one of the best product pages online right now. The product page for the Macbook Air:

Macbook Air Product Page Design - Above The Fold

My favorite thing about this page is that the call to action (CTA). The little blue “Buy Now” button in the upper right sticks out like a sore thumb, but it doesn’t break the design language of the page in the process. They tastefully drew attention to it by making it the most extreme iteration of their design language.

The button is completely in line with the overall design language,  it’s just been turned up to eleven.

  • It has the most drastic rounded corners.
  • It’s the brightest and largest concentration of the page’s highlight color.
  • It anchors the site navigation of this area on by placing it last punctuating it with the bright blue button background gradient. (When you’re making a list and want something to stand out, always put it first or last.)
  • It doesn’t look out of place, but there isn’t anything else on the page that looks like it, or more importantly, that competes with it. This is the big one – your CTA should be the most extreme example of your design language, but it shouldn’t look like it came from another site.

One great way to test your CTA’s visibility is the ten foot test. The literal version of this to step back from your monitor 10 feet and see what you can still deduce about the content of your page. Of course, the fake version is to just zoom out your browser a few steps:

Apple Macbook Air Product Page Design - 10 Foot Test

You can still read the main title of the page, “The Macbook Air”. Great. You can’t make out much of the other text unless you’re eagle-eyed and even then the vast majority of it is still unintelligible, but that’s OK. One other thing above the fold (not that there’s a fold :) does still stick out, though. It’s that little bright blue button in the top right. You can’t tell what it says, but you still know it’s important.

And back to my earlier note about putting things at the front or back of lists when you think they’re the most important; you’ll notice the first item on that sub navigation list is Design. I’m shocked I tell you… just SHOCKED.

As usual, Apple’s page layouts are a master class in how to get the response you want from your audience. (Not that they never miss, they still can’t seem to make a mouse I care to use for more than about 20 minutes.)

Firing The People You’re Working For

B is for bye.

It can be when you’re 16 and working at a hometown sub-shop or in the prime of your professional career, but most people experience the dreaded firing process one way or another if they’re in the business of being in business. Whether your being the one let go or the person letting someone go, it’s NEVER an enjoyable experience.

It’s a scenario we’re all familiar with, but what about when the tables are turned? What about when the subordinate in the situation fires their boss, the company they work for, or their client? It’s an odd thing, it goes against everything most dedicated hard-working “give-it-your-all” people have been taught, but necessary.

We recently parted ways with a client and it was our choice as an agency to “let the client go.” So how does it come to this? Well, in this case the relationship was no longer productive for us or for our client. And I suspect this is the majority of instances where this situation should and does occur. As an agency owner, it’s a tough decision to essentially tell a client’ “we no longer desire to work with you and no longer want your money.” Yikes!

This decision did not come lightly, but after much consideration we decided it was the best decision for all parties involved. We believe in the end, this bittersweet parting will prove beneficial for both our agency and the client. The client will be free to pursue an agency who better fits their needs. And we the agency, will be free to pursue clients who’s needs are best served by our skill-set.

Can user experience be designed?

Is this you reading these lines in your very special personal way? Or is this me letting you read my lines in my way?

Yet another excellent (short) essay by Information Architects on the industry we work in. Ending with the astute observation that design does not let us control how people feel, but who we reach.

COLOURlovers built an amazing Twitter profile design tool.

Use themeleon to customize the way Twitter looks for you and how your profile looks to others. Use any of the more than 679,339 background patterns & 1,037,130 color palettes on COLOURlovers or customize any of the colors or patterns to get just the right design for you.

User Takes Matter Into Own Hands After Complete Customer Experience Design Failure

F is for Fail

An utter and complete failure in the customer experience design department from his local ISP (screwing up everything from web from usability/security to phone support) led Douglas Mezzar to take things into his own hands. After 3 months, wasted hours and dollars, he exploits a weakness in their web form to do something he should have been able to do from the start.

Although Douglas Mezzer’s housemate had moved out many months ago, there was one recurring reminder of his prior residence: the monthly DSL bill from iiNet. Though Douglas had been paying on time every month, Douglas thought it’d be best if the bills came addressed to him instead of his former housemate. He figured it’d be a simple change that could all be accomplished through the self-service account management website.

After logging in, however, he ran into a bit of an issue. While he could change the address, phone number, email address, date of birth, and several other fields, the Firstname and Surname were disabled.

Not a big deal, Douglas figured, they have the customer service number listed right there.

An hour and a half of customer service calls later, he finally got a hold of someone who could help with the name change. After verifying his date of birth, mother’s maiden name, and inside leg measurements, the rep cheerfully informed him that they could change the name on the account.

“Of course,” the rep added, “there’s a small fee of $59, but we’ll just bill that to your account.”

“Wait wait,” Douglas interrupted, “$59 for a name change!?”

“Well yes,” the rep explained, “it’s a standard fee. There’s a whole process, you understand.”

Douglas begrudgingly agreed. After all, he did just tell iiNet that his housemate moved out; saying “thanks but no thanks, he’s actually moving back in now” didn’t seem so believable.

A couple weeks later, the bill duly arrived with an additional $59 “name change” fee attached. Its addressee, however, was still Douglas’s former housemate. No big deal, he figured, I’m sure the next one will come to me.

The next month’s bill came and it was still not addressed to him. Okay, fine, he thought, they’ll waste my time. They’ll take my money. But apparently, making the ten-second change is too hard!? He had no choice but to call back; it was now a matter of principle.

When Douglas logged back on to the customer portal to find the appropriate service number, a thought popped into his mind. What if, he thought to himself, hmmm… what if they were incredibly lazy in putting this web app together? Could I just edit the fields myself?

He loaded up his trusty Firebug plugin and Inspected the Firstname field. He clicked “Edit HTML”, replaced Joe’s name with his own, and removed the “disabled” tag.

He followed suit with the Surname field and clicked Save Changes. Surely this won’t work, he told himself, they’re an ISP; they wouldn’t be that stupid, right?

To his surprise, there were no errors and the fields now read “Douglas” and “Mezzer”. Figuring it was some goofy persistence thing, he logged out and logged back in. The account still said “Douglas Mezzer”. Could it have actually worked?

Yes, apparently. The following month’s bill was addressed to “Douglas Mezzer” and there wasn’t a “name change” fee to be found. Though, he did consider them sending them a bill for doing their job.

Get the full story, including screenshots, here: Connect Betterer – The Daily WTF