From the ZURBlog: Better Registration with Kayak

No Responses since August 19, 2008

I just published a new blog post over at The ZURBlog titled Better Registration with Kayak.

I was influenced by Kayak, a one-stop travel site, when I was tapped to become a member. I was pretty impressed by the way they did it that I decided to write a quick posts. It focuses on Web forms, users and member registration, and how to engage visitors more successfully. Here’s a taste:

While not the most glorious visual design, the fundamentals of this registration popup are sound as steel. The message is that Kayak wants to help me make my life easier, beyond just providing me with a one-stop travel service. They’re looking to improve the experience I have on their site, not just with travel in general.

Check it out and leave a comment on the flip side!

Design Is Iterative

No Responses since June 22, 2008

For the regulars out there, you might notice subtle changes in the design of the site in the coming weeks. I’ve been reworking the design from the ground up, usually just iterating through the code. Iterative design really helps hash out ideas and lets you quickly prototype designs.

There are many advantages to skipping the “Photoshop stage,” but none are as solid and widespread as simple ideation. It’s quite easy for me to see how one design change looks by editing a line or two of CSS rather than reworking a set of layers and who knows what else.

However, that’s not to say Photoshop doesn’t have it’s perks. The background I’m using on the site right now was contrived in Photoshop and a lot of the color schemes were worked out there as well. It just so happens that Photoshop came in at a later stage for me rather than an earlier. I prefer that the content (markup included) precede as much design as possible. After all, content is king on the Web.

And as such, we’ll see more changes coming down the pipeline, including more content added back into the mix. My portfolio, resume, about info, contact, and more are in the works. I’m just slowly kicking up dirt here, but fear not! More is on it’s way.

Redesigning Midwest Airlines

2 Responses since June 16, 2008

Just like the Midwest itself, Midwest Airlines is one of the best airlines still in business today—“The Best Care in the Air.” They tout their leather seats and warm chocolate chip cookies baked fresh on board, which are both well and good. Clearly they care about their customers, but their site makes me think otherwise.

Midwest Airlines The current Midwest Airlines homepage.

Making Observations

Having recently booked a flight through Midwest’s site, I decided it was time to give them a refresh based on a few opportunities I saw. Here are a few notes I jotted down as I went along with the mindset of a customer booking a flight.

  1. Forms are laid out without regard to structure or process
  2. Images are unnecessarily used in the navigation
  3. Poorly sized images make scanning page difficult
  4. Visuals are added for pure (uninspired) aethestics
  5. Too much noise distracts the eyes

Those are just a few overarching concepts I had in mind. Now for the nitty-gritty details, the stuff that really got under my skin.

Teeny, Tiny

First of all, everything is tiny. Midwest is one of the best airlines in the country, and their style (online and on board) suggest they’re targeting the business class over budget travelers. If that translates to small click areas, even smaller text, and equally small headings, they really need to rethink their strategy.

I wrote a piece for the ZURBlog on designing better links and navigations, and clearly Midwest’s design team could benefit from reading it. With everything being so tiny, it would seem as though Midwest doesn’t want me to find anything, or even make sense of their home page.

Conflicting & Inconsistent Visuals

Midwest Airlines

Secondly, and perhaps just as annoying as overused small type, is the use of color. Where did those background blues and yellows come from? Certainly not their brandmark, but hopefully not out of some designer’s arse. The header feels very uninspired with those two blues and borderline stock photos. It also conflicts heavily with the central brandmark’s gold and dark blue.

Midwest Airlines Ugy Ad Midwest’s homepage suffers from their outrageous adverts.

And speaking of colors, those “featurettes” they rotate through on the homepage just scream amateur. Coupled with the lackluster type treatments across the site, it just begs to be made fun. With the intermixed caps, lowercase, and random blue words, the inconsistency is almost unbearable and causes my eyes to casually drift instead of being pulled by design.

Follow Through

Thirdly, the follow-through on structure and implementation of the final product is miniscule at best. From misaligned elements to under the hood, this thing just was not put together well. I guess you could say it looks like Humpty Dumpty fell off the wall and someone tried to piece it back together.

Midwest Airlines Form Midwest’s forms suffer from a lack of structure and process. Check out their sign up form get a sense of the confusion for yourself.

