UX suggestions to IKEA's payment page

IKEA <3

So I have recently moved from apartments. Now that both my husband and I are working from home, and we adopted a dog, we needed extra space to accommodate our daily routine. We found a 2-bedroom apartment at the same street that we are currently living (which is great, we love this neighbourhood), and needed some extra furniture for the second bedroom, plus some other minor stuff for other rooms. We went to the mother of all honest people who want to save some money and get good-quality furniture: IKEA.

Due to the pandemic and the recent lifting of social distancing restrictions, we didn't feel safe going in-person to the store, so we decided to shop online for the first time. The overall experience was good - I love that IKEA includes many valuable information about sizes, weight, and assembly instructions for every item. However, when it was time to finalize the purchase on the website, I saw some things that I would love to suggest to IKEA's design team.

This is how IKEA's payment page is as of March 18th, 2022:

It's clean, elegant, straightforward. But I think I can improve it somehow. See below my version and explanations:

1) Progressive trackers to encourage users: progressive trackers are great to guide users on how many steps are required to complete an action. With only four steps, the user is encouraged to finalize the purchase and know exactly how the road ahead looks like, decresing anxiety. It's important to highlight the steps taken and the current step, as well as label each step to confirm what kind of action is expected in a given step to improve scannablity.

2) Visible labels: IKEA labels its inputs with placeholders only, and even though it offers a "cleaner” interface, it is not accessible if we think that it is better to offer a confirmation of which information is required in a given field.

3) Input masks to prevent errors: input masks show the format of the information required in a given form. In this case, it is important to confirm what number is being asked and the spaces in between the number chunks, so that the user will be able to follow along with their credit card, preventing errors and frustration.

4) Clearly indicate active state: the current version of IKEA's website already does that, but I propose that the outline stroke be a little bit ticker and darker to increase accessiblity and provide a better feedback.

5) Clearly indicate required inputs: indicating required fields with an asterisk is a convention that decreases errors and cognitive load for the user. Even though it is not a rule, I added the red color to make sure that the user will pay attention to this detail.

6) Place related inputs closely: there's absolute no need to use an entire line for the credit card's security code, when it is a common design pattern to place it right after the expiration date. Both fields require fixed short numbers, so placing them closely will decrease cognitive load.

7) Use descriptive button: before finalizing the purchase, it's important to give the users one last time to review and confirm the items in the cart.

I also decreased the number of steps required to complete the purchase, since steps 1 and 2 are all about delivery information, so I suggest that they are combined in one single step - I'd love to have access to the research that lead IKEA's product design to decide to separate them to understand their reasons.

So, what do you think? Any feedback is welcomed! =)

Tools: Figma.

Images: Unsplash.com , ikea.ca