Lean UX By Arushi Tiwari
Brief received Iterate on the current checkout page of Adobe, keeping in mind the needs and wants of an artist (end user).
Framework used Lean UX - Thinking, Creating, Check Time taken - 24 hours (1 day)
Thinking
Persona of artist 1 An artist in his 50s (has a lot of experience with online payments and card payments).
Persona of artist 2 A 18 years old artist (is new to card payments. Has good tech knowledge, but is new to online card payments).
Changes that could be made based on readings and case studies To better understand the current trends and best practices that should be kept in mind while creating an effective checkout page, I have gone through a few articles and case studies by UX designers. After looking at all the content I have been able to come up with 5 elements that could be added to the current checkout page of Adobe. They are mentioned as followers -
I. Mimicking the information hierarchy on credit/debit cards Making the credit/debit card information section of the checkout page resemble and have the same sequence of information, as presented on an actual credit/debit card is believed to be efficient and useful. For example - In a debit/credit card you first see the card number, followed by the expiration date, name of the cardholder, and then at the end, you look at the CVV code. Thus it is believed to be helpful when a checkout page asks the users to provide their card details in the same above mentioned.
As users move through a checkout form, they generally type most information from memory — their email, phone number, etc. The credit card fields, however, are different, as users break their attention from the interface to physically remove their wallet, withdraw their card, and then input the card number, expiration date, and security code seen on the physical card into the appropriate fields in the checkout flow. Hence, within the payment fields, users are switching their attention from the physical credit card to the checkout interface. This has affected how users input their information. Link - https://baymard.com/blog/current-state-of-checkout-ux WHAT WILL BE THE DESIGN CHANGE -
Rearranging the card details in the checkout page by interchanging the “Security Code” section with the “First name” and “Last name” sections.
II. Maintaining the format for adding the expiration dates It is also considered to be useful when card details are expected to be filled by the users in the same format as presented to them on the card itself. This is especially important while putting in the expiration date of the card on the checkout pages. For example - When the expiration date on a checkout page is expected to be filled in the same format as it is presented on the credit/debit card, it prevents the users from slowing down or coming to a halt during the checkout process. Link - https://uxdesign.cc/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb WHAT WILL BE THE DESIGN CHANGE -
The present drop-down menu for entering the expiration date will be replaced with a “MM/YY” type of input section.
III. Incorporating visuals with textual information Providing users with not just written, but also visual cues when entering card details, like the CVV code in a check out page. For example - A user, while filling in his card details on a website is unable to find the CVV code on his card. So they click on the small question mark next to the section labelled as “enter CVV code” on the website. It will be most beneficial if the individual can be provided with not just text, but also visual information telling them about where on the card can one exactly find the CVV code. Humans tend to process visual information faster than purely textual information. The reason for this could be understood by the fact that evolutionarily, humans are visual beings. So when we are presented with text accompanied by visuals, the understanding becomes faster and the cognitive load reduces. Link - https://uxdesign.cc/the-anatomy-of-a-credit-card-payment-form-32ec0e5708bb WHAT WILL BE THE DESIGN CHANGE -
The microcopy that appears after clicking on the “?” button next to the “Security code” will be accompanied by a visual reference of a credit/debit card. Informing the users about where can they look for the security code on the credit/debit card.
IV. Placeholder texts The addition of placeholder texts with proper input and section labels can be beneficial especially in the case of entering card details. Placeholder text provides instructions or an example of the required data format inside form fields that have not yet been edited by the user. Placeholder text is usually displayed with lower colour contrast than text provided by users, and it disappears from form fields when users start entering text. When placeholder texts are accompanied with proper labels in the checkout pages, they can prove to be helpful to the user by providing direction to their actions in a better way. Link - https://www.w3.org/WAI/tutorials/forms/instructions/ WHAT WILL BE THE DESIGN CHANGE -
The input for the card details on the check out page will be accompanied by placeholder texts.
V. Adding a title to the different checkout pages Adding a title on top of a page can help in two ways. It can tell the users where exactly do they stand on the website. It can also be beneficial for individuals using screen readers (a form of assistive technology) by separating the navigation content from the main page content. In the case of Adobe, the checkout process involves 2 pages and even though a user can understand on which page they stand by looking at the small navigation bar on top. It will be more beneficial if appropriate titles are added to the two pages, as well. Link https://ux.stackexchange.com/questions/135275/should-a-web-app-page-title-appear-on-every-page-even-with-the-curre nt-page-hig WHAT WILL BE THE DESIGN CHANGE -
The two check out pages of Adobe will be accompanied by page titles on the top left side of the page.
Create
1 - Page heading 2 - Placeholder text 3 - New expiration date section 4 - Interchanging the placement of “Security code” section and “First name” and “Last name” section.
1 - Page heading
6 - Visual and textual information to tell the users about where they can find their CVV or Security code on the debit/credit card.
New screens