The forms are the worst offender on the site. In reality, the sign in form looks the best out of all other forms, as it has the least to offend with. Still, if your sign in form needs explaining, you’ve got problems.

Aside from the piss poor public facing side of the site, it’s what’s under the hood annoys me most. It looks like Midwest’s developers know two things: Yahoo’s YUI is amazing and that CSS is overrated. Wait, what?

While I’m fine with YUI being used (frameworks give balance, can lessen code, etc), their complete disregard for CSS (and HTML) standards is a shot through the heart. They need to work towards separating their layers (content, presentation, and behavior) while improving their understanding of the code itself. Honestly, it looks like they mistook CSS (Cascading Style Sheets) for RSS (Repeating Style Sheets) because at least 50% of their code could be cut by making proper use of the language.

So What?

Well, as I mentioned earlier, I took a stab at redesigning Midwest’s homepage. The result is spot on to their audience, eliminates the bulk on the homepage, and offers an easy way to audience’s heart: a clear booking form.

The Unveiling

Although I started with the same mismatched blues, I managed to remove those nasty blues from the header in favor of a more brand-driven color scheme that really seals the deal for me with the redesign. And here she is!

Midwest Airlines Redesign Redesigning the Midwest homepage, I trimmed some fat and focused the page around the booking form, the key driver for every travel related website. You can also see the same page from a signed in view.

I also wanted to address my above concerns, and although I haven’t taken care of the code part, the follow through on visual elements to create consistency is there. I wanted to build on what Midwest started to demonstrate that one final push to get a website live just isn’t enough.

It’s worth noting I wanted to keep the flight status form, but when I reached my cut-off time, I couldn’t decide how best to implement it, if at all. In the end, like a few other pieces, it fell to the cutting room floor, however I did include a text link. I timeboxed the redesign to focus on what needed the most attention to get the final product done. All told, I think it does a great job, regardless of the flight status form.

Clearly Midwest has a long way to go on the road towards “Best Care in the Web,” but hopefully this push can serve as a little extra fuel for the long haul.

Five Steps to Save Stylegala

3 Responses since June 3, 2008

Although once one of the most revered sources of inspiration and design industry news, Stylegala has, suffice to say, gone to hell. Gallery updates have slowly come to a halt, news is littered with useless and tasteless links, and the forum has been overrun by spammers and old owners selling their new endeavors. It’s a freaking mess, and apparently the owner doesn’t know what to do now.

Stylegala

I loved Stylegala for what it once was, but so much has changed that I fear it may be lost to the idle hands of the current owner (no offense, but more steps could be taken in my opinion). So, because no one seems to be stepping up and putting themselves out there, and the people are ready to leave, here’s how we could save Stylegala:

1. Close it down temporarily.

Stylegala forum spam Stylegala’s forum is overrun with spam.

I know that sounds like a bad omen from the start, but there’s only one way to stop the downward spiral: cut it off before it reaches the end. Take the step to put forth your best effort to fixing the site by enabling absolute power to do so. If you work hard enough, and have enough support from the community (I know enough people would step up, myself included), Stylegala won’t be lost to the abyss.

Close the site for 2 months and come back with a more secure and reliable system that people can gather around and lift up. If you do it right and come back with flying colors, you can get the ads back, start earning revenue, and maybe even pass profit sharing to those who regularly contribute to the site. Whatever the case, you’ll come back stronger.

2. While she’s down, get her back up.

And if possible, just start from scratch. Honestly, the best way to fix a struggling site is to rethink it’s entire purpose and architecture. If it were not for the news being regularly updated (even with the all the spam that it was once subject to), the site would be almost completely dead.

Let’s face it, you need to put time and effort into this to make it work. The design and UI suffer, the backend seems limp as bacon, and the site is abused (even by it’s old owner). Rework the backend to solve the problems that plague the current site. Make it better, faster, stronger.

3. Recruit help to keep it fresh.

You’ve got volunteers that want to help write for the site, so why not get them on board? They say they are intimidated by the history of Stylegala, but I think they haven’t been properly motivated to learn from that and move on. Stylegala is at the place that it is today because of it’s stagnant nature.

