Optimize checkout flow of government procurement e-commerce
GLASS is a software ecosystem powering governments using artificial intelligence.
1 Chief of Staff
1 Product Designer
BackgroundBy improving public procurement worldwide, GLASS can maximize tax dollars, increase the quality and variety of products and services acquired by governments, and simplify decision-making for public employees.
The current product look and feel can be seen in the video below.
Two weeks to research, redesign, and plan hand-off of e-commerce flow with a goal of increasing page conversion and decreasing bounce rate pre-purchase.
The Approach & Opportunities
I conducted competitive analysis & exploratory research, digging into emerging trends within the procurement industry.
There were several opportunities and low-hanging fruit to focus on:
Form fields inside a box and not as a line
Research shows that when users were prompted with line text fields, in a lot of cases, they didn't know it was an input field because it didn’t look like a traditional input or clickable. In order to improve the scannability and discoverability, I decided to use enclosed text fields with a rectangular shape. Based on a Google research and material design best practices (source), enclosed text fields with a rectangular (box) shape and round corners performed better than those with a line affordance.
Ability to checkout as a guest
Based on the following study by the CXL Institute on "How to Design an Ecommerce Checkout Flow that Converts", one in four customers abandons online purchases due to forced registration. Taking that into consideration, I envisioned the top of the screen prior to the one I created, as having the possibility to check out as a guest (with a dropdown to add essential information), as well as adding a CTA for the users who already have an account to log in or for the ones that don't, to sign up (see image below).
Credit card microanimations
For aesthetic purposes, I created a concept of a micro animation in the credit card section, where it highlights the parts of the card while the user is filling up the form and it populates the credit card company (VISA vs Mastercard) based on the first 3-4 numbers typed in the form.
Cyclical Navigation (Easy way to go back to the basket)
How many times have you started the checkout process and then realized you wanted to buy something else? Making it easy for the customer to buy more items is a great thing for the user and for the business!
Connect users to customer support: one click to email / call / live chat
I wanted to incorporate these three options in the header of the page in order to connect customers with support where they commonly experience issues and keep them on track to finalize their purchase.
Progress bar and numbered steps
A progress indicator identifies the stage of the checkout process you are on, while also outlining the entire step process. This helps customers know where they are in the process, how many more steps are left, and get a general idea of how much longer the process will take. These two initiatives, especially when combined, set expectations, streamline the checkout process, and give a sense of achievement. This keeps customers on track and focused on following through to the end of your conversion funnel and can absolutely increase engagement and prevent cart abandonment.
Possibility to save shipping info and payment method
Saves recurring user's time, since they won't need to type all that information every time they come back!
"Complete Checkout" button inactive until the information is filled
Main CTA in my redesigned screen is unclickable because the user hasn't added card info yet, in the screen that is shared. Once payment info is added, the button becomes blue and that's the clue that the user can finalize the process.
I presented the opportunities, research findings, and redesign to the Chief of Staff and CEO. The final product can be seen here, or in the video below.
This project had one main KPIs for us to track:
Decrease late funnel (checkout page) drop-off by 2%
While user tests performed well and indicated we should implement, the team will measure performance to this metric after there is a statistically significant number of government users (2-4 months).