top of page

Littlewoods Checkout Redesign

title.001.png

Digital Checkout Brief

4b12248454342f2ac0cb15c59bdfcc4a9cfe3ba5.png

Working in collaboration with Foolproof, create a new, innovative digital checkout experience for a major retail brand of your choice.

The Challenge

Redesigning the Littlewoods checkout experience, making it possible for the user to continue as a guest, before explaining the benefits of account creation.

1.001.jpeg

Figma Prototype

Research Insights

Discovering the current problems with digital checkouts

Cart abandonment is one of the main problems within digital checkout experiences due to: 

  • Having to create an account

  • The device used - predominately mobile

  • Extra costs the users weren't aware of

Screenshot 2022-05-03 at 13.37.15.png

My Process - Miro Board

Littlewoods

Littlewoods' website checkout makes users create an account and enter a lot of personal information before they can purchase any products.

 

Based on my initial findings, I made the assumption that a user wouldn’t want to continue with their basket due to the amount of effort and detail they had to enter.

 

Testing my assumption with regular online shoppers, I got them to go through the process, to which they said that they wouldn’t sign up and they’d go to another site instead.

IMG_8909.PNG
IMG_8911.PNG
Screenshot 2022-03-28 at 16.39.29.png
Screenshot 2022-03-28 at 16.43.49.png

Competitor Research

Comparing the checkout process and features used in competitor flows

Researching competitors allowed me to explore different ways of completing a checkout, whilst comparing features to see which are more commonly used.

Screenshot 2022-05-18 at 12.54.59.png
Screenshot 2022-05-18 at 12.54.59.png
Screenshot 2022-05-12 at 11.57.50.png
Screenshot 2022-05-12 at 11.58.00.png

Getting regular online shoppers to go through two different checkout experiences, John Lewis and Staples enabled me to find out what they liked and disliked about the process, so I could understand the features that would best suit their needs.

Screenshot 2022-05-12 at 13.14.31.png

Out of the two, John Lewis was the preferred checkout experience as:

  • Took less time

  • Required less information to complete 

  • They could continue as a guest.

Screenshot 2022-05-12 at 13.15.50.png

​The pain points of the Staples checkout were:

  • They needed to create an account first

  • Have to fill in a long list of personal details.

User Personas

Understanding the user needs

Observing online shoppers allowed me to generate user personas, identifying they need a quick and efficient checkout process in order to complete their purchase on the site.

​

user personas.001.jpeg
user personas.002.jpeg

Value Proposition

Identifying pain creators and pain relievers

Value Proposition Canvas allowed me to consider the gains and pains of the redesign, helping me generate ideas on how these can be created and relieved to benefit the user in the best way, based on their needs. 

Screenshot 2022-05-12 at 11.59.08.png
Screenshot 2022-05-12 at 11.59.26.png

Customer Journey Mapping

Understanding the customer's journey using the checkout 

Understanding the journey of a user through a digital checkout enabled me to identify the goals of the customer but additionally for the business.

​

This allowed me to consider the message that needed to come across in the checkout, encouraging the user to buy, and then be persuaded to create an account.

Screenshot 2022-05-12 at 11.59.46.png

Microcopy Card Sort

Carrying out card sorting exercise with the demographic to understand features on a checkout process

I wanted to see what information online shoppers thought they needed to enter to buy their shopping, to see what is required within a checkout process.

 

Writing the current checkout form fields on cards, I gave these to 4 online shoppers who sorted them into need and don’t need.

​

Considering Hick's Law helped identify what features the users would benefit from, without creating information overload for the user.

Screenshot 2022-05-12 at 12.00.12.png
Screenshot 2022-05-12 at 12.00.18.png
Screenshot 2022-05-12 at 12.00.49.png

User Flows

Simplifying the current user flow

Screenshot 2022-05-12 at 11.58.28.png
Screenshot 2022-05-12 at 11.58.38.png
IMG_8900.heic

