UX for E-commerce: Design focused on Conscious Sales
The following text was adapted from the talk I gave at the Tech Woman Summit event on April 15, 2021.
When I was thinking about what to say to other women in the design and technology market, permeating e-commerce and awareness issues, I remembered something that happened to me as soon as I entered Graphic Design college. At the time, I was dating a boy who was studying Social Sciences, and we were talking about what we were learning in our classes. While I studied mass production and read books like 'Impulse Purchases' by my professor Gilberto Strunk, he talked about investigating human behavior with the purpose of improving society.
I remember that it was during one of those conversations that I felt, for the first time, like Darth Vader, in the dark side of the force. While my partner had a noble career, I on the other hand was a villain of capitalism, creating products to be manufactured on a large scale, and using graphic pieces to help sell them, even when people didn’t need them. At that moment it was obvious to me that there was no way this relationship could go forward, our professional goals were completely opposite. And it didn’t, but of course for other reasons. 😉
Even trying to escape this premise, what happened was that destiny placed me, after brief experiences directed at education, to work precisely with commerce, physical and online, for approximately 13 years. That’s what happens when we need to pay bills and job opportunities arise, isn’t it? The bright side of all this is that along the way I chose to specialize in UX, I took a postgraduate course focused on interface design, which also gave me the opportunity to analyze human behavior, but for other purposes.
For that reason, my dilemmas were far from over. They were just going from something broader like:
How to change the world through design needing to work in big companies to earn money and grow in my career?
…for other more specific for a designer of digital products in the e-commerce market:
How can I apply what I’ve learned to drive sales without misleading people and causing negative experiences?
Putting it in a practical way, the designer has the power (to use “the force”) to generate visual contents that guide people’s gaze wherever they want. A classic example of this is the text hierarchy. In the first image, you’ll probably read the biggest sentence first, then the ones below it, lastly the little one at the top, and it works more or less like this for any type of creation. Who remembers the wrong coronation for Miss Universe 2015 because of a simple layout problem on the presenter’s card? So it is!
In the digital universe, a good example of this is the website User Inyerface, which is a kind of game, a browsing experience that shows in a fun way how to use this power in interfaces. The problem is that it is common to see these tricks being used to manipulate people (watch out for the dark side!). This practice is known as Dark Patterns, which are divided into 12 categories such as “Doubtful Questions”, “Hidden Costs” or “Hidden Add to Cart”. In the second image, I simulated 2 of them: the fact that there will be a charge right up there where the user is most likely not to read it, and the opt-out option that makes us feel like an idiot for selecting it.
Challenges I found along the way
How to avoid these negative experiences? I will mention here just a few situations that happened to me in the past, and how I dealt with them.
Case 1: Prices
The first thing we learn when creating sales materials for retail is that the most competitive value contained in the price needs to be more prominent, so I had situations where I needed to generate some artwork with large numbers, small prints and confusing content. Is it a problem to take this approach to attract the customer’s eye? No, it is really used massively, but there is a subtle and ethical limit on how the text is written and how we present the information visually.
What I did was that over time I was delicately adapting what I created, increasing the fonts a little, removing the “footnotes”, and showing the information in a more adequate way. Both images have the same content within the same space, but the second one is more ethically correct.
Case 2: Clear Cart
Another case was when a stakeholder asked me to hide the “Clear Cart” action from the store checkout, claiming that this would increase the conversion rate, since the user was unable to delete the items, then “magically” their only option would be to complete the purchase. Seriously, this actually happened. How I reacted: First I used the 3rd Nielsen Heuristic as an argument that we need to give control and freedom for the user in our interfaces.
But what really made me win the argument was declaring that we don’t even need to do that, because the reality is that the users always have control, they just close the browser window to leave the website. And when they do it in a situation like that, after a bad experience, the likelihood of them coming back is pretty low.
Case 3: Labels
Another situation was when an ad with a “Continue” button was added on the completed order page. Users had already finalized the purchase, but those less attentive were induced to click there. Of course, because of this, the conversion rate of this button was high and earned us a lot of money from the partnership, but I couldn’t let users be deceived like that. The banner led to a page where, through a registration, users would earn 20 reais in the next purchase.
I had to be very incisive until, after many AB tests, I managed to approve the change of the button’s label to “Receive 20 reais”, along with UI changes to something a little more attractive (it didn’t seem very safe before). Of course, we started to earn a little less with the new version, but I had a slightly clearer conscience that at least we weren’t fooling people, and that many of them would buy with us again because of it.
Case 4: Ads
Still on ads, we know that many companies complement their revenues with ads inserted in the product interface. No matter the layout, they can be in the middle of the content or jump in front of everything, the truth is that they can be quite annoying appearing during navigation. With a large volume of customer complaints, the fear was that we were losing future purchases because of this. So, off I went looking for alternatives that wouldn’t reduce ad revenue, but at the same time they weren’t so invasive for users.
After a series of studies on positions and good visualization practices, the solution was new formats, such as Native Ad. It uses the same structure as the interface component and adapt to the content in a less intrusive way, and for that reason it can perform a higher conversion, even taking up less space. But of course, in order for it not to become a Dark Pattern, it is necessary to make it very clear that it is an advertisement.
The value of Engagement
All these examples that I have just mentioned, if we stop to think about it, boil down to the concept that it is not worth taking actions that force users to join or make a purchase, because if the experience is negative, the loss of that customer will impact much more the long-term result. Some metrics, such as Life Time Value for example, show that customer engagement has a much greater value for the company, so it is important to measure the impact of any action.
Challenges I found while working at VTEX
Cool, but what about today? How do I deliver better experiences?
VTEX is the largest e-commerce platform in Latin America, they have more than 3,000 confirmed customers in 45 countries around the world, which is why they have a wide and complex structure of products for this purpose. One of my main missions there was precisely to map the UX problems in our customers’ stores, so that we could guide our products and their operation to provide better experiences and, consequently, sell more. But are there formulas for this wide variety of stores and consumer profiles?
I bring some examples of clients to talk a little about what works and what doesn’t work in any situation.
Motorola
In the case of Motorola, some general patterns of e-commerce interfaces are visible, such as the large and persistent menu at the top, but the truth is that the variety of products in a cell phone store is very small, there are few products, and the focus on this case is to give the client the maximum number of exploratory paths based on their functionalities. In addition to browsing categories down there on the home of the desktop version, the product page on the side by itself looks like an institutional website, detailing in a very visual way all the technical specifications of the device. It’s this level of care with the specs that will convert this type of customer.
Carrefour
Carrefour, on the other hand, has a huge volume of products, and need to work with the quantity factor, providing shortcuts for adding to the cart directly in the shelves. Products do not need so much detail on their page, and the focus needs to be on promotions, on browsing categories, which they call “corridors”, and especially on the search component, which is always visible and open, indicating the most popular items fetched. This is how customers shop in an online supermarket.
Maria Filó
In the fashion sector, this example by Maria Filó shows how important images are. Big highlights focused on collections, styles or types of material appeal to this audience. On the product page, the measurement guide and size selection are essential, but the photos must always be very large (they occupy 80% of the screen on mobile). With the possibility of zooming in to show sewing and fabric details, taken in different positions, or even adding videos, the photos are a decisive factor for the customer to be able to see how the product fits from all angles.
Headless Commerce
It is because of this plurality of stores that VTEX works to fit the concept of Headless Commerce, providing the engineering behind the store separate (backend), so that each brand can create its frontend in a personalized and consistent way for their type of customer.
Tips to guide conscious sales
So what have we learned so far? I summarized it in a list of lessons about creating positive experiences:
1- ALWAYS be ethical, especially when creating textual and visual content.
2- Remember that users always have control and the power to never use your product again if they feel fooled.
3- Be firm whenever you need to defend the user. Perhaps this point is the most difficult, but try to be resilient.
4- Look for alternatives that are both user-friendly and financially interesting for the business.
5- Measure the result of any action, and remember that even if they bring immediate return, the long-term value is much more impactful.
6- Know your user and the context in which they are inserted, this is crucial to create experiences that are more directed, empathetic and that convert more.
For closing, I brought this speech by Jeff Bezos that inspired me a lot. In the context where Amazon pioneered product reviews, more than once he was asked about hiding negative reviews, as they were causing the store to lose sales. Always putting the customer first, this is more or less what he replied:
“The purpose of reviews is not to deliver the best products, but the best choices.”
Today Amazon has become a reference in online product research and comparison, and the largest marketplaces in the world use the same review feature.
After experiencing all of this, I currently feel like Rey, on the right side of the force. Especially in this pandemic context, when online commerce has become a way of bringing people closer to the products they need, solving real problems with the convenience factor. Today, more mature, I can understand that it is not necessary to create a product of a social nature or to work in a company of this type to make a difference in people’s lives, it is enough to act in what you can on a day-to-day basis to guarantee more respect and empathy. I make it so that everyone reading this can do the same, no matter the area they work in.
May the force be with you!
