UI Challenge 002: Credit Card Checkout
My second UI challenge came in the form of designing a credit card checkout form or page.
Key elements I needed to keep in mind when designing were the important elements many people can forget such as card numbers, card dates, security numbers, etc.
After thinking about what I did for one of my first projects in my General Assembly UXDI bootcamp – redesigning an e-Commerce site for Powell’s Books in Portland, Oregon – one of my favorite brands immediately popped into my head for this challenge: IKEA!
As much as I love IKEA, their checkout process (as well as the ability to figure out what is actually in stock for delivery or pick-up) can be a massive pain in the ass.
So I decided rather than designing a completely new UI idea (why reinvent the wheel and further confuse the user?) I would tackle IKEA’s shopping bag and checkout flow with an updated solution, improving the already existing UI, while also modernizing the flow.
As an avid IKEA customer – and brand lover – who has used the online shopping feature more times than I can count since moving to Orlando, I am very familiar with the less than stellar process you have to go through to purchase and receive product. So let’s break it down within their current flow shall we?
My mission: To create a credit card checkout form or page. It was key that I not forget the important elements such as the numbers, dates, security numbers, etc.
My “client”: IKEA
Business goal: To decrease frustration and cart abandonment
My solution: To create a checkout flow that would provide users with a more streamlined, transparent and straightforward experience leaving little to no room for error or confusion
The product page
In general there isn’t much to complain about in regards to product pages across IKEA’s site. But there is room for improvement, particularly when it comes to indicating which products are actually in stock for pick-up or delivery. Some of the key items I noticed right away were:
If a product comes in more than one color it’s displayed across multiple pages – vs being condensed into one product page
It’s great to see a handful of high quality images so a user knows exactly what they are getting – but when those images take up valuable real estate, making it difficult to see additional product information, they aren’t serving the user as best as they could
The big one: Even if a product indicates that it’s in stock for either delivery or pick up that could change once you add the item to your cart
My solution
To alleviate some of the issues identified above:
Reorganizing product images: Most users do not have the patience to do a long scroll on a page just to see more images of a product, give them a big image and the option to view and expand others
Providing product color options: If a product comes in more than one color, making the user search for the other color is counterproductive. Adding color indicator icons/buttons for users to choose from keeps them on the product page longer and streamlines the add to bag task
Adding a brief product description: Similarly to the original images, users can easily lose patience if they need to long scroll to learn more about a product. A short description at the top of the page will give them the feedback they need to know if the product is right for them
Including important stock annotations: If a product is in stock (or has low stock) AND has the ability to be delivered to a user’s home let them know this right on the product page. If it’s available they can add it to their wishlist, rather than experiencing the disappointment (and inevitable irritation) of finding that out after (successfully) adding the item to their bag
The shopping cart page
Once you’ve adding your item to your shopping cart the UI is fairly straight forward and industry standard. Except for one (easy to miss) thing…
The ellipsis menu at the top right section of the shopping bag: A menu that is poorly indicated, therefore making it very easy to miss. The funny thing is, this menu is actually important because it allows the user to add an item to their cart, add items to their wishlist, empty their shopping bag completely and share the item
The location of inputting a discount code: When doing a short competitive and comparative analysis, across shopping cart pages on Target, Revolve, and H&M, I noticed that most retailers include their discount code field above the order summary. This makes sense due to the fact that a user wants to see what their total is after they apply a discount – therefore having this field below a checkout button makes it easier for users to miss (and therefore lose a potential discount)
My solution
To make the features that were difficult for users to find, and potentially miss, on the existing shopping bag page more intuitive I integrated the following quick tweaks:
Adding a shopping bag total item indicator: Yes, users can easily see how many items they have in their bag, but what if they have enough items that it requires them to scroll to find that out? Adding a total item number indictor next to the “Shopping bag” headline quickly solves this
Adding location based delivery costs to the order summary: If a location has been entered, and an item is available to be delivered to that location, the delivery cost should be indicated with the order summary as soon as the zip code is entered
Taking the ability to edit, save and remove products outside of the ellipsis menu: Do away with the ellipsis menu! By removing this (very hard to see) menu and integrating its options within the product information field, users can feel validated that they are making the correct purchase, and can confidently move on to the next step of checking out
Moving the “use a discount code” field: As I mentioned above, this field should be listed before the order total. It makes more sense within a flow of basic arithmetic. You add the item costs together into a subtotal, apply any discounts, add a delivery cost and you have your total
The checkout process: “How would you like to receive your order?”
This is the part of the flow that most users complain about when it comes to purchasing an IKEA product (although users continue to deal with it because they love IKEA).
When you are on a product page it may indicate (via labels and a green "light”) that an item is available to be shipped to the user, and/or picked up in a local warehouse.
But once a user arrives on the checkout page (screenshot below) and enters in their zip code, if it’s not already indicated, they can easily be hit with a message that their items are actually not available to be shipped.
Fun fact: This shipping availability is actually based on the availability of the shipping center/warehouse closest to the user, not the availability in their local warehouse.
The almost crazy additional layer to this is IKEA will still let users add the item to their shopping bag even if it’s not actually available to be shipped! And users won’t learn about this discrepancy until they go to the step after adding to item to their bag within the flow.
A couple of other UX/UI items I noticed could use improvement included:
The fact that the edit button in the “Your order” frame doesn’t let the user edit their order on the same screen – they are taken back to the previous (Shopping bag) screen within the flow
The “Your order” total does not update to include tax even after a user has inputted their zip code for delivery
My solution
Similarly to the previous screen, I noticed there were a couple of simple UI tweaks that could be made to improve the UX experience of the checkout flow:
Adding the ability to “continue shopping”: One big thing I noticed throughout the entire flow is that there is no clear indication of how a user can change their mind about checking out and going back to continue to shop. A simple solution is to add a “continue shopping” button at the top of the page
Separating the “Your order” frame more from the checkout flow: Although there is nothing wrong with the way IKEA currently displays the “Your order” frame, putting it within an outlined box freshens up the page a bit and provides more clarity that it is a separate frame from the checkout fields
Providing more transparent buttons to edit cart items: As I mentioned, currently the only way to edit your cart is by taking the user back to the shopping bag page. This is counterproductive as IKEA should want to be moving the user through the checkout flow – not interrupting it. By placing the edit cart button below the item quantity and making this button open an overlay menu the user is kept on the checkout page. Additionally adding an icon button to remove an item from the bag makes it more intuitive and provides less room from an accidental user error (e.g. deleting an item they didn’t mean to delete)
Adding article number information: Now this information may not be completely necessary but there are times when a user needs to know this information, particularly if they need to call customer service for assistance with their checkout. It’s a way to provide more transparency into what a user is purchasing
Adding delivery cost to the total: It’s beyond me why IKEA consistently misses adding tax and delivery cost information to a total for an order – or it’s done in a very odd sequence. If these two items are added as soon as a zip code is entered (all the way back on the product page), any confusion relating to order cost is alleviated
The checkout process: “Where should we send your order?”
The section within the flow of “Where should we send your order” was actually where I had the least amount of complaints to both the UX flow and UI.
In general, IKEA does a good job allowing users to input their shipping information, which is partially already populated from the zip code they entered within the previous delivery step.
The only qualms I have are that, even though a zip code has been entered and delivery and tax information has been indicated within the total cost under “Your order”, there is a UX writing error that states the total “excludes tax” – which is incorrect.
Additionally the UX writing is a little funky underneath the address fields indicating a user can “add a billing address”. To streamline things a bit it would make more sense to let users indicate if their billing address is the same as the shipping address – if not, new fields would populate accordingly.
My solution
Small, subtle changes can make all the difference when it comes to getting a user through a checkout flow quickly and seamlessly:
Adding an edit location button: Currently users have to go back to the previous “How would you like to receive your order” field in order to change their location information. It makes sense because this is tied to warehouse locations, but also doesn’t make sense when it’s not included in a frame where users are entering their delivery address. If a user is entering their delivery address they should have the ability to change their location within this step as well
Updating the UX writing under the address fields: To cut down on the amount of fields displayed within this frame – which could overwhelm a user – a simple “my billing address is the same as delivery” checkbox option would be an easy fix
Editing the tax total information within the “Your order” frame: Again in the current flow tax is excluded from the order total, even though the location has been entered. Tax cost should always be indicated within the order total as soon as a user enters their zip code within the flow
The checkout process: “How would you like to pay?”
The final step in the process before a user checks out and receives an order confirmation is they choose the method of how they would like to pay.
I previously had a conversation with Todd Kelly, the Director of UX and Product Design at IKEA US, regarding the fact that the current UX is to focus on giving the user the option to pay with an IKEA credit card first. The problem with this?
How many people actually have an IKEA credit card? My guess, not many.
My (“safe”) solution
Users want to know their transaction is safe – and receive feedback to this via the lock icon within the navigation bar at the top of webpages. So, is it necessary for the Norton logo to take up so much real estate? My thought was no, so I’ve made it smaller and right justified it at the top of this section
Users do have the option to redeem a gift card but the linked text button is so small (and in the same font as all of the other information) it’s easy to miss. By moving the Norton logo and bolding the gift card font users are able to more clearly see where to redeem their gift card when paying for their order
As I mentioned below, not many users are going to have (or use) an IKEA credit card, so this payment option has been to reordered to display as the last payment option
Because the icons for the various payment options are currently very small IKEA is cultivating a big accessibility issue. At their current size not every user is going to be able to easily read which payment option they are choosing – to alleviate this I made the icons about 8x bigger
To decrease any potential confusion as to which payment method has been chosen I shifted the location of the payment fields to appear under the icon for the chosen payment method once the radio button has been selected
My (“next level”) solution
My thoughts with the payment section of the flow was to approach the solution from two angles.
The first, which I’ve indicated above, is a more “on brand” solution that fits into IKEA’s current design system – aside from a handful of minor adjustments to take accessibility into consideration.
For this solution I decided to “modernize” the flow a bit to compete with the current flows across many major retailers, by aligning all of the payment icon buttons in a row beneath the section header. This not only makes them easier to see but also increases the ability for users to locate the button to redeem any gift cards
And there you have it! My updated UX/UI solution for IKEA’s checkout flow – from product page to payment frame.
Let me know in the comments if this flow would decrease any annoyance or confusion you currently experience (because I know I do) when trying to buy a simple glass or toilet bowl cleaner on IKEA’s site!