Easy checkout funnel and modern website that stands out among competitors, and brings in more money
Year
2021
Overview
As Covid-19 hit the entire travel industry, international driving permit agencies also found their places to be shaky. The market was already saturated with small businesses with similar services, and even one competitor implemented similar-looking website with the client’s. With this external threats, the client wanted to make a breakthrough on their conversion rate.
Client
International Drivers Association is an agency that issues international driving permits (IDP), which is a translated document of driver’s license and a requirement to drive and rent a car abroad.
My role
I was hired as a sole designer for a project of reskinning and restructuring for the entire website. I worked with a manager, a developer, and a UX researcher dedicated to user testing.
The Problem
“The conversion rate seems to have already reached its highest point. We need a shiny new face for our brand to stand out among competitors. Especially focus on the optimal user flow for our checkout process. The experience needs to be delightful.”
— Client
The Process
Restructuring checkout flow
To better understand the user journey during checkout, I looked at user data using Amplitude to set up some assumptions on what makes users leave during the checkout.
The order of steps seemed logical already, and some of the issues were purely technical. As a UX designer, I wanted to try and test out a completely new flow. My principals for the new flow were:
Easy steps: Break down one long step into several steps, so that users don’t feel stressed (i.e. Driver’s details)
Place “sour” steps later: So that users have invested much effort already, making it harder to leave (i.e. high shipping cost)
Make users ready: Remind users to bring their driver’s license, and add useful information to fill in the forms (i.e. driving license class)
Here is my initial wireframes for the new checkout flow:
00 Intro
I put “Intro” step first, which asks users if they have a valid driver’s license and shows all the steps and requirements to complete the order. This was to prevent users from dropping out when they realise they need to check their driver’s license to fill in the form.
01 Driver’s details
As many user testings showed, long forms seemed to play a part in dropout rate. I broke it down into three steps by grouping relevant fields together - hoping it would feel easier to complete. I also weeded out unnecessary fields and merged the same fields to sanitise the step.
02 Upload photos (Selfie, license photos, signature)
This step was originally placed after the payment wall, but for the new design I wanted to try putting it earlier - so that users invest more effort in the first few steps. As some users will not be ready with all their photos they can skip the step and come back later.
03 Choose plan (+Delivery details)
After filling the forms and uploading photos, users get to choose their plan and provide delivery details. In the original flow users picked delivery method a bit more earlier, but I intentionally put this after ‘Upload photos’ step, hoping users leave less after seeing high shipping cost.
04 Review
This is a new step where users review their details and make in-line edits. I added this to increase usability of the whole process, as there are pretty many details that needs to be exactly correct for issuing the driving permit. Users will also see a preview of their permit here.
05 Payment
No special UX tweak was made on this step, except for adding more payment methods and upsell plans. I had a concern that putting a payment wall further back could harm conversion rate, but the team agreed on trying out on a new flow.
Content audit
For other parts of the website, I collected pain-points and unsolved questions from users that could possibly effect conversion rate. The team listed up additional functionalities that were mentioned by user tests to improve the website experience.
Listening to users
What’s working well:
Trustworthiness: Government-like look, user reviews on homepage
Useful and relevant information: Travel restrictions, driving guides
Smooth form-filling: Auto-fills, dropdown search functionality, fast performance, etc.
What’s to be improved:
Unsolved questions: Can I get my IDP issued on this website? How long does it take to get my Printed IDP delivered? Is the price USD or CAD? …
Long scrolls: On many pages, users had to scroll a lot to find the information they want. This was intentionally designed for SEO purposes, but it was harming user experience especially on mobile.
Inconsistent format: The website has many pages that are country-specific, and they were not based on templates. Some users pointed out this and said it doesn’t look professional enough.
Reconstructing homepage
For homepage redesign, I carefully mixed the essential information I should not omit and the new sections. I put the most relevant section first, and tried out different orders of sections. Some new sections were added to answer frequent user questions upfront:
Interactive quiz (“Do I need an IDP?”): Based on where you got your license issued from and where you are traveling to, the quiz box will tell you if you need IDP, and if you could get it done on the website.
3 things you need while driving abroad: By listing the requirement clearly, it will give a peace of mind to users who are not used to driving abroad.
New functionalities & pages
Through the rounds of SWOT analysis meetings, the team decided to add helpful functionalities and information for better experience in general.
For better usability:
My Order page: The original website had two similar pages — Verify IDP and Self Portal. I suggested to merge the two into one, where the action of viewing order progress and checking the validity of their IDP are streamlined.
Photo editor: We decided to add a photo editor during the checkout process, so that users don’t have to leave their website to optimise photos. They can crop, rotate, zoom in/out the pictures and remove backgrounds.
Marketing purposes:
Review page: The original website presented reviews from Trustpilot only, but the team wanted to present reviews they receive directly from customers with photos and videos. We further decided to have review submission features on the website.
Embassy directory: Mainly for SEO purpose, these pages will present the list of embassies in each country with details such as address, opening hours, and how to book an appointment.
Coupon page: This page lists up upcoming, current and past coupons, telling users that the website does a frequent promotion.
My order page
Photo editor
Review page
Navigation and website structure
As some pages are to be added, I tried restructuring the navbar menus to make it more scalable. I used 2-level menus by grouping relevant menus together to display more number of menus. Inconsistent menu items for desktop and mobile were fixed as well.
Adding UI style
After wireframing for main pages are done, I moved to adding colors and styles to them, and to creating a design system for faster workflow for other remaining pages.
Exploring the look
Based on client’s request and the purpose that the website should serve, I came up with the set of principles for UI style:
Trustworthy & Professional: Users should be confident enough that the website is “official’ enough, in order to give the necessary personal information. If anything looks sketchy it would turn some users away.
Pleasant: Ordering a driving permit is a chore. If this mundane job could be done in a more exciting and smooth way, that would make us stand among competitors.
Clean: Too much fun colors and visual assets could distract users from important information and does not fit the website’s purpose.
I made a few sets of mockups and user tests were made to decide on the style:
For color, the team decided to go with the new neon blue and the existing yellow. For typeface, I chose Inter for body text as it looks ‘official’ and is widely used, and for headings I chose Graphik as it’s not too casual but still fun. The website is to be translated into 10+ different languages, so the support for other languages were also taken into account.
It was tricky to decide on the UI style as user’s feedbacks vary at a big scale, but I tried to stick to what me and my team are happy about. If 7-8 users out of 10 said they like the blue, then I treated it as a ‘Go.’
Design system
Before I proceed to other pages, I took 2 days to create a design library based on the mockups of checkout and homepage screens. I used Tailwind UI to quickly grab components and adjust to fit our styles.
Looking back, as it was my first time creating a full-scale design library alone, I did many things wrong. I focused too much on having “only-needed” components on the file not to make it heavy. But at the end, this made me add more and more components every time I need new components. Also, I made a mistake on not having linked typo system for desktop and mobile, and this made me and developer to spend a lot of time to implement several pages.
Support through launch
After the design for certain pages are done, I handed my design over to the developers, and tested along the way on the staging links.
Developer handover
I made annotations on the Figma file mainly on how the components should behave and what happens when user tap/click on something. When needed, I made a flow chart to have a clear blueprint for implementation. The developers I worked with asked me for clarifications if anything’s unclear, and sometimes suggested me better UX solution — this all went through ad-hoc meetings along the way.
UX/UI Testing
To make sure that things are laid out and working as I planned, I ran a UX/UI testing on staging links and listed up improvement points on Figma. Things I covered was: minor style/layout change, component behavior, copy improvements.
Up-sell & cross-sell
The team frequently discussed about how to boost the sales up, and I explored different ways to offer users our up-sell or cross-sell deals. Take Express Order for example: originally this add-on appeared only once at Shipping step, but it could also appear one more time afterward, even after the Payment wall. Giving it a time-constraint with a countdown timer will also give users some sense of urgency.
Express Order
Upsell on Payment step and after payment wall
Lifetime Deal
Upsell right after payment wall (pop-up vs. full-screen)
Travel accessories
Cross-sell during checkout
The Result
I felt nervous for the result when the website was finally launched, but thankfully the result was great. After 2 month of the new design implementation, conversion rate was increased by 30% and sales by 10%.
Retro-spective
I confess that I made the front-end developer’s job harder by not having the font system knowledge. I tried my best to build an effective design system, but I made a mistake not using H1-H6 structure and having the same font size set for both desktop and mobile. Now I fully understand why it’s a must and how to actually do it right.
That's it! Thanks.
© 2023 Made by Yaesul