Safer by design

This may come as a shock, but we’re not doctors. (Take a moment to collect yourself.)

Still, we’ve noticed a dramatic increase in food allergies over the past several years, often in ways that strike extremely close to home, from school bans on PB&J to white-knuckle trips to the ER. And while there are lots of theories about why these increases are occurring, there’s not a simple, easy-to-understand way for food allergy sufferers and their loved ones to to determine if what they’re buying is safe.

We think that’s crazy. Not to mention potentially dangerous. And, as far as food manufacturers are concerned, both irresponsible and shortsighted. Irresponsible because it almost certainly costs less to make a minor tweak to a package’s design than the fend off lawsuits from people who’ve been harmed by your product. And shortsighted because the absence of a coherent food allergy alert system means there’s a huge opportunity in the market to lead.

So why isn’t anyone leading? We can only assume it’s because food manufacturers everywhere are looking at the problem the wrong way around. That is, as just another design element that threatens to further limit marketing real estate as opposed to something that customers will see as a value-added service.

To help them, we took the first stab at a design solution; one that can be used and adapted by every company on every package of food they make without fundamentally changing those packages or significantly limiting otherwise usable space.

It identifies each of the eight food ingredients that account for an estimated 90% of allergic reactions with clean, unambiguous, universally understandable iconography. That’s especially important because so many people with food allergies are kids, who learn how to identify ‘bad’ ingredients before they can even read.

We thought long and hard about how to indicate ‘on’ and ‘off’ states (i.e. what is and isn’t in the package), and decided the combination of the words Allergy warning and full-strength icons was the simplest, clearest way.

And to ensure people have all the information they need, we added a QR code that could lead directly to either a company’s or independent, third-party site with complete food allergy info.

In a final push to encourage adoption, we showed how the system could be versioned to sync up with different package designs. (There’s precedent: Companies apply different colors, fonts and backgrounds to their nutrition information such as ground beef, soda, tea, &  energy bars, so why not their food allergy details too?)

It’s not perfect, we know, but it’s a helluva lot better than what’s out there now, which is nothing. So let us know what you think, and we’ll make improvements.

In the meantime, we’ll be sending a link to this post to as many forward-thinking food company execs as possible to get this train moving. Feel free to do the same.

Gabardine.com redesign: testing, continued

Ye Olde Pepsi ChallengeA couple of weeks ago, we wrote about the ongoing redesign of gabardine.com, and our use of some simple testing (using Verify) to provide some direction and early course correction to layouts and architecture.

Based on our previous A/B test, we learned that folks responded well to one concept in particular. From there, we ran additional tests to see if people understood our navigation labels and could find things on the pages. There were also a couple of different approaches to copy placement and some aesthetic elements on which we wanted to get a gut check before proceeding with design.

Mostly, though, we tweaked our testing approach to try to get the purest possible results. Here’s how:

  • We anonymized our layouts to remove all traces of our name and our actual client roster. (There was some debate about transparency, but decided the process was paramount and revealing details about Gabardine might skew the results.)
  • We paid for test results. This allowed us to get results outside our circle of friends/family/colleagues and eliminate bias.
  • Where possible, we replaced ‘lorem ipsum’ with semi-real looking content; at this point we were testing real copy and the ability of people to understand our business.

So how did it go?

In the tests where we asked for aesthetic judgements (A/B preference tests), we ended up with close results, usually around 60/40 or so. In those instances, the comments provided the most interesting information (ex: respondents like one design over another, but a majority disliked the same element of the preferred design). People have different tastes, and they seem to be divided into two camps on issues regarding color and layout. At the end of the day, we’ll just need to make some judgement calls based on our own tastes and preferences (it’s our site, after all). Luckily, the layouts in question are more similar than different, so it should be pretty easy to work out.

In tests that were task-based (“Where would you click to see our services?”), we got great feedback that will help us re-label and create stronger visual cues. We’re very conscious of the balance that needs to be struck between how we view our own offerings, and how the general user on the web tends processes what we do. Eliminating organizational bias from labels can be hard, but ultimately it’s about usability, not pride.

