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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Or if you prefer, then you can watch a recording of the interaction:
These are some important design factors that I have taken into account to improve the mobile payment experience:
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.