Approach

I started by determining the goals, opportunities, and constraints for both the user and the organization. 

The organization wants the user to complete the transaction–which means they first must correct the payment error.  The stakes are high here, since too much friction at this stage in the user flow may lose them a sale.  The opportunity, should this issue resolve smoothly, is a happy customer that becomes a repeat customer.

For the user, we know that they want–quickly–to resolve the issue and be done with the whole process (no one typically ENJOYS the process of reserving a car).  That being said, the successful resolution may result in positive feelings and looking forward to a vacation–or at least relief that they can check it off their to-do list.  If they have a great experience renting the vehicle–despite encountering the error message–they are likely to reuse the application and recommend it to others.          

Next, I used Torrey Podmajersky’s conversational design exercise, which involves mapping out the user journey from intention to desired result, and role-playing the dialogue between user and application.

Rationale

*While designing this screen in Figma (after writing content inside a rough wireframe), I realized that the prompt was probably asking for a “detour” (pop-up) error message.  I chose to use an inline error message (more on that below), requiring me to design the entire form to demonstrate, which ended up being great practice.  I didn’t re-do the challenge because I still felt that inline is the best choice in this situation.  Therefore, my character counts don’t match those stated in the constraints section…

Titles

I labeled the screen with a main title “Checkout,” (to orient the user on where they are), and then used breadcrumb-style subtitles to tell them which step of the checkout process they are in.  This is also helpful if the user needs to go back a step and change something.  

Form

I chose to use a very simple and clean form layout to minimize distractions and keep the process efficient, featuring empty states with helpful visual cues and small labels–”Card Number,” “Expiration,” and “SEC Code”--to aid the user.  The gray empty states are outlined in black, except for when an error occurs (more on that below).  

Below, a large, high-contrast button reads “Pay $236,” rather than just “Pay” or “Submit Payment.”  This additional specificity helps the user feel secure at a high-friction point in the process, confirming the exact amount they are being charged, and the size and prominence of the button eliminates ambiguity.

Finally, the last section offers alternate forms of payment, so the user can change their mind without having to navigate to a different screen.   

Error Message

As I mentioned above, I chose to use an inline error message–in which the problem is indicated within the current screen, and the user cannot move forward in the flow until the error is corrected.  Inline messages tend to be the most efficient and least disruptive of any type of error message, allowing the user to quickly correct the problem, therefore mitigating frustration and confusion–which felt appropriate for this particular challenge.  

The error message appears as a red bar across the screen.  Along with a “!” icon, the text reads, “Card Expired.”  Note: I chose to avoid the words “invalid” or “valid” because they are emotionally-charged, perceived as blaming, and can be considered ableist.  Initially I wrote longer, more instructive text: “Card Expired:  Update card information and try again” (and other variations), but ultimately decided that it was unnecessary–or misleading, if they had actually just typed the date in wrong (something I’ve done many times).  This way, if the user sees the shorter message, and immediately checks the expiration date (outlined in red to guide them to the problem), they will see that, A, they mis-typed it (and correct the mistake) or, B, that their card is actually expired–in which case it becomes obvious that they need to enter a different card (or change their payment method using one of the icons below).

Side-note: the Payment button, when clicked, activates the error message until the problem is corrected, and the user is able (at any time) to select a different payment method at the bottom of the screen, if more convenient than entering new card info.    

Takeaways/Analysis

I found it difficult to approach this challenge without more background about the user.  Are they standing in a busy airport, or in the comfort of their own home?  Are they going on a business trip, a vacation, or to their hometown to attend a funeral?  Are they in a hurry, or carefully searching for the best deal?  Do they have their wallet with them, or are they stranded in a foreign country after having their wallet stolen?  In the absence of knowing, I had to design the content carefully and with utmost empathy for whatever the user may be dealing with.