Navigate back to the homepage

Post-mortem of Uber's landing page redesign

Dimitris Raptis
June 25th, 2020 · 1 min read

For many websites, especially e-commerce and landing pages, call to action elements are a key to sales, traffic, and success.

The call to action is a key element on a webpage, acting as a signpost that lets the user know what to do next. Without a clear CTA, the user may not know the next steps to take to purchase a product or sign up for a newsletter and is likely to leave the site without accomplishing their task.

In the following example, we used two variants of the new and old landing page of Uber for drivers. The team of Uber did a structural re-design that boosted their lead generation process and helped the communication of their brand.

1

The first step in our design analysis is to create two different predictions for the two landing pages. Below you can have a look at the generated Attention Maps and Areas of Interest (AOI) in the example Prediction pages.

Attention Maps visualize the visual hierarchy and pinpoint the focal areas in your design. Along with AOI, they can forecast which element grabs more user attention in each variant.

Old Attention Map
Attention Map of the old landing page.
New Attention Map
Attention Map of the new landing page

By applying a basic design principle about faces, the new Uber landing page manages to guide the visitor’s line of sight straight into their Call to Action section. People are curious by nature and if other people look at something, they want to know what it is they are looking at. Thus, by re-arranging the sight of the model to the Call to Action section, they accomplish to focus the visual hierarchy there.

For the sake of this analysis, we defined two AOIs around the basic call to action elements in both screens. The results indicate that the Call to Action button on the new landing page is almost x2 more visible than the equivalent old button.

AOI Results

Landing page variantAOIMeaning
Old186%2.86 times above the average attention
New341%4.41 times above the average attention

Bonus

Visual Clarity is about organizing the content in a manner that conveys the desired message and leads to desired actions by the user.

Old Clarity Score
Clarity score 68%.
New Clarity Score
Clarity score 77%

In this before-after example, the landing page’s Clarity Score increased from 68% to 77% which means that the screen communicates the desired information better and appears less cluttered.

👇 The VisualEyes’ example project 👇 (or open in a new tab)

More articles from VisualEyes

Which ad creative will generate more leads?

A/B testing a banner design in a production environment is not a quick process. Days or weeks can pass before reaching a point of…

June 25th, 2020 · 1 min read

Which featured image will perform better?

A hero image takes the majority of the space on the most seen page of your entire site, the homepage. This is prime real estate in the…

June 25th, 2020 · 2 min read
© 2019–2020 VisualEyes
Link to $https://www.visualeyes.design/?ref=blog-footerLink to $https://twitter.com/visualeyeshq?lang=enLink to $https://www.instagram.com/visualeyes_hq/?hl=enLink to $https://dribbble.com/VisualEyesHQ