Am I saying we abandon our beliefs and expectations? Give up hope on the perfect website? No, not at all. On the contrary, I say we recognize sites that strive for the best, but come up short. How can we help them? Constructive criticism, commentary from a caring community, and effort by the admins and contributors.

So get those articles flowing in at a steady pace. While the site is down, stack them up so that you have an arsenal just ready to blast the Internet with when you come back.

4. Cut the fat and don’t look back.

What is Stylegala? Three things come to mind: community news, design showcase, and forum. For the time being, cut the fat that is hardly ever updated and come back to it when you have the time, energy, and stability across the site to properly do so. Don’t give something you care deeply about anything short of your best.

While the site is down for those two months, remove the Bookstore, the Software Store, the Resources, the Features, and whatever else can stand to go to bring back the news, gallery, and forum. Focused bursts will be your key to success.

5. Redesign, realign, or whatever you call it.

Let’s face it, we all love Stylegala’s, well, style, but the site’s visual design has passed it’s prime and needs to be refreshed. The code, the visuals, and the interactions are haphazardly pieced together, and leave little for those featured in the gallery to really look up to.

The site needs to be redesigned (I’m not saying I have the perfect design in mind, but I have one in the works) to promote those three sellable and most important features mentioned above (news, forum, and gallery). From the Google Ads that look like the navigation to form interaction to semantics, Stylegala could use some of that pizzazz that Stylegala’s own readers know and love.

And there you have it: five steps that would get Stylegala back on it’s feet and ready to kick some ass. It seems like a lot of work—that’s because it is. Did you expect anything else?

The Invisible Brand: Your Team

No Responses since March 24, 2008

Most people associate branding with a logo, which although logos are a part of the branding experience, they are as relevant as the size of your salad fork. In the end, they really don’t matter. What does matter, however, is the invisible brand.

Logos do not make a company. It’s the company that makes the logo. Myself and the team at ZURB do brand design, but we encourage our peers and clients to look beyond the visual brand. The visual brand—the logo, the typeface, the colors, etc—is only as powerful and prolific as you and your team make it.

As members of a continually developing team, the team members at ZURB have all realized early on that we never could rally around just a logo. After all, when it comes down to it, it is just a graphic. Instead, we rally around the idea of ourselves, ZURB, the invisible brand that is the crux of who we are, what we stand for, and how we get it done.

The invisible brand encompasses all the things you’d probably never expect to be part of your brand. It’s your team’s people, process, atmosphere, expertise, and so much more, but the most important is the people you work with. You are not defined by your brand. You and your team define your brand.

Instantly Improve Your Site’s Type

No Responses since January 17, 2008

Font-face looking a little heavy? A little less-crisp than you’d like? Wondering why some of those sites you saw yesterday looked so damned good? Then again, maybe you’re like me and want to instantly make every site you visit in Safari look better.

If you use Safari, simply add a line to your CSS to apply a text shadow on your fonts. No other browser picks it up because they don’t support text-shadow, but it degrades nicely in that regard.

In my case, however, I want to remove all text shadows, not apply them. Either way, you’ll end up with crisper looking text in Safari. Here’s that magical one-line:

  1. body {
  2. text-shadow: 0 0 0 #000;
  3. }

It really makes the difference in font smoothing, and gives each font-face and font-weight their proper visual presence. Compare it side-by-side with your original in Safari, as well as with Firefox and IE6/7. You’ll see the difference.

(To apply custom CSS to any site in Safari, you’ll have to install the Safari Stand plugin.)

Your Name Is Dumb

No Responses since January 10, 2008

Last night, the girlfriend and I had to pick up some tap water conditioner for our saltwater aquarium and decided to hit up the Petsmart in Cupertino. We got our goods, stared at the cats up for adoption, and then made our way to the checkout registers.

Close to the checkout registers were a few Petsmart employees handling some guinea pigs for a family of four. As we walked by, this is what we heard:

  • Dad: We can take him [a guinea pig] home and call him Cocoa!
  • Kid #1: Cocoa is a dumb name.
  • Dad: (snappily) Your name is dumb!
  • Mom: Hunny! That’s enough!

We we LOLed our way to the checkout register, paid with my debit Mastercard, and were on our way. I never knew anyone else talked like that.

