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:

• Creating a fictitious company and using it to practice our UI skills (typography, layout, color, etc.), but not necessarily experiencing real user problems/experience. This is a good approach if you really want to hone those technical skills!
• Inventing a fictitious company but rethinking the whole user experience by looking at it from a totally fresh perspective. This approach potentially takes longer if it includes extensive research.
• Using an example from a real company, highlighting the problems one experiences as a user and proposing alternatives to improve it.

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…

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:

• Low visibility of the total amount

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.

• Options to manage my credit card information for future use

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!).

• Unclear error messages

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:

• Incorrect credit-card number – this currently leads me to a generic “unmatched entries” message, which shows up at the top of the page. However, I can definitely see the point of not referring to a particular entry for security purposes.
• Missing field (g. cardholder name, cardholder number or expiry date) – shows the same error message as above. This is less helpful and probably not relevant.
• Missing security-code field – if this field is left empty, the system empties all fields on the page (I presume this is for security purposes).The error message underneath this specific field then reads “Please enter the security code”. The fact that I have to enter every detail again makes the error message sound irrelevant.

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:

• Having the holder’s name can help to preventsome types of offline card fraud (for example, when the same card number is used but with different names)
• Some card issuers like Visa and Mastercard (but not Amex) do not require the cardholder’s name to be displayed for online transactions. If they do, it’s primarily to compare it with the name and billing address they have on record, otherwise the transaction will be declined.

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:

• The use of a placeholder to provide guidance in respect of the information requested (g. the number of digits, whether spacing is required or not, the date format, etc.).
• Scan-the-card function to populate the different fields, thereby saving time when entering information.
• An inline helper (“?”) in the security code rather than an image, since it requires additional explanation of the code placement.
• Highlightingactive fields in orange when typing.
• Masked security code instead of card number, to provide a greater sense of security since the card number alone doesn’t do much.Furthermore, as a user, I would want to review the card number again as it’s more prone to being inputted incorrectly.
• Card type to be highlighted once the first four digits are entered.

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:

• Mismatch data – an error message at the top with no specific fields mentioned would add an extra level of security.

• Missing information – an error message could appear underneath the specific field. A highlight would be helpful as well. However, I would retain the idea of clearing all the input fields if the security code is missing (I have learned that this solution is commonly used to prevent fraud).

• Incorrect information – this could apply to any invalid data entered (e. incorrect date format, missing digits in card number, etc.). The error message could appear underneath the specific field.

• System error – either a remote server error or an error caused by the credit card (for example, expired card).

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!