1 month | User Researcher, UX Designer | Email: Mobile-first
NX Confirmation Email — screenshots of new design prototype
The new confirmation email allows users to clearly review their payment receipt, take record of their booking and easily access their tickets prior to boarding a National Express coach.
UX tools used: User research | Observation | Stakeholder interview | Usability testing | Card Sorting | Style Guide
The Brief
Redesign of confirmation email as it was very much in need of a refresh.
Problems
⏳ Current product is very dated
📵 Not mobile-friendly
📄 Very wordy & lay-out needed readjustment
🖼 Visual language doesn’t match style guide
NX Confirmation Email — live product (late 2020)
➡️ Click here to scroll through the current live product (late 2020) to see what I had to work with.
The Opportunity
1️⃣ To rethink usability considering more users access through mobile devices now rather than desktop.
2️⃣ To refresh the look & feel matching the style guide.
3️⃣ To improve userflow coming into & out of the confirmationemail, which is a crucial part of the customerjourney as a whole.
Emphasising more focus on the ‘after sale’ of the customer journey. Doing our best to help the user complete their physical goal (boarding a coach) will truly improve customer experience. Hence also reducing contact rates with our customer service as a result.
My Process
I started off by carrying out a designaudit of the current live product, focusing on:
Heuristics evaluation
Sorting all information available on the page into relevant groups
Comparing this to our other products which are closely linked in the flow: booking engine confirmation page & print e-ticket
NX live products (as of late 2020) — confirmation email, e-ticket, BE confirmation page
→ Later on in the design process, I’ve revisited this information and implemented card sorting with both our users & stakeholders to better understand what information is most significant and how it is used, so that we can group & order in the best way possible.
User Research
🔍 To get some userfeedback, I’ve put our live booking flow through User Testing. Showing users the confirmation email after completing the booking process. I observed how they interacted with our product and asked users for their honest opinion. Here’s what I found out:
Information Overlap — Some found our email confirmation & e-ticket hold very similar information, they weren’t sure of each products’ unique purpose. Few claimed they would show the driver the email rather than the ticket!
Not readable — Majority found the font size too small to read, realising it wasn’t built for their device (mobile)
Dated design — Users found it visually unappealing. Although this is not the most important problem, it creates a good opportunity to align the product to our current style guide.
🔍 Speaking to our coach station team to find out more about user behaviour, key points to note were:
A lot of customers print out their confirmation emails to board the coach, rather than the ticket itself
Some drivers don’t use the QRcode scanner to board customers
🔍 I’ve also accessed our contact centre’s top FAQs which is divisive by calls and digital. I believe it is useful to note what users are getting stuck with so that we can see how we can best address it with our designs.
Stakeholder Interview
🔍 Met with my PO to discuss the current user journey, presented my findings on how users interacted with this product and the pain points involved. Going on to decide on what needed to stay, what needed to go and what we are open to testing.
We decided on:
Keeping the informationoverlap (of the email confirmation & e-ticket) for now, as a transition phase for our users to get used to our revised design and processes. Because we serve such a bigpoolof users we cannot afford to alienate specific groups.
The design would be released in phases, with phase 1 being the major transition into the new style.
Usability Testing
I’ve gone through a few rounds of testing with this prototype, achieving valuable feedback after every round. Also being asked to add in a few elements that weren’t in the original design through the business reacting to the pandemic.
Iterations
Live to V1 —With this first design, I’ve simply implemented my learnings from the user research and stakeholder interviews carried out previously. Using the style guide to start off the elements and existing designs of the confirmation page within the booking engine, along with our new print ticket design which was soon to be released as a starting point.
V1 to V2 — Taking usability testing feedback from V1 and speaking to the team, I’ve exposed the attached ticket twice on the page with the goal for the user to click and view it. Getting rid of the clunky graphics about luggage as it was distracting users and relocating it to the Important Information section where all links to further info can be found. Adding My Accounts product to allow users to manage their details.
V2 to V4 — I’ve experimented on how more complicated journeys would look like. Added the add-onsdetails section to assist users who opt-in to buying our ancillary products. Took out FB & Google sign in as a discussion with developers led to deciding it wasn’t worth the cause.
V4 to V6 (final prototype) — Continuous refinement from user feedback and with consideration to business goals, I’ve added back coach tracker to help users with valuable information. Expanded some more categories to be found in the Important Information section, with consideration to FAQs.
NX Confirmation Email — 6 Iterations of the prototype
➡️ Click here to see Figma file of iterations in detail
The Solution
Key Features
👯♂️ Easy access to e-ticket — double exposure on top banner & attachment
🎟 Ticket summary — this groups key information that users need to pre-journey in one place
🧾 Receipt — price breakdown of all costs that adds up to final amount paid, including method of payment
👾 QR code — for driver use when boarding [a bit controversial, but we decided to keep it on the email because a lot of our users still print or show their email to drivers]
🆘 Help — includes phone number, email, link to FAQs and help page
Secondary Features
🛒 Add-on details — if bought, details about add-ons will be available to aid with usage
🦠 Covid-19 advice — guidelines on rules and what to expect, with links for further info if required
🙎🏽♂️ My account — links to register an account with NX, offering incentives
🌐 Addition details — has a section of its own with more detailed information provided through links to pages from the company’s website
#AD Features
[ie. sections I did not want to include because I believe it has no use on this specific product, but I had to include it because the business wants it there]
🤑 Cashback scheme
🏖 NX holidays
My Prototype ⬇️
➡️ Click here to scroll through my prototype (or book a ticket with NX and see it live!😉)
NX Confirmation Email — new prototype design
Control vs NEW: side-by-side
Links here again, to the old design & the new interactive prototype:
⏳ Control
Control vs NEW
Control
NEW
Learnings
My biggest takeaway from this project was the decision making process when it comes to Information Architecture. The approach I took here was highly collaborative, speaking to different POs of the different products featured on the page and constructively deciding what would be best for the Email Confirmation was crucial, with consideration to the users first.
I’ve also learnt that not everything needed to be ‘streamlined’ to work well. Cutting out excess information is key, however, completely minimalising information everywhere doesn’t always result in the easiest to use product.
