UI/UX Designs created for the responsive M&S Sparks 'My Sparks Hub' whilst working for Elephant (London).
M&S are relaunching their Sparks loyalty card, with a new brand and rewards system. Elephant were asked to work with M&S in creating an updated Sparks card responsive hub and app.
The new brand was still in flux when I joined the project and the UX had been worked on for quite some time by the team at Elephant. Nothing was yet decided or approved, this resulted in a lot of re-iteration of the visual style and UI at the same time as we were creating the prototypes for user testing and preparing assets for build by the developers.
This is the final approved design of the sparks hub
As the components were being built at the same time as designed we had to stick very closely to some of the existing design patterns and styling. This is most evident in the design of the rewards cards.
The main change to the loyalty scheme is the 'Surprise' or 'Treat' which would be awarded to random customers when they scanned their Sparks card at the checkout. I explored some ideas for celebration and animation to create a moment of delight for the customer.
Part of the challenge was making sure there was a clear definition between new offers and offers which the customer had actively decided to add to their Sparks card. We kept already offers visible as M&S wanted there to be a path to purchase and so we have a 'Shop the offer' link on each offer card.