Parent of the Year Award

No Responses since January 9, 2008

Even though the new year has only just begun, Lam Luong gets my nod for 2008’s Parent of the Year Award. The 37-year-old father threw his four children off a bridge into the waters below. He now faces four counts of capital murder.

Apparently, it was an act of revenge:

Police Chief John Joyner said the act appeared to be an act of revenge aimed at Luoung’s wife, the Press-Register of Mobile reported.

Am Not

No Responses since January 8, 2008

Denial. It’s a constant game of psych-out. You’re stuck, and you’ve probably got a deadline fast approaching. You’ve lost all creative mojo and someone just kicked over your energy bucket. Face it, you’ve got creative’s block.

So now what the hell do you do? Your first inclination might be to fire up your iPhoto Inspiration album, or maybe visit that Flickr pool. You might also peep your bookmarks to see if anyone has any fresh design ideas. The problem with nearly all of these? You’re still stuck and are probably more inclined to borrow their ideas instead of innovate new ones. And now, instead of just having creative’s block, you’re cheap.

Do not fret, my Web companions! It’s time to think outside the box, possibly outside the timebox, too. You’ve got the project, now you need the inspiration, the motivation, the passion to get it done. Great, now give it to the junior designer and get home for dinner.

Seriously though, here’s a brief way to clear out your head and get back into the full swing of things.

  • Go for a walk. I really appreciate you sticking around to read about this, but get off your ass and get outside.
  • Take a nap. Stress and sleep depreivation are known causes of Web cheesery. Try to get the same amount each night so you’re never thrown off on a particular day.
  • Frag. Although I don’t have any statistics on hand, I’m sure laying waste to the office Halo n00b will cheer you up. Sometimes you just need a lighter heart to get back on the ball.

So, even though you’re in a creative rut, you’ve got some options. Take a good look at your surroundings and see if that’s inhibiting your work, too. Your workspace might need a realignment to help you stay creative and focused.

MDO.com Back Online

No Responses since January 8, 2008

Finally managed to fix the database problems I’ve been having for the past few months. I somehow managed to b0rk the domain settings in my Wordpress tables and MDO.com ended up redirecting to an alternate domain I own.

Stay tuned!

Biography

Hi, I'm Mark, a 21-year-old Web designer and developer living in Silicon Valley (Sunnyvale, CA) and working at ZURB. I occasionally blog at the ZURBlog.

Like what you see? Contact me for more details.

Asides from Delicious

  • ZURB | Better Registration with Kayak
    One site that seems to do registration right is Kayak, a one-stop travel service that lets you search and book flights from dozens of airlines and other sites. It's a great tool, a joy to use really, and here's why: they make my life easier, but not just in their service offering. Kayak found the soft spot in me recently: dead simple Web forms.
  • Time Machine Editor
    A free piece of software that allows you to set intervals in your time machine back ups.
  • You've Gotta Wow 'Em by Mark Otto | ZURB
    If you're a designer, you're familiar with the concept of "selling your design." We go through the same process much of the time, pitching new or radical ideas to clients as we present our work. Along the way we've picked up on something big: you need to
  • Login Forms Design Showcase
    A collection of login forms from tons of sites. Great resource for login inspiration and comparison.
  • Yahoo! Design Stencils
    Pretty extensive and nice looking stencil and wireframe depot from Yahoo! Grids, iPhone, navigations, OS elements, and more.
  • Seth Godin's Email Checklist
    Beautiful list by Seth for sending your next e-mail. Surely anyone will think twice before sending their next e-mail (at least for awhile).
  • A Guide to CSS Support in Email
    An amazingly exhaustive table of CSS support in major e-mail clients by the Campaign Monitor crew. Get it in a PDF or Excel speadsheet, too.
  • The Mysterious “Save For Web” Color Shift
    Colors changing when saving for Web in Photoshop? Get a handle on it with a nice walk through of color settings from Viget.
  • Font Burner
    1,000s of sIFR fonts available in a not-too-shabby design.
  • Updated Enkoder
    Dan Benjamin updates his Enkoder tool with a new look and, I believe, an improved backend. If you ever put an e-mail address on a website, you'll need Enkoder.