Daily UI Challenge: 002
I'm doing a Daily UI Design Challenge: designing a different screen each weekday for 100 days based on the prompt I receive in my email. Knowing very little about what sorts of prompts I'd receive, I decided to try my best to make all of my screens fit within a fictional travel-planning app, Let's Travel.
I'm also writing about some of my UX considerations along the way.
Day two of the challenge was to design a credit card checkout page. I'm not quite sure what my users will be paying for within my travel-planning app (maybe I'll sell bespoke travel planning services, or a set of silly stickers they can use to comment on their friends' itineraries), but once I figure that out, I guess it makes sense they'll need some way of giving me money.
Here's the payment screen I designed for Let's Travel:
I wanted to keep the page really simple, because text input can be a slow and painful process on mobile screens. Let's Travel is an Android app, so I'm using material design elements; Sketch's built-in Material Design template is really helpful for speeding up my process in that regard. I decided to add icons to each input field, because otherwise the page felt too simple for a design challenge and one of my goals is to stretch both my visual design skills and my experience with Sketch. I do like how they turned out, and I think they differentiate the elements on the page, making it really scannable.
Of course, I had a lot of questions as I worked on this design, some of which I ignored and some that I made up answers to. In addition to the central question of what users would even be paying for (the answer to that one has been left in the hands of "future me"), I also grappled with what the rest of the checkout flow looked like.
In these simplified flows, where rectangles are pages and ovals are user action on the page, I've tried to represent two different checkout extremes. The one on top reflects what we might think of as a more traditional, hard-good e-commerce flow, where I (as my user) start on a PDP, add a product to my cart, go to my cart to confirm the products I'm buying, click "checkout", and give the company my shipping and payment information before confirming my purchase. The second flow is a little more, "monkey see, monkey buy": I see something I want to acquire – possibly some sort of digital object that won't need to be shipped to me – then I click "buy", enter my payment information, and receive an order confirmation.
In either example, the payment information I'll need to collect from my customer is likely the same, but when we think about the broader context in which the user sits, it could have implications about what other information I should put on a payment screen. Should the page have a progress bar ("you are at step 3 of 4")? Should I give the customer a reminder of what they're buying ("items in your cart")?
In fact, is this page even part of a checkout flow, or is it instead a way for me to collect payment information to use for "one-click" checkout actions in the future? If so, maybe it's okay just the way it is.
As I continue to make up the rest of my app, maybe I'll figure out the answers to some of these questions. If I do, I'll try to go back and make changes to this page and post the new version as an update.
