Expert Review — PayPal

Scope — PayPal SG landing page (desktop layout only)

This was part of a design challenge in which the company ghosted me after I had submitted. Paypal SG was their client. So instead of letting the work go to waste, I thought I’d publish it here.

I’ve done heuristics evaluations before, mostly based on Nielsen’s and Abby-the-IA’s heuristics. I am not even sure if this is the best format to do it. But here goes. Veterans, please nourish this UX-baby with your feedback.

List of findings

1. Topmost section (first fold) of landing page

1.1. The most prominent call-to-action button (SIGN UP), is targeted at first-time visitors / non-users of PayPal. However, the majority of the content of the topmost section is an image carousel consisting of the latest offerings. This information is targeted at existing/ experienced users of PayPal. There is a higher interaction effort for new users to access relevant information such as “what is PayPal, how it works, etc.” which are only available after scrolling down the topmost fold.

Fig 1. Hero Banner / Image carousel at the topmost section

1.2. It is assumed that users will see all the information distributed across all the images in the carousel. However, at a given point of time, only one image is presented to the user. This might or might not be relevant to the user. We don’t know if the user waits to scroll through all images in the carousel before overlooking it and scrolling down.

Severity: 3

Recommendation: Conduct eye-tracking studies and perform web analytics to determine the behaviour of both first-time visitors and existing users. Use a static hero banner (Fig 2) showing the most pertinent information (what PayPal is, the unique selling point, etc.). Conduct studies to test this recommendation.

Fig 2. Landing page of Google Drive

1.3. There is no indication of continuation of content below the first fold (Fig 1). Combined with the white space below the image carousel, users could be misled into thinking the website has only 1 fold.

Severity: 3

Recommendation: Include content that shows partially on the first fold and partially on the second fold. This will indicate continuation. Other elements that indicate continuity can be used as well (that very obvious arrow in Fig 2). Previews should be checked against different viewport sizes.

1.4. Poor contrast between navigation arrows and the background, (red rectangles in Fig 3) depending on the image in view. Poor contrast between selected ‘dot’ and unselected dots.

Severity: 2

Recommendation: Introduce contrast in the elements via colour or size. Use web accessibility evaluation tools to validate.

Fig 3. Poor contrast areas

2. Megamenu on top

Fig 4. Megamenu

2.1. The choice of megamenu instead of linearly-stacked dropdown submenus is good as it reduces the average distance to reach submenu items

2.2. However, the submenus appear on-hover. Some of the paths used to reach the submenu items cross over the activation area (red rectangle in Fig 3) of the adjacent menu item. E.g., while moving the mouse towards the PERSONAL submenu item “Refunds & Returns”, it crosses over the main menu item “Business” and brings out the BUSINESS submenu before the user reaches the intended target.

Occurrence: On all 3 menu items with a dropdown

Severity: 4

Recommendations:

a. Re-arrange the layout to prevent crossing of activation areas.
b. Introduce a latency for exposing the submenu items on-hover.
c. Change the trigger from on-hover to on-click.

3. Others

Fig 5. WAVE accessibility evaluation tool

3.1. Contrast levels for some text do not meet WCAG standards. Furthermore, there is no noticeable difference between hyperlinked text and normal text. (Fig 5)

3.2. The method of contrasting hyperlinked text and normal text is not consistent throughout. Colour and bold text are used in some sections and only bold text is used in some sections. (Fig 5)

Severity: 2

Recommendation: Introduce contrast in the elements via colour or size. Be consistent throughout. Use web accessibility evaluation tools to validate.

3.3. The current thematic flow of the landing page:

a. Header with menu and CTAs
b. Image carousel with latest offerings — for existing users
c. How PayPal works — for new users
d. Features — Unique selling points — for new users
e. More features — for existing users
f. List of existing customers — conveys to new users that PayPal can be trusted
g. More features
h. More CTAs
i. Footer

Severity: 0

Recommendation: Content hierarchy could be re-arranged to consolidate sections targeted at new users on the landing page. And sections for the existing users on pages after logging in.

References

1. Nielsen’s Heuristics
2. Web Content Accessibility Guidelines (WCAG)
3. Severity Ratings for Usability Problems, Jacob Nielsen