Order confirmation page
Redesigning the order confirmation page
After completing a purchase on the webshop, the user is redirected to the order confirmation page. This page was not utilised properly from a user perspective and therefore in need of an update to make it more appealing and informative to the user. I conducted research and redesigned the whole page for desktop, mobile and tablet.
Background
This is what the page used to look like. It had not gotten any attention for several years and only contained text about the order, buttons to either go to the order or continue shopping, and a survey banner.
I saw potential in improving the page dramatically. For example, I saw the potential to inform the users about their purchase, to make the copy much more clear and understandable, and to present an FAQ section so the user could find answers without having to call customer service. I brought all of these ideas up with different stakeholders who gave me the green light to work on this project.
This page exists on both the B2B and B2C versions of the website, and since there are some distinct differences between these types of website, I had to design two versions of the page.
Data and insights
First of all I reached out to the analytics team to ask if they had any data on this page. It turned out that unsurprisingly the users very quickly navigated away from the page.
I also took advantage of a website where you can read about best practices for ecommerce websites to see if there were any must-haves to implement. Then I also conducted a competitor analysis to see if the competitors had any interesting approaches to this particular page. My key findings were that you should display the email that will receive all mails about the order, and to show a summary of the order.
UX research and design
This was a typical UX Design process where I conducted both user research and design.
Everything was designed in Figma and I had to consider all devices.
Before starting the design work, I conducted semi-structured interviews with 6 users about how they use the page today and what they expect to see on this page, and what improvements they proposed. In general the users said they just quickly navigate away from it or don't use it much.
When asking about possible features I received some interesting answers, such as always having the items ordered visible, and having a button to reorder the same items.
First design iterations
After gaining some knowledge of best practices, competitor research, and user interviews about this specific page, I started sketching. Using pen and paper I rapidly did several lowfi design iterations, and ended up with a draft that I then designed in Figma for a more hifi design. I then invited the users from the interviews for short sessions where I displayed the design to them and asked for feedback. It was important for me to understand both the spontaneous reactions and thoughts of the users, but also the underlying needs and requirements of the page.
After doing this with 5 users I had gathered a lot of valuable input and I saw potential for improvements, so I went back to designing a new iteration using the feedback I had received.
Design iterations
Here are a few of the different design iterations. It contains both B2B and B2C versions.
Final iterations
Throughout this iterative design process, I received lots of helpful user input and feedback. I realised that the final design had to contain additional things e.g.:
- A complete summary of the order; all products, addresses, names, price etc.
- Updated copy that more clearly than before explained the next steps of the order process.
- A way to expand/collapse the product list for large orders so the scroll wouldn't be so long.
Using all the insights gathered, I ended up with two different versions on B2B and two different versions on B2B that were potentially the final version.
There were also internal stakeholders that late in the process came with important input to take into account. For example, they highlighted the importance of the survey banner being above fold.
Final design
A/B testing and final comments
With the help of my Web Analyst colleague, we put up an A/B test with the new versions vs the old version to see which one would perform the best. In both B2B and B2C the new version showed a much higher usage of the page, for example the users stayed longer on the page, and the conversion rate went up thanks to having a reorder button and listing all items of the order.
The final designs were a big improvement compared to the old version:
- The users can now instantly after the order is placed get a detailed summary of their order.
- They can confirm that the input (address, email, number of products, etc.) of the previous step is correct.
- The copy is improved so that they more easily understand the order process and what the next step will be.
- With the added functionality of being able to add the same product(s) to the cart, the conversion rate went up (this is a pattern observed in some B2B customers who create many identical orders).
- The FAQ section is helping the users quickly finding answers to their questions (I saw in the analytics tool Hotjar that users frequently clicked it).