Redesigning the United flight search interface in Photoshop

Redesigning the United flight search interface in Photoshop(nathanbarry.com)

62 points by carsonm 12 years ago | 32 comments

coldcode 12 years ago |

You must understand why this is not possible to do. D.O.T. rules apply to any agency that collects money for air travel. Everything on that page is subject to rules that change continuously and you can get fined massive amounts if you guess wrong. My employer's lawyers are incredibly paranoid about any UI change as we in the past had to pay a huge penalty because a few words were incorrect. So we wind up being stuck with all sorts of idiotic messaging and other crappola.

Now anyone who does not collect money is exempt, like Google Flights or Hipmunk, and they can design anything they want. But an airline or OTA that collects the money has to deal with the DOT and its insane rules and the paranoid lawyers.

I like the design though, very nice.

dubcanada 12 years ago | |

Then why do all the different airlines have different UI's?

While what you say is correct, you can easily redesign UI and follow the rules.

Bluestrike2 12 years ago | | |

I think his point is more along the lines that regulatory burden and concern for the possible cost of error disincentive for change that effectively borders on paralysis rather than it being a physical reason preventing changes. The same sort of obstacles you see with large companies, but with an extra layer of possible fines on top.

A few years back, a designer blogged about a similar redesign for American Airlines. He was contacted by one of AA's in-house designers, who wrote about the internal politics and hurdles that get in the way of changing things. AA later sacked the designer for violating his NDA and the articles were deleted from the blog, but the entire episode was pretty interesting. If you're interested:

Copies of the Dustin Curtis & Mr. X posts http://www.flipthefunnelnow.com/dustin-curtis-%E2%80%93-dear...

Aftermath http://www.techdirt.com/articles/20091106/0337536829.shtml

Even if a redesign doesn't touch any of the regulatory verbage and requirements, it still has to go through largely the same pipeline of internal approval as if it did. So even minor changes are viewed the same as significant ones.

Take the boarding pass. Given the limited amount of information present, redesigning them for a better experience should be a fucking no-brainer. No matter how long you search, I doubt you'll find anyone genuinely satisfied with their boarding pass. They're big, ugly, and reasonably unclear at a glance. You see tons of redesign experiments online, but no airline ever seems to take the hint or be inspired by them. Here's a semi-recent one that I love:

http://petesmart.co.uk/rethink-the-airline-boarding-pass/

Beautiful typography, perfectly sized for your passport, and easy to read at a glance. Throw in the time difference and predicted weather for your destination, and the redesign is utterly perfect. What's not to love? And yet, nothing.

I see two big problems with the status quo in that regard: first, you the almost reactionary mindsets that seem to become not only more common, but also even more reactionary, as a company grows. Self-deceptive thoughts like "change is scary/costly/will scare away all the customers" are pretty damned powerful. Along with a lack of genuine demand for the change in the first place: bad UI hurts customers and drives away sales, but quantifying it directly in a way that makes it a priority in itself is difficult. They're all the more powerful by the fact that they originally stem from genuine concerns. And these attitudes are practically everywhere. Hell, even apple.com took the better part of a decade to see a significant shift in its UI + design:

http://mac.appstorm.net/roundups/graphics-roundups/the-evolu...

