

Given the current remote-working situation as the global COVID-19 pandemic continues, our IX team recently started a fortnightly UI design challenge. Sounds familiar?
We use a site called dailyui.co to come up with a new design topic every two weeks. The rules are simple: rather than spending days or even weeks coming up with new designs, we set a one-day limit on our endeavors and it’s entirely up to us how we choose to approach the topic.
This could mean:
Over the following day or so, we then present our design outcomes. No judging each other’s work; we just share what we’ve come up with…
![]()
The main benefit of this approach is that it gets us into the habit of generating ideas quickly.
It also helps us to avoid the boredom that inevitably accompanies a lockdown like this, so it’s a win-win for all concerned.
I’m now going to outline the step-by-step process I personally used on one of these design challenges:
“Design a credit-card checkout form or page. Don’t forget the important elements, such as numbers, dates, security numbers, etc.” (taken from dailyui.co)
I chose a real company called Zalando, a popular European e-commerce platform that gained 4.6 million new customers in 2019 alone. As a leading online fashion retailer, Zalando allows customers to shop from the comfort of their own home or when they’re out and about via smartphone or tablet. I’m a big fan of Zalando and have been using their mobile app ever since I moved to Germany in 2019.
In order to propose a design alternative, I began by identifying existing problems that I had previously noticed with their credit-card checkout page. These included the following issues:
I have to scroll down the page in order to view the total cost of the goods I’m about to buy. If the aim here is to provide me with a snapshot of the amount that will be deducted from my credit card, I would prefer to keep this element visible at all times.
Currently, once entered, my credit-card details will automatically be stored by default. From my point of view, a request for permission to use these details as a default would be nice, so that I’m aware they’re storing them (imagine if my phone was stolen and I forgot to log out of my account!).
I encountered various error messages when I made small mistakes inputting my details. Unfortunately, I haven’t had a chance to test out every possible eventuality, but I want to highlight the three following problems:
![]()
While working towards solutions to the above problems, I have two goals in mind. The first is to respect the “less is more” principle. In short, less input means faster completion time and reduced bounce rates. The second is to provide a sense of enhanced security as part of the overall experience.
Please also bear in mind that the problems and solutions I’ve identified here are based on my own personal preferences and don’t necessarily represent all users. It would, however, be nice to validate these assumptions sometime in the future.
I questioned if we really need all four fields in this part of the form. Whilst I would consider the card number, expiry date and security code to be absolutely essential on any checkout form, the obligatory requirement to fill in the cardholder’s name puzzled me. After some research (here, here and here), I discovered that:
Okay, so it turns out this information is rather important. I therefore kept all four fields as they are. However, I would improve the use of spacing available on the form.
In addition, since this is the first time I had to enter my card details, I would prefer to remove the “new credit or debit card” heading above the field. This would also help to keep all content visible above the fold.
Further ideas I considered to improve the design were:
I decided to keep the amount visible at all times and remove the details (about delivery fee), since the total amount should include everything the user has to pay. Also, he/she can review the price details in the next confirmation screen before placing the order.
Since the app doesn’t allow checking out as a guest, it would make sense to include a “set as default” checklist option. This means the user won’t be surprised if their credit card information is already displayed when they log in the next time.
Briefly, I looked at the following error types and would suggest handling each error message differently:
I hope you’ve enjoyed reading about the thought process I deployed to tackle this particular design challenge. Please note that I’m not a subject matter expert in the field of online purchasing and these are only my personal opinions. I would love to hear what you think of my ideas and how you’d approach the challenge differently!
As a designer, Tricia is keen to explore new perspectives and to better understand the things that matter the most. Trying out new approaches, asking questions and making mistakes while learning along the way ─ this mindset keeps her growing as a person and as a designer. Everything else is just working hard: mastering new tools, developing as many design solutions as possible, constantly seeking inspiration, etc.
Navigate through our stories by selecting the appropriate tags:
Your selection of stories:
Your Reading List looks a bit empty – feel free to add some stories!
Your personal history and selection of stories. You can share this list via the following link:
Your Reading List looks a bit empty – feel free to add some stories!
Explore beyond your boundaries!
Sorry, but we couldn’t find what you’re looking for. Maybe try one of these stories instead?