Imagine you’ve been hired as a UX designer for a new travel website targeted to young adult travelers. You’ve been tasked with designing a flow for finding and booking a flight.
Where would we start? A good place to begin would be referencing existing design patterns. Design patterns are widely adopted solutions to common design problems. While there isn’t any global or standardized reference for industry-wide design patterns, there are many ways to find a baseline to design from.
When designing a flight booking process, we need to consider what types of actions are part of this process. We’ll need some sort of way for users to select dates and locations, as well as a listing of the results once they’ve completed a search. We’ll also likely want to offer some ways for users to filter and narrow down search results.
Once we have a sense for what types of actions the user will need to take, we can reference design patterns from competitive analysis and pattern libraries as we build out our flow.
We should always perform a competitive analysis to examine designs with related functionality as part of the design research process. For our flight example, we might look at search flows on existing airline websites. We could expand our search by looking at other travel websites, like train, bus, and car rental services services, or travel aggregators like Kayak. We might also consider non-competitive designs with similar functionality, like hotels or event listing websites, for creative ideas.
We can also reference pattern libraries, websites that collect and define different UX and UI patterns for reference, for example:
(The term “pattern library” is also sometimes used to describe internal pattern libraries used for reference within an organization’s design system, which will be covered later in this lesson.)
While it may be tempting to reference a design pattern because it’s our personal favorite, or because we think it looks best, always consider the user needs and business goals of a product to design the best pattern. We can always diverge from patterns as needed to meet our goals, while remembering that novel variations may add cognitive strain for the user.
In the following exercises, we’ll take a look at a few different example design patterns relevant to our flight booking user flow. Keep in mind that this lesson doesn’t cover all of the many design patterns out there, but you can use the tools, knowledge, vocabulary, and research skills here to find design patterns for any design problem you might encounter.
Instructions
Examine the three examples of travel-related search forms from a competitive analysis.
What do these designs have in common?
Check Answer
- Every one of these searches includes a location field, date fields, and a button to submit the form.
- The Kayak and Marriott searches have a similar information hierarchy, where the main search fields draw more attention and other filters appear smaller and can be treated as optional.
- Each of the forms includes a start and end date for a trip or reservation in the date picker.
Did you observe any other similarities between the forms?
What differences do you notice between the different designs?
Check Answer
Some observations could include:
- Some of the fields are specific to the type of travel. For example, the Enterprise form asks for the renter age, while age is not included on the Kayak and Marriott forms. The Kayak form includes a field to toggle between “round-trip” and other flight types, while the other forms don’t use this type of field.
- The forms use different kinds of headings. The Kayak form invites the user to fill out the field with a conversational question heading, “Where are you flying?”. The Marriott form doesn’t use a heading at all. The Enterprise form uses a matter-of-fact heading personalized with the user’s location: “New York City Car Rental.”
Did you observe any other differences between the forms?
After looking at these designs, think about some takeaways for designing our flight booking search for our travel website. In the following exercise, we’ll continue looking at different design patterns and break down specific elements of our search form.