We’ll continue to test as we refine. And when we have stronger results and a design we like that’s supported by numbers, we’ll update you.

Have questions/comments about our process or testing in general? Leave ‘em for us and we’ll respond.

What we made this week for gabardine.com

Before you light the candles and leave a trail of rose petals to the boudoir, show some love to step 1 of the gabardine.com redesign.

We’re tuning up the site for a bunch of reasons — to showcase new work, highlight expanded service offerings, clarify our message — and want to make sure that we’re eating our own cooking, so to speak. In this case that means getting a prototype into market tout suite and gathering as much actionable feedback as possible in order to iterate on it and make it better.

First up: the home page. We created a couple of different layouts and set up an online tool called Verify to help crowdsource input in real time. (Stay tuned: More pages — and functionality — will be coming soon!)

Check it out and tell us what you think. We’re excited to hear your thoughts and incorporate them into our creative development process.

Mmmmm, creative development process. Now that’s sexy…

 

Design makeover: MTA mobile app

Amazing, isn’t it, that with the preponderance of development tools available and an expert on every corner, so many mobile apps still suck?

Yeah, we think so too. And, like you, it doesn’t really bother us until (all together now…) we actually need to do something. Like get from point A to point B using a mass transit system.

For all we know, there are some amazing mobile apps out there helping commuters find their ways in, out and around major cities. New York, however, is not one of them.

Frustrated by the dearth of intuitive, feature-rich, easy-to-use mobile apps for Metro-North (the train system that serves NYC’s norther suburbs), we decided to conceive of one ourselves. And we’re sharing the concept here in the hopes of gaining feedback that will ultimately lead to one truly killer mobile app.

It starts by geo-locating you, and pinpointing the nearest Metro-North train station. And, yeah, it has a Google map in the background, but guess what? It also has a simplified, ‘flattened’ version that reveals surrounding stations with just a tap. You can start planning your trip from the default station, or search for trains from a list of favorite routes that you’ve previously identified. We know it seems really basic, but the truth is that nothing — and we mean nothing — does it sufficiently well to make us want to use it. (See larger image)

Another thing lacking in existing apps is any sort of acknowledgement that riding the train may not be your sole reason for riding the train. Arts, culture, food, street fairs (we love us some New York street fairs), they’re all glaringly absent from the apps we’ve tried. But not ours. We envision pulling the latest and greatest to-do lists from a definitive source, like Time Out New York or New York Magazine, and allowing users to start planning their trip around what they want to do in and around the city.

And because you might want to enjoy those events with with other people, we came up with a feature that lets you enter your friends’ phone numbers, and see where they are in relation you/each other. The best part is, any of you can post a message ‘in space’ to let the others know about — well, anything. Could be the world’s greatest chili dog (we’re still searching) or a downed power line that’s causing delays. If the MTA’s paying attention, they can scan these alerts and find out about service issues fast.

(Larger images: Events, Group trip, Favorites)

We’re not done sketching out ideas yet, but we thought now would be a good time to share our vision for the ultimate commuter app and get feedback on how to make it better.

Send us your wishlist, and we’ll see what we can do to make it real.

Design makeover*: Occupy Wall Street

There’s been a lot of noise echoing though the canyons of Wall Street these past couple of months, and if you follow the markets or the media, you know damn well it hasn’t been shrieks of joy.

The Occupiers, as they’ve come to be known, have made their presence felt and ignited a movement that quickly outgrew once-quaint Zuccotti Park. But rather than join in debating the merits of their arguments, their methods or their menus, we decided to address an aspect of their protest that hits us a little closer to home: their branded communications.

Didn’t realize Occupy Wall Street had a brand? Well, they do. And they don’t. Occupy Together is sort of the masterbrand, if you will, from which everyone from Baltimore to Bristol seems to be taking its cues. And that’s good: it’s a single, centralized place where people can go for reference, information and most important for designers, materials to ensure (relative) consistency. The only thing missing is a proper style guide that would establish boundaries and, at the same time, allow for the kind of flexibility that encourages creativity to flourish.

