Success splash screen
Improving the UX and conversion of EE's confirmation page
EE’s order confirmation pages had very low click through rates back into shop or manage journeys and had not been updated since the launch of the new brand. Many upgrade-eligible mobile and broadband customers were also not upgrading their account or devices on their account after their contracts had expired.
Final designs
Confirmation hero
Order summary
Category links
Error hero
Project goals
01
Re-engage users post purchase
Analytics data showed that the vast majority of users left the website post-purchase and that many users that would be eligible for upgrades or additional purchases don't engage with their offers.
02
Reduce customer support costs
A significant amount of calls were being driven by the existing confirmation page and were often regarding routine questions or concerns.
03
Update the visual feel to match the new brand
The confirmation page(s) were very outdated and used old components. We also wanted to include moments of delight where possible to make the user excited about their new purchase.
Challenges
01
Balancing functionality with commercial asks
EE's existing confirmation pages had very little commerical messaging on them and initial user research showed that confirmation pages serve an important functional role for users wanting to review their order.
02
Limited backend engineering resource
For this project we unfortuantely didn't have an available backend developer. This meant that we had to use only front-end changes to repackage the data that was already on the confirmation page and couldn't fetch other data.
03
Consolidating lots of content
There was a lot of information about the user's order and commercial messages that had to be included in an easily consumable way.
Users place great importance on confirmation emails but less on confirmation screens
User research showed that users see order confirmation as essential proof of purchase while order confirmation screens (what you see once you’ve placed an order on a website or app) are seen as less important and more appropriate to advertise on.
Most content on our existing pages doesn’t have to be visible by default
We began our design discovery by testing the existing confirmation page designs. We watched users go through the checkout process and asked them to talk out loud while looking through the confirmation page. Afterwards, we also asked the users to mark any areas that they felt were important. Based on this research we were able to identify the hierarchy of page's content. While it was important for users to see certain information, such as the order email and delivery address, at a glance, much of the information on the confirmation page was either of secondary importance or unnecessary.
Initial ideas focussed on simplicity and scannability
Our wireframes focussed on simplified designs that would let any information or message be clearly intelligible for improved functionality. Several concepts also included animation and new brand assets to leave the user with a sense of excitement that their order had been placed. To enable more information to be added to the page without losing the ability to quickly scan and navigate the page, our concepts featured interactive accordions and carousels with relevant links.
User testing of initial prototype helped us confirm what worked well
It was important that users knew how to navigate the new page layout, especially the accordions and carousels, so it was great to see all 12 user testers passing the usability test of the new design. What was especially surprising was that many users actually liked the commercial messages and links back into the shop. The user research revealed some simple improvment opportunities, like mentioning that the customer support number was free to call or tweaking the order summary to be clearer, which we easily adjusted the design for over the coming day.
Final designs and documentation
The final designs balance moments of delight, such as the words ‘We’ve got your order’ animating in to transition from the checkout flow to the confirmation screen, and practical improvements, such as more easily accessible accordions for the order information and a cleaner layout for the order summary. To account for edge cases, we also improved the visual prominence and clarity of the notifications that inform the user if there’s been an error with their order or if they need to take any next action, such as confirming their email address.
Next steps and lessons learned
Next, we documented all the designs and wrote acceptance criteria for the developers to use while building the confirmation for web (React) and app (Flutter). This project highlighted the value of doing technical and explorative research early on. After starting with our initial designs, we noticed that we were heavily dependent on key assumptions, such as whether users would accept advertising on a confirmation page, which scenarios we need to account for and whether users would intuitively know to tap on the accordion to reveal more info. Luckily, we had time to do technical research after the project had started and our assumptions were proven true by usability testing, however, it reinforced the importance of doing as much research as possible before jumping into designs.
