

Redesigning the United flight search interface in Photoshop - carsonm
http://nathanbarry.com/redesigning-united-flight-search-ui-photoshop/

======
coldcode
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
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
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...](http://www.flipthefunnelnow.com/dustin-
curtis-%E2%80%93-dear-american-airlines/)

 _Aftermath_
[http://www.techdirt.com/articles/20091106/0337536829.shtml](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/](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...](http://mac.appstorm.net/roundups/graphics-roundups/the-evolution-of-
applecom/)

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. :(

~~~
antjanus
Can confirm, redesigns are scary on the money machine. The more cash your
engine cranks out, the less likely you will be to experiment. Experiments will
fall on low-risk categories, not something as significant as ticket purchase.

~~~
AJ007
Not as scary as how much money your losing because of abandonment.

------
mountaineer
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](http://www.techdirt.com/articles/20091106/0337536829.shtml)

[2] [https://www.uie.com/brainsparks/2010/08/02/please-let-me-
red...](https://www.uie.com/brainsparks/2010/08/02/please-let-me-redesign-
your-airline-for-you/)

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

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

------
aymeric
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
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
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
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
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](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
Do you have your font settings changed? My mm/dd/yyyy fit's within the frame.

------
cliveowen
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/](http://www.f-i.com/fi/airlines/)

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

~~~
nathanbarry
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
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
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](http://worrydream.com/MagicInk/#p227)

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

------
kyro
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
Slightly OT but quite interesting: [http://petesmart.co.uk/rethink-the-
airline-boarding-pass/](http://petesmart.co.uk/rethink-the-airline-boarding-
pass/)

------
btgeekboy
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
Photoshop is meant for photo manipulation. For user interfaces and web design
in general, Flash is a much simpler and intuitive option.

------
dylanrw
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...

~~~
aymeric
You are totally missing the point of his videos.

~~~
dylanrw
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
why does your redesign not work? I press on the drop down arrows...nothing!
Tabs don't work?...

~~~
adamnemecek
Because it's an image.

