Day 4: Credit Card Payment

Before I begin the writing about this day’s exercise, I’m going to write about the formatting of these entries. Previously, I wrote in a chronological manner, starting with my references, moving onto my sketches and ending with the finished product. It made sense from a storytelling perspective. However, this caused the thumbnail of the article to be of my references and I thought it was misleading and unfair to the designers who created them, even though I would credit them.

This time, I’m starting from the finished exercise to ensure that the thumbnail is accurate. It’s standard practice when creating a portfolio or demo reel to put your best work first, even though this is neither of those things.


While all the references I looked up online had many of the same key components, there were still key differences that affected how the design is perceived. A lot of examples I saw went for a sort of modern skeuomorphic design that imitated the form of a credit card with a flat aesthetic. A good many even imitated the two sided nature of a credit card, requiring the user to move between two different windows to be able to input all information.

While strict skeuomorphism had its place and certainly can still be useful in some cases, I believe that we can comfortably move past it for inputting credit card information.

In working on this exercise, I tried to use the best practices I learned from this article by Nick Babich.

I started off sketching trying to design it for mobile, meaning making the orientation vertical. I thought about the horizontal designs that some people did but thought it lacked context.

In my mind, a horizontal orientation was more suited for desktop but often the design had the minimal amount of detail needed for the form without any more information about what the form was for. And anyway, I wanted to do as many of these exercises with mobile in mind since it’s the the mobile scene is very hot right now.

I did play around with the option of having different credit cards on top or even including a Paypal option. In the end, I didn’t include those because 1.) this is a credit card information design, not a online payment design and 2.) I had asked my boyfriend, who is a developer, about why some forms had an option to choose which type of credit card and some had not. He explained that these days most systems will recognize the type of credit card by the card number and that it’s actually more secure to do it that way since it would eliminate user error.

Since UX/UI work will involve a lot of collaboration with developers, I thought it would be a good idea to include his input.

This is the first iteration of the exercise and I’ll be honest: I hate it. I was ambivalent about it pretty much since I started and when I was finished I realized I couldn’t let this be my finished result.

I really dislike my choice of fonts. Other than my customary Gotham, I went with DIN, which I thought replicated the look of the type on credit cards, which honestly, is not a good reason.

I thought it looked too much like Day 1, but worst. The photo felt too obviously like a distraction from the poor design choices and made reading certain parts difficult. I tried to add some context with the “Total: $39.99”, but it feels ham-fisted.

I didn’t know how to save this design so I decided to go back to step 1, do more research and think more about how I wanted to go about this. I won’t re-list the steps here since I actually folded the cycles together.

I’m including the final design back down here to make it easy to refer back to it. This time, I tried not to be married to the mobile format and went with, as I envisioned, a popup on a webpage with the payment page as one step in a purchase.

I also included a checkbox for billing address, which I didn’t really see on any other design, but was something that my boyfriend asked if I needed. Thinking about how to add more fields for an address was not something I thought was really in the scope of this exercise, but including this question seemed to be simple enough.

I’ve read a lot lately about button design and the need to include affordances. A few of the forms I referenced above simply use text and an arrow, which isn’t enough. I tried to be cognizant of this, but if anything, I ought to have included a bit more, such as a light drop shadow. I also neglected to make the “CVV (?)” appear clickable by underlining it.

This day’s exercise was definitely more challenging because I really disliked my first iteration. Going forward, I really need to spend more time developing drafts and sketching, particularly higher fidelity sketches that would better bridge the gap between stages.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.