Daily UI, Day 2
Design a credit card checkout form or page.

***I designed an “attach payment method” screen not a checkout screen but its all good.***
This was one was especially fun! The first UI mock up I ever did was for the payment flow for Owlized’s app, where users could purchase AR/VR tours. It was terrible. Also I’m currently interning for Mastercard. So this prompt was a chance to benchmark myself compared to my first design while incorporating what I’ve been doing outside of design.

The Background
I like food, and I was interested in designing a checkout process with a different user journey than the traditional ecommerce checkout process. So I decided to design for a food delivery app (think UberEATS, Postmates, Caviar, etc).
What is one important difference between the users of an ecommerce website or app from the users of a food delivery app like Postmates? The desired level of immediacy. When I order a bunch of paper from Amazon because I live in a hotel with no car and have no way to go anywhere further than a mile away, the sooner I can get that paper the better. But I’m thinking in terms of days. When I order a burrito at 1:29 AM I want that burrito as soon as possible and I’m thinking in terms of minutes. If the best Postmates could do to get me my late night burrito was 1-day delivery there would be no Postmates.
So how can we minimize the time between me finding the the Carnitas Burrito on the Taco’s Sinoloa menu and me putting said burrito in my belly, without any control over the delivery infrastructure? By removing “adding payment info” from the checkout process and adding it to the onboarding process. Removing this friction will allow users to move from finding the food they want to having that food in their home more quicly, resulting in happier customers.
Before moving onto specific user needs and desires, I also wanted to consider the industry space this app is in. Food delivery is a crowded market that likely is only going to get more crowded, with little differentiation between various services in terms of offerings or prices. This means that a large part of how users decide what app to use is by brand identification. This places pressure on the design to create a strong brand identity through bold interactions and colors. Additionally, if people are getting the same food at similar prices and speeds from app to app, designing an app that it is fun to interact with could not only result in more satisfied users, but more users as the fun interaction provides a reason to use that app rather than other apps.
So with those considerations in mind here are the values I came up with to design around: frictionless-ness (is there a better word for this???),identity, and fun.
User Needs and Wants
Having framed my overall approach to designing within the food delivery space, its time to narrow down to how to design the screen the “attach payment.” Step one was laundry listing wants in the form of “When I do _____, I need/want to _____” and then grouping similar statements to form deeper desires. The goal of this is to mimic the grouping of surface level user wants from research to form deeper desires using my own experiences and best guesses instead of actual user research.
A lot of these wants and desires turned out to be similar to the wants and desires from the “Design a Sign Up Page” from Day 1 of Daily UI as both dealt with potential users at the end of the conversion process who need to fill out text forms. However, attaching a credit card to an account is not entirely the same as signing up for an accont. Here’s a list of everything I could come up with:
- When I enter text into a field, I want to enter it right the first time
- When I have fill out forms on a phone, I want to fill out the minimum number of forms
- When I attach a credit card to an account, I want to be sure that the card is in fact attached
- If I make a mistake filling out a form, I want to know where exactly that mistake is so I can fix it
- Conversely, when I fill out a form correctly I want feedback so that I know that form is correct
- When I am attaching payment methods, I want to be able to attach multiple different payment methods and types of payment methods
- When I am attaching a payment method, its generally because I want to buy something
- Unlike when I’m signing up for an account and I want to be able to put fake information, I want to know that the company I’m giving my credit card info to is legit, so I dont want to be able to get away with incorrect information when attaching a payment method.
With these wants and needs in mind I created 3 user desires to design around in addition to the 3 design values from a business point of view. Here’s what I came up with:
- I desire the ability to enter my payment info as fast as possible. This overlaps with lack of friction.
- I desire effective communication about what I need to fill in, what I have filled in correctly, and about any mistakes I may have made.
- I desire trust, both in the apps ability to safeguard my credit card information and in regards to trusting that when I try to pay for something the supposedly attached method will work.
Here’s how I worked to implement the values of effective communication, trust, identity, and fun, in within a within a fast and friction-less method of attaching payment to an account.
Forms:
I wanted to minimize the typing and clicking people have do to attach their account. This was done by letting the computer fill in the information it can, and opting not to use the Address Verification System (AVS).
Some payment screens ask users to fill in the type of card. This isn’t a field that users should be forced to fill in, as the computer could figure out this information itself.
The AVS is an optional security feature that allows companies to compare the inputted address and zip code of a card and compare that to the bank’s information, and opt to cancel transactions if the information does not match. Based off the design values and user desires of frictionless-ness and speed, I opted to decrease security to expedite the process of adding a payment method.
Here’s what my first attempt looked like:
Hints:

After identifying that communication between the app and the user was important to increase trust and decrease fiction, I largely failed to execute on this ideal on my first attempt. I included two help icons, but these hide the information behind a click and dont provide any feedback that the app recognizes and accepts what you are entering. Going forward to the second draft, this was my main focus for improving.
Aesthetics and Branding:
The goal here was to was to make be bold to create an identity and be fun to improve customer experience. Looking back this was a mistake. Why not be fun, and let that be the identity rather than try to connect two conflicting ideals of boldness and fun. I tried to use bright colors and capital letters to establish an unapologetic brand image. Potentially softening the color palette would help move away from boldness and towards fun.
ROUND NUMERO DOS:
There was a month break between when I first tried this and when I started writing this so I wanted to try to better implement my original goals. Here’s what I came up with:

Also here’s my first try at prototyping motion:

Here’s a quick rundown of what I wanted to do better in this draft:
- Branding: Focus on being bold by being fun not being bold and fun. Through bright colors, bouncy motion, and unconventional forms I wanted to express that this app was fun, quirky, and helpful. This motion didn’t get prototyped, but the credit card visual would flip over when users move from the expiration date to the CSV. The goal of this was to promote a more clear brand image.
- Architecture: The prompt was to make a payment screen and originally I only designed a screen. But screens don’t exist in isolation so I put more thought into how the process of adding a credit card to an account would look. Users would arrive here from either onboarding or their profile page and would either return to their profile or go to the next stage of onboarding after successfully adding their card.
- Communication: Instead of hiding the help behind clicks I included a credit card as visual aid that follows along with you. As users type, the brand of the card would appear, signaling to users that the app accepts what they are doing. Finally, when the payment is added, users get a quick heads up letting them know that they are good to go and ready to order some food.
What I Learned
- Motion is cool. After Effects, so far, is not cool. I am frustrated and confused.
- I shouldn’t be afraid to take inspiration from dribbble, siteinspire, etc. On a previous first drafts I used to rule out doing anything I saw on these sites because it wasn’t original. But the goal isn’t (usually) to be original its to be usable.
- Look for ways to avoid drop down fields. If hamburger menus are classic bad UX, drop down fields are the hamburger menu of fields and forms.
Next steps
Sometimes mockups look good in figma and then seem completely wrong once I open it on my phone. So try to have that happen less. Either get better at after effects or find another software to use. Since there is no user research, I’ve been justifying my decisions with my best judgement. In coming articles I’d like to use quotes, either from books or articles, to justify my thinking and decision making.