It's really no wonder nothing changes. Until we start to see shifts in those attitudes, we're going to be largely stuck with the same bad UX in far too many places. :(

coldcode 12 years ago | | |

It depends on whether their lawyers are willing to take a chance. The rules actually change all the time so you have to keep up to date. Some people are more willing to take a chance than others.

colmvp 12 years ago | | |

Exactly. I did design work a few years ago on a very well known airline in the U.S. and it wasn't much of an issue to re-design the checkout flow.

mountaineer 12 years ago |

Remember when the American Airlines employee got fired for giving feedback to an unsolicited re-design? Also, here are some other examples of airline website re-designs [2].

I can't find it now, but the AA designer's response discussed the challenges of re-designing these sites, would be appropriate to relate that here.

[1] http://www.techdirt.com/articles/20091106/0337536829.shtml

[2] https://www.uie.com/brainsparks/2010/08/02/please-let-me-red...

austinhutch 12 years ago | |

After reading through, the author of the redesign was Dustin Curtis, creator of Svbtle.

mountaineer 12 years ago | | |

Indeed, unfortunately I can't find those articles in google cache or wayback machine.

aymeric 12 years ago |

1. Guys, you are missing the point. This is not about redesigning the United website, it is about how to use Photoshop to design a web interface.

2. Nathan, why would you design something in Photoshop instead of directly prototyping it in html/css? I think designing straight in html/css is already pretty fast.

You also run into the danger of adding some nice looking effects that are easy to add in Photoshop but not so easy to implement in CSS.

nathanbarry 12 years ago | |

1. Yes, you are right. This is more of a tutorial than an redesign for the sake of doing a redesign.

2. Because Photoshop is far faster and I create much more visually interesting designs when I use it.

Everything in the design is very easy to recreate with CSS. But I agree, sometimes it is better to design in the browser.

jamra 12 years ago |

I like what you did here. I like your photoshop tutorials. I think you should stick with those.

Your book on iOS design was, quite frankly, a waste of money. You touched the surface of interesting design topics and then never dived in. It's a lot harder to teach the principles of design and how to break down features into UI than it is to show pictures of successful designs. Your terminology for the standard controls in iOS was also incorrect.

You never went into why you design the way you do. By just putting up photoshop videos, you are able to deliver by not overselling what you have to offer. Please keep doing more photoshop videos.

numbers 12 years ago |

Just off the bat, it looks a lot easier to read and understand. The current design might be done to support older browsers but I think most of the users should not be punished for the few who still use older browsers.

ben1040 12 years ago | |

For what it's worth, I don't think there's any intentional support for older browsers with their current design, so much as a failure to care about any newer design.

United's current website is Continental's website pre-merger. It's the same design they've used for nearly eight years and it's really showing.

http://imgur.com/a/RZtRH

United's pre-merger site wasn't anything really spectacular, but it was still better than what they're putting up there now.

giarc 12 years ago | | |

Do you have your font settings changed? My mm/dd/yyyy fit's within the frame.

cleverjake 12 years ago | |

we are talking purely about visual presentation, which means that 'older browser' support isn't really an issue. everything could have been done with images (as bad of an idea as that is) and support IE 5, if you wanted to.

cliveowen 12 years ago |

Fi did something way more advanced[1] and even implemented it in HTML/CSS/JS as you can see from the demo. There are a lot of reason to redesign an company website, but there are even more not to. These are ones that come to mind:

-retrocompatibility (the website has to work for the widest possible audience)

-legacy code (you can't waste tens of men-hours for something unproven and of dubious impact on your business. I mean, people have no problem booking flights with the current website)

-implementing in code a photoshop design presents its own challenges and would require a considerable investment of resources. Usually the result would be worse than what planned due to intrinsic limitations of web technologies

-even the smallest change has to be approved by a committee, this is a big corporate entity, not a startup. A radical redesign is likely out of discussion.

[1] http://www.f-i.com/fi/airlines/

kylelibra 12 years ago |

These redesigns are always nice to look at, but there are usually a lot of functional considerations they ignore.

nathanbarry 12 years ago | |

Yep, there are always things missed. This redesign is actually for teaching Photoshop techniques more than it is about getting the best possible United search screen. For example, I didn't make any major changes to the flow or UX side of the design (which is needed for a real redesign!).

cemregr 12 years ago |

I think the redesign could benefit from better organization and more contrast. I felt like "search by" was unnecessarily cramped in a corner, the input fields weren't standing out, and the options at the bottom could be better visually organized.

mcphage 12 years ago |

It's a redesign, but not really a re-think. Check out Bret Victor's "Magic Ink" for a completely new interface for the task: http://worrydream.com/MagicInk/#p227

(and if you like it, read the whole article; it's fantastic).

kyro 12 years ago |

Really well done. What's now painfully obvious to me that I hadn't realized before seeing your design is how much easier cognitively it is to place the destinations horizontally. Makes a ton of sense and you rarely see that.

kawera 12 years ago |

Slightly OT but quite interesting: http://petesmart.co.uk/rethink-the-airline-boarding-pass/

btgeekboy 12 years ago |

As nice as this might be, it looks approximately nothing like the rest of the site, which is pretty jarring. That shade of purple isn't even in United's color scheme.

hiphopyo 12 years ago |

Photoshop is meant for photo manipulation. For user interfaces and web design in general, Flash is a much simpler and intuitive option.

dylanrw 12 years ago |

lol hello! Let me 'redesign' your site without a brief, knowledge of the business, or any idea about the demographics/market/technology involved. I'm a designer with photoshop woohooo! /end snarky attitude

All that aside, a photoshop comp 'redesign' (re-skin may be more accurate) without a brief or objectives besides 'make it easier to use/prettier' is not design. At best it's speculation, at a glance it's just a different layout, at worst it's a grab for traffic to your blog so you can sell more of books.

A design is a solution to a problem, if you don't start with a well defined problem you're not designing...

sergiotapia 12 years ago | |

Your comment is a perfect example of non-constructive negative verbal diarrhea on HN.

This course has a clear purpose: How can I photoshop to design UI?

There's no need to belittle people who actually create content to share.

aymeric 12 years ago | |

You are totally missing the point of his videos.

dylanrw 12 years ago | | |

I realize the main purpose is to teach someone how to use photoshop. Guess what else it's doing? Teaching them that designing without spec is a part of the job. ;)

huangc10 12 years ago |

why does your redesign not work? I press on the drop down arrows...nothing! Tabs don't work?...

adamnemecek 12 years ago | |

Because it's an image.