Nathan Barry
  • Home
  • Blog
  • Books & Products
  • About
Twitter YouTube Search Menu
  • Home
  • Blog
  • Books & Products
  • About
Twitter YouTube

February 13, 2014 - Design

Redesigning the United Flight Search Interface in Photoshop

Flying out of Boise, Idaho you don’t have a lot of options. There are only direct flights to a few cities and every itinerary has its downsides. Because of that I spend a lot of time using United’s advanced flight search.

old-flight-search

 

 

I had two goals in redesigning this screen:

  1. To know how it could look and function.
  2. To teach designers how to use Photoshop.

In this post I’ve got a two-part video walking you through the redesign. These videos are the first half of the entire case study available in my upcoming course, Photoshop for Interface Design.

The videos

Part 1


Part 2

The finished redesign

These videos take you halfway through the case study. The next two are coming next week. To make sure you get those sign up for the email list at the end of this page.

In the mean time, here’s what the final design looks like:

redesigned-flight-search

 

 

Ready to learn more?

Photoshop for Interface Design is my new course on using Photoshop to design great software. Whether iOS apps, websites, or complex SaaS applications, I’ll teach you the techniques used by professional designers. You can skip right past the Photoshop tutorials for photographers (no red-eye removal tutorials here) and go right to learning about paths, layer styles, and the techniques you’ll use every day.

If you want to learn to use Photoshop—and value your time—this course is for you.

Sign up with the form below to hear more about the course and also get the next installment of this case study.

I’m Nathan Barry. I’m a creator, author, speaker, blogger, designer, and the founder of ConvertKit.

more about me

Join the Newsletter

Each Monday I send out my weekly newsletter
 and latest blog posts. Subscribe to stay in the loop.

Subscribe to get my best content. No spam, ever. Unsubscribe at any time.

You might also like...

more recent articles
February 3, 2020 - Business, Design

The magical combination of teaching and storytelling

read more
December 10, 2019 - Design, Life

I built a tiny house!

read more

31 Responses to “Redesigning the United Flight Search Interface in Photoshop”

  1. Rus

    February 13, 2014

    You definitely improved the aesthetics of the site. Nice job.

    reply
  2. Nick

    February 13, 2014

    This seems like the first step you’d need to take if you want to build really great software.

    Hard to believe United skipped this step.

    reply
  3. Dallas

    February 13, 2014

    That is really nice, Nathan! You did an excellent job. Just out of curiosity, is there a reason why you left the “Who is traveling” dropdown lists unchanged?

    reply
  4. Jacqueline

    February 13, 2014

    OMW! what a difference!

    reply
  5. chris

    February 13, 2014

    Thanks, that was fun! Interesting how your selection of shortcuts differ from mine. In the dramatic conclusion, I hope we’ll hear why your trip to SFO was cut short by a day (15 -> 14), hah.

    reply
    • Nathan Barry

      February 13, 2014

      It actually was cut short one day. I was coming home the 15th (in SF now), but then realized I should be home for Valentine’s day. So now I’m flying home early tomorrow morning (the 14th).

      reply
  6. Georg Kuklick (@downtowndesign)

    February 13, 2014

    Good work. The UI Elements to choose who is traveling could be bigger for touch interfaces.

    reply
  7. Adriano Monecchi

    February 13, 2014

    Really nice walkthrough!

    reply
  8. BJ Wright

    February 13, 2014

    haha…I’m flying out of Boise tomorrow on United, definitely hate jumping through the hoops!

    reply
  9. Archie

    February 13, 2014

    Love the look of your final design!

    One thing that might make it even more convenient would be to get rid of the inc/dec buttons. I really hate those thing (I always feel like I’m 7 years old again playing ‘Operation’ with my sister).

    Anyhow, I think a series of buttons might be better.

    For example, most of these values will most likely be between 1-3. How many infants do people normally travel with? And certainly how many infants are in laps?

    I think a series of buttons with one, two, or three figures would work well, and then have an ‘Other’ button for those folks that are booking a field trip for their high school chess club.

    Again, looks great.

    Cheers! :)

    reply
  10. Ingo Muschenetz

    February 13, 2014

    Nice! Suggest changing the text under SFO to “Returns on” as that suggests that this is the return leg of the journey. Also note that you’ve implicitly added a feature. The original screen allows you to be flexible on both departure and return. Now you can be flexible on one or both of the legs.

    reply
  11. Art

    February 13, 2014

    Having huge BOI/SFO labels seems redundant – I mean it looks cool, sure, but given enough familiarity with the UI (think “expert users”) those things starting to become a sore in the eye. Same for huge picture of airplanes that just repeats what the icon on the tab already communicates.

    reply
  12. Lucas

    February 13, 2014

    Holy cow. The United interface is the most unusable, disastrous, and embarrassing work of technology I’ve ever seen.

    What makes me most sad though is someone presented this as prod ready and actually thought it was great. Sigh…

    reply
  13. fujisan360

    February 13, 2014

    Nice, the UI becomes more elegant and easy to understand. Kudos to you.

    reply
  14. zhanxw

    February 13, 2014

    That’s good videos about Photoshop. Thanks.

    Besides the Photoshop part, several things I noted:
    1. missing “Search airports with XX miles” option.
    2. the big airplanes logo between “FROM” and “TO” seems not useful, and probably make cell phone users inconvenient (need to scroll left and right)?
    3. (agree with Art) big BOI/SFO is not helpful. Most people may prefer full city names.

    reply
  15. Victor

    February 13, 2014

    Really nice design.

    Looking forward to the Photoshop course.

    When do you think it would start?

    reply
  16. Abhijit

    February 14, 2014

    Nice work Nathan.

    One thing I have always noted is that designers unconsciously tend to display the ID prominently. In this case it is BOI and SFO.

    Do users really care about the ID of the airport?

    I think “Boise, ID” and “San Francisco, CA” should be prominent. San Francisco has SFO, QSF and other airports. I would look to rename that term “San Francisco, CA” to something more specific to identify each airport in San Francisco.

    Just my 2 cents :)

    reply
  17. Ole P.

    February 14, 2014

    – The entire grey field below “Who is travelling” could be replaced by a simple “Add” button.

    – Icons look blurry. For a cleaner, crisper result, consider using Adobe Flash instead. Like they say in UX circles, Photoshop for photos and Flash for everything else (Illustrator only if you’re into fine art).

    Also, Google “Air traffic flow management”.

    reply
  18. Chris

    February 14, 2014

    Your Photoshop videos have been fantastic, thanks! I hadn’t known about option-dragging effects from element-to-element, using space-bar to adjust your marquee selection, masking effects or layer effects (even though I kept accidentally opening the window when I’d try to rename a layer!)

    I’ve already implemented several of your lessons into my workflows! Well worth the watch!

    reply
  19. Evans Domina

    February 15, 2014

    WOW. The redesign looks freaking awesome. #kudos

    reply
  20. Luca Candela

    February 15, 2014

    Great job, you should try the same exercise with Antetype.

    http://www.antetype.com/

    It’s a much better tool for web design than Photoshop for a bunch of reasons. I might actually take your design and remake it in Antetype if I have an hour of downtime this weekend.

    NOTE: I’m not an employee of Antetype, I just love their product SO much!

    reply
  21. Luca Candela

    February 15, 2014

    Could you do me a favor and send me the photoshop file with the assets for the icons? It would save me a bunch of time remaking the design in Antetype. I’ll send you the final product back so you can evaluate the difference (and I’ll make a video if you are curious).

    reply
    • Nathan Barry

      February 15, 2014

      No, sorry. It’s part of my paid course that launches in 1.5 weeks.

      reply
      • Al Briggs

        September 23, 2014

        @Luca – Sounds like he is not curious!

        @Nathan – Do you cover responsive designs in your course? I also like to see a mobile version of this site.

        reply
  22. Sylvanus

    February 19, 2014

    This is so beautiful and serves as a great inspiration for me. Nathan you’re a great inspiration I’m really wowed by your creativity and how you transformed this section of the flight search section. I’m very sure user would find it very soothing and relieving to use. Great work Nathan, thumbs up.

    reply
  23. Mila

    April 7, 2014

    This is what one would say functionality vs aesthetics or when developers take the roles of ux
    Great example :) and actually lately I started ready more and more about this issue.

    reply
  24. Duncan

    October 29, 2014

    Virgin seem to have nailed this https://www.virginamerica.com/

    reply

