The alternative mobile-checkout path of Wearables

"In e-commerce design, the checkout path is one of the most highly scrutinized parts of the user journey. And rightfully so: it directly influences brand perception, propensity for return visits, and an organization’s ability to drive revenue online. With more and more users shopping on smartphones, it’s imperative to design a mobile checkout flow that not only follows the best practices for e-commerce user experience, but is also optimized for the capabilities and constraints of mobile devices."

— Anna Kaley, User Experience Specialist at Nielsen Norman Group

Overview

For the selection process of a digital agency, I was commissioned to design the stage of a purchase process in which the user enters his credit or debit card and performs the payment action. To develop it, I made up myself a fictitious brand of an e-commerce called Wearables.

Wearables is a new online brand of clothing, footwear and modern and functional fashion accessories for a young female audience.

Wearable's mobile-checkout final outcome

Hypothesis

I decided to start by posing the following hypothesis:

I believe that by offering alternatives to ordinary payment, adolescents* that are economically dependent on their parents or legal guardians will obtain the possibility of freely decide which option is best for them when facing the cost of a product in a purchase process.

*Young people between 10 and 11 years old up to 19 years old, according to the World Health Organization (WHO).

Research

Interviewing 5 economically dependent teenagers of their parents or legal guardians, I got the following insights:

"My group of friends and I want to give a friend a birthday present but it is very annoying to have to organize a common pot to buy it in group.”
”I like a shirt that I have seen on offer in an online store but I cannot buy it because my savings are in cash inside my money box. I’m underage and I still do not have a bank account or credit card.

Findings

Breaking down the insights, I detected a couple of problems when formalizing payment in an e-commerce:

  • Not being able to share the bill between more than one person.

  • Not being able to delegate the payment to someone qualified for it.

I decided to focus on this last pain point to develop my proposal.

User Persona

Mariona is the user persona that emerges from my research. She is Albert’s daughter, a 15-year-old girl. She loves clothes and uses Instagram to find inspiration. In the future, she would like to study fashion design.

Photo by Alexis Brown

Albert, the second user persona, is 45 years old and has two children, Pau and Mariona. He is a great dad, he likes to see them grow up and tries to encourage their curiosity by transmitting them values ​​such as effort and perseverance.

Photo by Tiago Felipe Ferreira

Problem Statement

Teenagers economically dependent on their parents or guardians who do not yet have the means to formalize the payment in an e-commerce, need an agile and simple way to delegate the payment of the product they want to a parent or guardian who has the necessary means to do it and that can also supervise it.

Solution

To solve this problem, my proposal is to offer a payment tool that allows another person to request payment of the total bill through a secure link.

Prototype

After schematizing on paper a flow outline and a small repetitive process of testing and iterating in low and medium fidelity wireframes, I have reached the following proposal for Wearables's mobile-checkout website.

Previously, Mariona selects the product she wants (a blouse) and performs the checkout process by selecting the new delegated payment tool, transferring to Albert the final stage of the payment process of the product she wants through a secure link provided by the own system.

Delegated Payment tool.

In the following interactive prototype, I show how Albert, after receiving by email a secure link from Mariona to be able to review the order and make the delegated payment of a blouse he has found on offer; Access the mobile payment route and complete it successfully. In this way, before the online offer runs out, Albert manages to acquire the blouse that Mariona likes and that she had previously left reserved in the shopping cart of the web:

https://tinyurl.com/y3bjh42d

Or if you prefer, then you can watch a recording of the interaction:

User Interface

These are some important design factors that I have taken into account to improve the mobile payment experience:

Even people who have accounts often forget their passwords. Many times, it will be easier for them to check out as a guest, rather than recovering their passwords on a mobile device. Placing guest checkout above the fold and above the options to sign in or create an account,I assign preponderance to this option in the design.
For email-address fields, I use an optimized keyboard for entering email addresses. This keyboard prominently features email-specific characters like “@“ and “.”. It also includes up and down arrows to facilitate quick transitions to the next or previous form field.
I implement an open form field, not a selection list when asking users to enter their state and credit card expiration date. Long dropdown lists are especially difficult for mobile users and while it usually makes sense to reduce the amount of typing that users must do on mobile, a dropdown for a long list is the wrong solution.
I offer optimized payment options for mobile devices. Recognizable third-party checkout options such as Paypal or Apple Pay can be helpful, but too many options can cause choice overload.

Key Learnings

The power of small details. Making this project, I have proven that apparently small elements of the design end up having, overall, great impact in achieving a satisfactory user experience. To design a good buying process you have to pay special attention to details. A good use of UI elements centered on the user and intended for mobile allows the user to have an agile, smooth and pleasant experience.

This UX/UI project has been designed by Adrià Lleó and corresponds to a brief provided by a digital agency as part of a test for its selection process.

Thank you for reading this case study, I hope you liked it. Any feedback you can offer me will be welcome.