With student notebooks (specifically for middle-school downwards) being the company’s priority, the primary target is identified as parents of 4 to 14 year-old children (since Vietnamese parents tend to take care of every matter until the children go to high school or college).
We decided the best way to create a user-friendly shopping process was to see how they interact with one in real life, so usability testing was chosen.
Scenario & Task: “Your kid is running out of notebooks. Order 10 notebooks for him.”
Website Used: A then-latest mobile version of a Vietnamese e-commerce website.
Method: The users were asked to think aloud while I was observing and taking notes of their opinions, troubles, and behaviors.
And this was the test site’s checkout flow:
The following are major pain points that occurred to at least 2 participants:
While the users were proceeding to their order, a request for signup/login appeared as compulsory. 3/3 testers found this annoying.
2/3 users took quite a long time before hitting Add to Cart / Order; 1 of them seemed to be unable to find the buttons. They kept scrolling up and down, distracted by too much text on the respective pages and felt the need of reading them all.
From the usability test we can see that signup shouldn’t be forced upon users right at the beginning of the process. Coupled with the fact the company doesn’t support social login, checkout as guest must be an option.
The company’s policies makes it possible to put Shipping Address, Payment Method, and Review within the same step, due to a small amount of data to input and process (domestic orders, no special delivery option, no money transfer service through the site). When viable, one-page checkout will make the process feel like a breeze to users.
There are 3 possible places for a Suggestion of Registration (not signup request): alongside Checkout Options, under the input fields, and after Confirmation. For the best decision, it would probably require A/B testing but we couldn’t afford it. I chose to put this act after (and next to) Confirmation, where customer satisfaction from a purchase successfully done can make them more open to it. Validation then, if deemed necessary, also won’t interfere with users checking out anymore.
With the overall flow established, the details can be explored next through wireflows:
Because everything is on one page now, the full-of-fields Shipping Address section needs a conclusion to its input so that users can review them easily. The pending form would only give the impression of incompleteness and make it much harder for users to scan through with too many visual fixations. Thus the presence of a Submit button that keeps users on this same screen.
Now the flow of return customers who have multiple delivery addresses is a bit more complex. Other than editing, they might want to choose another saved address or use a new one. There are 2 possible best screen flows:
1. Shipping Address with 1 as default & Change button → New section containing all saved addresses, each with Edit button, and an Add New Address option → Empty fields / Current-valued fields. (This flow is used by Asos.)
2. Shipping Address with all choices, each with Edit, and Add New Adress → Empty fields / Current-valued fields.
Again, as with Signup Suggestion, I think there are both pros and cons to each of these approaches. I go with the latter because of the differences this site has from one like Asos. First: its aforementioned small amount of data. Second: its target audience, the mothers, will mostly use it to buy supplies for their children, a few weeks before or during the school year. The most convenient places they would want the package delivered to are home and their workplace. School supplies are also hardly a gift they would give to someone else. In short, a customer’s possible shipping addresses won’t be too many.
One way I thought of to declutter, in case of a big number of addresses, is collapsing other choices under one line of address number and street name — their most relevant and unique info that is enough to determine each one for users. The rest can then be revealed upon selection (Progressive Disclosure technique).
Therefore, with the second flow, I can give users quick accessibility picking other choices or adding a new one.