Your users will remember 2 moments from their entire experience with your product: the strongest emotionally (good or bad), and the last. It is the well-known law of “peak-end”. To improve overall user satisfaction, it is therefore necessary to capitalize on these two moments.

When working on the creation or redesign of a product, we usually put all our efforts on the main pages such as the home page, the showcase of our brand.

Of course, this is where you have to succeed in creating the No. 1 moment, the “peak” since users get an idea of a product in 50 milliseconds according to Don Norman (one of the founders of the main UX and UI principles).

But what about the last moment, the “end”? I am thinking in particular of end forms and transactional paths: on this type of page, design work is often limited to the functional aspect, leaving aside the emotional aspect. Error: this creates a break in the user experience even though these paths are just as engaging as the home page!

How to work on the stages of processes and forms to make them “lovable” and engaging moments in your user experience?

In this article, I am based on a concrete case by offering you a “re-design” of a screen on the Louvre Museum's mobile ticketing site.

‍

The problem encountered

The Louvre Museum website is the perfect illustration of the phenomenon described above. Last week, I wanted to test the Friday night: when I went to their mobile site, I noticed that the home page was particularly successful:

Indeed, all the elements reflect a positioning focused on the idea of escape and highlight the exceptional nature of the place:

• The majority of the page is dedicated to images: we are welcomed by a video of the drone of the pyramid at sunset. Here the “wow” effect is immediate! Throughout the pages, the photos of the place, galleries and works are still present, giving a very immersive side.
• The message is clear “get away”, throughout the site, the vocabulary and tone repeat the service codes of luxury, in the manner of a high-end travel agency.
• Finally, all the graphic codes converge around the high-end aspect: serif typography, black and white and that signature green dedicated to the call-to-action button.

However, by clicking on the “Tickets” button, the user is redirected to a third-party service whose UX and UI are totally different from the rest of the site:

‍

The current ticket office:

The screens are very dense, there is a lot of text and actions required of the user.

There are no more photos. The tone is quite cold and generic. The elements for choosing dates, times and rates are all on the page and are not really up to the standards of what can be found on other ticketing sites and applications.

In short, the break is striking, and the experience is greatly degraded: It took me about 3 minutes to get my ticket, while I count on less than 30 seconds on other services in the cultural sector such as Fever or Shotgun.

‍

My quick wins to upgrade this ticketing screen

To quickly improve this screen, you should therefore think of a few UX and UI tips.

The quick wins design

• In UX: simplify the process by dividing it by stage. 1 screen = 1 action
• In UI: using the strengths of your product positioning
• In UX/UI: modernizing its components to facilitate interactions

After

Here's what that could lead to:

Check out the demo:

‍

The lessons of this case

SSimplify the course by dividing it by stage. 1 screen = 1 action

To design an effective screen, you must start by looking at the user perspective by asking yourself the following questions:

• Where is he/she located in their career?
• What exactly is he/she looking to achieve on this screen?
• What is the essential information?

The first two questions will help answer the third and thus sort and prioritize the information to be displayed. As we saw on the Louvre screen, text quickly takes up the entire screen on a mobile site! However, this is a waste of space because mobile users generally read only 20 to 28% of the content of a page, according to many. studies conducted by Nielsen Group.

To enable your user to reach their goal, you can help them in several ways:

1. First by breaking the form down by step and telling him about its progress and the remaining steps.
2. By displaying the minimum amount of text possible
3. Then by placing this essential information in strategic places for his eye. To do this, you can use the following UX laws:

According to the Gutenberg principle, you must place the call-to-action button at the right time after scanning the main information.

And according to the Fitts' law, the larger, more visible, and closer to the thumb area a component is, the faster and easier it is for the user to reach it.

In the case of a journey, by placing the sticky button at the bottom of the screen, rather than at the end of the page, you do everything possible for the user to understand and perform the main action in record time;).

‍

Define and use your product positioning

Positioning is the way in which a brand expresses its values and differentiates itself in the minds of consumers. On a digital product such as a mobile site, or an application, this is manifested through the graphic choices, the tone but also all the functionalities and the routes offered.

Defining your positioning will not only allow you to create a unique product and therefore more “lovable”, but also to identify the key functionalities of your experience and to prioritize them.

To express it within a transactional path, a form or any other path that seems to be very functional, you can for example opt for a background color different from white. Here, for example, I opted for black in the background to amplify the immersive effect and transmit the emotion linked to curiosity, the feeling that you are going to discover a mystery when you buy a ticket to the Louvre.

‍

Modernize its components by doing the monitoring

Finally, the most difficult thing for a product team is not always to create new screens, but to update the elements already present in their design system.

To ensure that your product remains at least up to the market standard, and that the user experience is not degraded by the lack of modernity of UI components and elements, you must regularly “bench” competitors and the most innovative products.

This is even more the case when working in sectors disrupted by young actors, such as culture (but also banking, savings, etc.).

You should also not hesitate to draw inspiration from the best practices of the most innovative applications, even for your mobile site, in a “mobile first” logic.

‍

Conclusion

In this article, I hope to have shown you the importance of transcribing your brand positioning even in your forms: these end-of-life moments are just as essential for the overall experience with your product and the satisfaction of your users.

By applying a few “quick wins” UX and UI principles, I was able to quickly improve the Louvre ticketing screen to offer a more engaging and memorable user experience.

What you need to remember:

1. Simplifying your screens by dividing your journey by stage makes it easier for the user to understand and accelerate their actions.
2. Clearly defining and using the positioning of your product, including on these screens, allows you to create a unique experience and convey emotions.
3. Finally, it is crucial to stay up to date when it comes to design and components, by monitoring regularly and drawing on the best practices on the market.

Remember that every interaction counts, from the first “peak” to the last “end.” Investing time and effort in designing your forms will help strengthen your brand image and create a lovable product!

‍