Working alongside the Head of Contact Centre Operations & Senior Business Improvement Manager to elevate the user transaction journey communications.
The project involved updating the UI design of the email communications to follow best practices and to improve the overall user journey in order to create a stronger brand loyalty.
MY ROLE
I was the lead digital designer throughout the project working on elevating the UI design of the current email communications. I also worked closely with the front end development team to ensure consistency across the multiple communications.
I was the lead digital designer throughout the project working on elevating the UI design of the current email communications. I also worked closely with the front end development team to ensure consistency across the multiple communications.
PROJECT SUMMARY
The goal of the project was to elevate the current outdated email communications, providing a consistent look and feel throughout the purchasing user journey. This included updated UI designs for an 'order confirmation' email communication through to a newly introduced 'order delivered' email communication.
The goal of the project was to elevate the current outdated email communications, providing a consistent look and feel throughout the purchasing user journey. This included updated UI designs for an 'order confirmation' email communication through to a newly introduced 'order delivered' email communication.
The elevated designs followed best practice methods for order email communications as well as consideration into colour contrast usage and font sizing accessibility regulations. Although the updated designs were created with a mobile first approach, responsive desktop versions were also created.
The project was widely appreciated with senior management commenting on the vast visual improvement to the email communications, further elevating the brands reputation to our customers.
THE PROBLEM
The requirement from the business for this project was for the user purchasing journey to be elevated visually as well as undertaking a full review of the current email communications that are being sent.
The requirement from the business for this project was for the user purchasing journey to be elevated visually as well as undertaking a full review of the current email communications that are being sent.
This project is also a part of a larger group elevation project across all digital platforms as well in stores. With updates being made across the e-commerce website and marketing emails, transactional email communications are the natural progression in order to complete a full elevation of our users online journey.
The current outdated system of emails creates user confusion due to large visual inconstancies from the checkout process though to the confirmation email. This could be damaging to brand loyalty due to creating a doubt in the users mind if the communication email is actually from the order they've placed. This can also lead to effecting trust in subsequent future purchases.
DESIGN SPRINT
Research
• Competitor Research
• Email Communication Best Practise (Baymard)
• Competitor Research
• Email Communication Best Practise (Baymard)
Projected timeline
• Considering Development time (Both front-end and back-end development)
• Considering Development time (Both front-end and back-end development)
Wireframes
Prototyping / high fidelity mockups
User testing / feedback
• CTR on accessing your account/order overview
• Reduction on number of users contacting customer services
• CTR on accessing your account/order overview
• Reduction on number of users contacting customer services
DRAFTING
After looking at some competitors emails following some of my own recent purchases, as a user, I liked the clear the visual journey representation of the timelines. Speaking to other users this was a unanimous feedback and therefore a design component I was keen to use in my elevated design.
After looking at some competitors emails following some of my own recent purchases, as a user, I liked the clear the visual journey representation of the timelines. Speaking to other users this was a unanimous feedback and therefore a design component I was keen to use in my elevated design.
The next stage in the project was taking pen to paper to sketch out some initial UI thoughts.
ACCESSIBILITY AMENDS
Following on from an accessibility workshop, I decided to look back over the UI design of the timeline component, adapting the colours to meet WCAG guidelines.
Following on from an accessibility workshop, I decided to look back over the UI design of the timeline component, adapting the colours to meet WCAG guidelines.
NEXT STEPS
Next steps in the project involves working on variations of the template across the other facia's in the group adapting the modules to reflect each individual brand guideline. Limitations of this would again be the use of custom fonts on the emails due to the constraints of various email clients.
Next steps in the project involves working on variations of the template across the other facia's in the group adapting the modules to reflect each individual brand guideline. Limitations of this would again be the use of custom fonts on the emails due to the constraints of various email clients.
Another progression in the project is taking the user journey to further touch points, this includes the my account section of the website whereby users can also see both the progression of their order as well as full details of their order.