To redesign the checkout experience, I needed to be able to simplify the current process. Creating a user flow on Miro, I was able to identify the number of steps the user currently has to go through before carrying out a card sorting exercise, using features determined by my microcopy study, to create a new information architecture.

New Information Architecture

I was able to create a simplified information architecture, splitting the flow into two different pathways for delivery and collection. This was something that wasn’t clear within the current digital checkout experience.

Screenshot 2022-05-12 at 12.46.32.png

Low - Mid Fidelity Wireframes

Initial wireframes, implementing features discovered through research

Screenshot 2022-05-02 at 10.44.41.png
Screenshot 2022-05-02 at 14.09.49.png
Screenshot 2022-05-02 at 16.05.14.png

From my findings, I began to create low fidelity wireframes using Figma, including placeholder titles on the form fields to reduce the amount of space taken up on the screen allowing all the information to be seen by the user.

 

Additionally, adding floating titles once the field is active allows the user to remember what information they are entering.

 

Implementing the colours of Littlewoods, made clickable targets more visible to users, suggesting to the user where to tap to continue with their checkout process.

Screenshot 2022-05-08 at 13.53.53.png
Screenshot 2022-05-08 at 13.39.47.png

Usability Testing

Carrying out multiple rounds of user testing

Low Fidelity Testing

Screenshot 2022-05-12 at 12.06.04.png

Low fidelity testing validated that the flow was easily understandable and the user knew what to do at each stage of the process, highlighting issues with microcopy and formatting issues where form fields were too close together.

High Fidelity Testing

IMG_2089.JPG
IMG_2090.JPG

High fidelity testing helped me consider making small design considerations when users try to continue in the process without having entered all of their details, creating error messages.

 

Additionally, users wanted to have the option of checking their basket, a feature not yet designed, once they reviewed their checkout before they pay.

Screenshot 2022-05-12 at 12.06.18.png

Developments

Improving the prototype from results discovered in usability testing

Error Messages

Screenshot 2022-05-11 at 13.14.55.png
Screenshot 2022-05-13 at 11.55.14.png
Screenshot 2022-05-13 at 12.02.59.png

Adding additional microcopy and highlighting the form field indicates to the user where the missing information is.

Editing the Basket

Screenshot 2022-05-11 at 13.54.57.png

Separating the wishlist and remove button reduces the risk of clicking the wrong button whilst implementing an undo feature if the user decides to change their mind.

Screenshot 2022-05-13 at 14.00.01.png
Screenshot 2022-05-13 at 14.53.21.png
Screenshot 2022-05-13 at 14.11.12.png
Screenshot 2022-05-13 at 14.53.15.png

Shortcuts 

Screenshot 2022-05-15 at 11.51.16.png
Screenshot 2022-05-17 at 16.12.51.png
Screenshot 2022-05-17 at 16.11.28.png

To make it a quicker process for the user, having the option to use pre-save details stored in users phones would decrease the time it takes them to enter their details, including their personal and card details.

Final Outcomes

Final.002.png
Final.003.png.001.png
Final.004.png
Final.005.png
Final.006.png

Conclusion

From this process, I created a successful guest checkout experience for Littlewoods, reducing the amount of information the user had to enter to buy their products whilst explaining the benefits of creating an account to get them to sign up, which received positive feedback from the collaborative brief partner, Foolproof.

​

Carrying out more user testing at the beginning of my process and getting them to use competitor checkout flows enabled me to discover the user needs, which were backed up by primary research statistics. This highlighted potential features to include and avoid, which is a process I would like to use more, saving me time to allowing me to move on to the design process.

​

If I had more time on this project, I would have liked to have researched and experimented with the idea of a ‘one-click checkout’, developing from my idea once the user has created their account, further making it simpler and quicker for the user. Additionally, I would like to experiment with new software, enabling me to develop my coding skills in order for the checkout process to be completed accurately.

bottom of page