Loading...

The Shell loyalty club is available in 15 different markets across the world. The purpose of the site is to promote the Shell loyalty scheme, so users can register their Shell cards and get points every time they buy petrol. The points can later be used for petrol discounts or for other promotional products, depending on the market.

Project Details

Project Story

Shell is one of the biggest clients of Wunderman. The head of UX asked me to evaluate the Shell loyalty club websites and to provide suggestions for how registrations of shell club cards can be increased.

Brief

  1. Carry out heuristic evaluations of Shell loyalty club sites across all 15 markets.
  2. Create sitemaps for all markets.
  3. Provide an overview of how Shell points can be redeemed in different markets.
  4. Make suggestions for improving the user experience in order to increase card registrations.

Actions

I carried out cognitive walk-throughs for the most important user journeys, e.g. registration, forgot password, redeem points, lost cards etc. I then audited the websites and recorded issues with regards to usability, navigation, and overall consistency.

I identified 20 points with recommendations that would improve the usability, accessibility and overall experience. The list included changes to the copy, interaction patterns, and consistent styles for links and CTAs.

Example: A registration section on the top of the home page showed two input fields and a CTA (‘Register’) that had the appearance of another input field.



On the Sign in / Register page I identified problems with the error messages.
The register CTA should look like an actionable button, preferably in yellow (a colour from the brand palette), which would improve contrast on the red background.



I recommended the following:
The register CTA should look like an actionable button, preferably in yellow (a colour from the brand palette), which would improve contrast on the red background.



On the Sign in / Register page I identified problems with the error messages.

  1. Whenever the user made a mistake, a blue panel appeared at the top of the page showing the same message for all different error cases.
  2. The same top-of-the-page blue panel was also used for success messages, which was confusing.
  3. The error message below an input field was also generic regardless of the type of mistake that a user can make.

I recommended the following:
Success and error messages should have different styling, colour and symbols.
Error messages should call out the type of error for the card number field:
IF no input: "Please enter your card number"
IF wrong format: "Please enter your number again, leaving out any spaces"
IF contains non-numerical characters: "Please enter only numbers"
IF number is not valid (server-side validation): "Sorry, we can't find your number - please check and re-enter"



Results

I created a heuristic evaluation document that showed the identified issues and recommendations in order of priority. Both the client and the head of UX were impressed with the level of detail I had provided. They decided that changes would be implemented in different releases. Example: On the main screenshot (top section) you can see that the ‘Register’ CTA has now been in line with my recommendation.

About Me

I am Creative

Being creative is about finding the right solution for a problem. I am a curious man, can’t help that, and I love challenges. That’s why I did a Phd after all. I love UX as it challenges my brain all the time. That's my secret: UX keeps me fresh!

I am Friendly

A good cup of tea and a friendly smile is a great way to start a project! OK add a few cookies in the mix. Great solutions come from good discussions and good connections and what better way to do this with a smilie face. Let’s do it!

Successful projects,happy clients and great results