Trackbacks

  1. Flowcom Friday | Flowcom says:
    February 14, 2014 at 7:20 am

    […] Berry redesigns the United Airlines web search interface in Photoshop. Perhaps not without faults, it’s still […]

    Reply
  2. Part 2: Redesigning the United Flight Search in Photoshop | Nathan Barry says:
    February 19, 2014 at 10:22 am

    […] week I showed you part one of the United flight search redesign. Today I have part 2 for you. Now this is more of an exercise for learning to design interfaces […]

    Reply
  3. Diacode Weekly #15 | Diacode Blog says:
    February 28, 2014 at 10:41 am

    […] Redesigning the United Flight Search Interface in Photoshop […]

    Reply
  4. 5 Hidden Sources of UX Portfolio Projects | Learn How to Break into UX Design says:
    June 16, 2014 at 11:46 am

    […] Check Nathan Barry’s Redesigning the United Flight Search Interface in Photoshop post for inspiration on approaching site […]

    Reply

Leave a Reply to fujisan360 Cancel reply

Subscribe to get my weekly newsletter.

Nathan Barry

© Copyright 2022 Nathan Barry.
All rights reserved.

Categories

  • Audience Building
  • Business
  • Design
  • Investments
  • Learning
  • Life
  • Local (Boise, Idaho)
  • Marketing
  • Mobile
  • OneVoice
  • Podcast
  • Security
  • Social
  • The Web App Challenge
  • Travel
  • Uncategorized
  • WordPress

Products

  • Designing Web Applications
  • The App Design Handbook
  • Authority
  • Photoshop for Web Design
  • Commit
  • ConvertKit
  • How I Made $19,000 on the App Store While Learning to Code
  • One Year After Quitting My Job
  • Starting The Web App Challenge: From Zero to $5,000/month In 6 Months
  • User Experience Lessons From the New Facebook iOS App
  • Step-By-Step Landing Page Copywriting
  • Designing Buttons in iOS 5
  • The Best Marketing Method I Know
  • On Design Approval and Intentional Flaws
Nathan Barry

© Copyright 2022 Nathan Barry.
All rights reserved.