Absent that, we’ve taken a stab at remaking some of the more iconic, impactful posters seen in and around Zuccotti Park of late. The content is, for the most part, succinct, resonant and on-message. We’ve simply applied our own take to the basic brand elements and added graphical elements to make the OWS look more distinctive and ownable.

Oh, we also added calls to action as a way of clarifying what sign readers are supposed to do upon consuming what is, in essence, a marketing communications piece. (Sorry fellow 99%-ers; we gotta call ‘em like we see ‘em).

(The following images are all linked to their high res versions)


* Gabardine’s Design Makeovers are for our own amusement and are not tied to any client projects. We do them because we love good design and want to make the world a more beautiful place. 

Design makeover*: The CT license plate

If you live in the US, chances are you’ve got your own design cross to bear on the front and rear bumpers of your car. Vermont’s plate, for example, is a horsey green trainwreck that, amazingly, goes well with exactly no exterior car colors.

Texas’ looks like an airbrushed party favor from the starving artists paint-huffing jamboree.

And here in the constitution state, we’ve got the gradient to nowhere…

In redesigning the Connecticut license plate, we wanted to make sure that it was clean, easy to read and sufficiently differentiated from those of other states to be immediately recognizable. 

The blue-gray color combination is definitively in keeping with the state palette, and the vertical copy on the left creates a bit of visual interest. We debated about what image to ghost back in the center (the constitution; a nutmeg; Geno Auriemma’s hair), but settled on the great seal to make it feel all legit and whatnot.

Most importantly, we added a place right in the middle for a souped-up RFID tag. The idea is for the state to issue a unique ID whenever a new set of plates is registered. That code can then be used to establish an EZPass account; toll plaza scanners would read the license plate tag, and those big, honkin’ white thingies can be recycled as door stops.

But the reason the state will get behind the RFID tag is money. Drivers would be able to use it like they do EZPass, but at municipal parking lots. Reading tags and debiting money from accounts has got to be more lucrative than paying for meters, machines, parking enforcement cops, etc., right?

What’s more, the RFID tags will make it a heck of a lot easier for cops to snag people speeding. Sure, it’ll require an initial investment in new readers/scanners, but think of the revenue—and safety—implications; to say nothing of the time saved in the courts with people disputing whether the officer stopped the right car.

Think about it Dan, that’s all we’re saying…

 

* Gabardine’s Design Makeovers are for our own amusement and are not tied to any client projects. We do them because we love good design and want to make the world a more beautiful place. 

Design makeover*: The Five Guys bag

Who doesn’t love Five Guys?

Sure the burgery, french fried goodness is positively drool-worthy.

The design, not so much.

And we get it. The remedial red-and-white color scheme and generic decor practically scream “It’s about the food, stupid.” But that doesn’t mean there’s no room for improvement.

Take the plain brown sack in which every order is delivered. Sure, it’s functional and no-frills, like everything Five Guys (save the food). But it also does the brand a disservice in many respects, showcasing the greasiness of the contents and making for a generally unattractive presentation. So we decided to do something about it—you know, just for grins and giggles. Not that we wouldn’t gladly take on the assignment should the Five Guys crew come calling…

First, we gave the bag a (new) look using the bold brand color blocks and celebrating the third-party quotes that are so integral to the Five Guys identity. These helped make the bag meaningful and relevant, rather than just a transportation device.

Then we added handles, because even Five Guys employees cop to the fact that an open-top bag helps the fries retain their crispiness.
 

Finally, we added some touches to help enhance the overall experience, including a wax liner (not seen), a slit in which Five Guys folks can place the receipt (cool, right?), and a perforated front panel, providing greater access to the fries—including those that inevitably, wondrously wind up on the bottom.

The guys at Five Guys might not bite, but this re-imagined bag helped us exorcise some design demons that eat at us every time we enjoy one of our favorite lunches.

Download the hires PNGs (Front  Back)
 
Hat tip to Scotty G for the research and design
 
 
 
 
 
 
 
 
 
* Gabardine’s Design Makeovers are for our own amusement and are not tied to any client projects. We do them because we love good design and want to make the world a more beautiful place.