The five layers of a good digital experience

User experience (UX) is the cornerstone of app and website profitability. This practical note breaks down the five key elements of UX design, taking Booking.com as an example.

Each day, more than 1.5 million overnight stays are reserved via Booking.com's website and mobile apps. The architects of this successful travel site know well that user experience (UX) design is a fundamental element of its success.

Good UX design is key to optimizing both the conversion ratio and customer service on all websites and apps, say IESE's Luis Ferrándiz and Julian Villanueva, with Carmen Balmaseda. Online design needs to be easy and accessible, functional, stable and offer interesting and well-structured content.

The five planes of user experience

Based on Jesse James Garrett's book Elements of User Experience, Ferrándiz et al. walk students through the five planes (or layers) of UX.

1. Strategy. Strike a balance between business objectives and user needs. Booking.com, for example, aspires to excellence in the travel reservation sector and recognizes that consumers want flexibility and quality service. To achieve that balance, Booking.com offers information and tools that allow users to make decisions and book at the right time and the right price.

Once the user's needs are identified, it's time to consider the business objectives and link those to the customer life cycle (recruitment, development, retention and maybe even recovery).

2. Scope. Transform strategy into requirements, defining the characteristics of the product or service and any other value-adding information to be displayed on the website or app. Simplicity is the ultimate goal.

Make a list of the information, tools and options wanted. For Booking.com, this includes data on accommodations, flights, the combination of airfare and hotel, car rental, user ratings and price drops.

3. Structure. Here is where shaping the platform and user interface (UI) comes into play. A site or app's structure determines how the systems will respond to user actions and consists of two aspects:

• Interaction design. The purpose is to define a progression to guide users where you want them to go. On Booking.com, the first step is to get users to enter their destinations, dates and number of travelers. Users fill out a form to see a list of possible options, and they can view details before confirming their reservation.
• Information architecture. This specifies the content, how it will be structured and where it will be placed on the screen. Booking.com opts to show the differentiating characteristics of a hotel right there in the list of available accommodations, rather than making the user click on the link to view the particular location. Thus, it helps travelers select (or discard) each option faster, based on what they are looking for.

4. Skeleton. At this level, the exact structure is finalized, including where the interface elements are located on the screen and how they interact with each other. What's essential here is the design of the interface (arrangement and presentation) and navigation (elements that allow the user to intuitively navigate, find information or interact).

The distribution of Booking.com is based on the golden triangle (whereby the most viewed area of a website is the upper left section). At the top of the page are buttons linking to the main services offered, while a panel on the left contains search options, then filters. Search results appear in the middle of the page.

5. Surface. Visual design should help users understand the information and guide them in using it intuitively, while being socially and culturally appropriate.

Booking.com always places the relevant options and information in the same locations for easy navigation. Under the hotel name, for example, it always displays the address and a link to the map; and below that are photographs, average ratings and user comments.

Tips to optimize user experience

In addition to building these five planes coherently, the authors stress the need to prioritize simplicity and user feedback. As a great deal of traffic comes from mobile devices, they recommend being direct and focusing on a few key messages, displaying large and visually attractive buttons, highlighting advantages, avoiding the use of new tabs for displaying information, offering geolocation services, facilitating integration into social networks and considering the customer life cycle.