Fashion e-commerce UX | UI Case Study

7 min readSep 21, 2020

From a digital marketing strategy to a UX Design solution

Disclaimer: Some information has been blurred out or is low quality on purpose due to privacy and confidentiality of the project and /or the brand and third parties.

Summary:

This project started as a digital marketing strategy. Based on my experience in design and marketing, Pluvo Rain wanted me to improve their social media channels because conversions were not as expected and online sales were non-existent.

Pluvo Rain had experienced consistent social media growth and engagement, but my research and analysis revealed the issue was website and not the digital marketing strategy (or lack of it)

I shared my discoveries with the client, and continued digging with “UX eyes”. It didn’t make sense to create a digital and marketing strategy if the products couldn’t be bought.

Spoiler alert: it was impossible to finish the purchase process to buy products on the website because of bad UX practices.

With these discoveries I changed the project from digital marketing to UX (with approval — and gratitude- from the client)

Here is my process …

Problem & hypothesis

Pluvo contacted me because even if the brand has been consistently growing on social media, started creating an engaged community and even having a monthly budget for digital marketing, they were not seeing the expected results in terms of online sales.

*The e-commerce had ZERO sales in the last three months. However, people were showing interest in social media channels about buying the products.*

The main first-approach hypothesis were:

People who actually follow the brand cannot afford the product.
People don’t trust the brand to actually purchase something online.
People struggle with online shopping since is difficult to be sure about sizes.

Analysis — Research

The brand:

Pluvo Rain started in 2016 in Colombia, and since then has built a community and shaped its way into the independent fashion market nationally. As a first step, I analysed the current status of the brand online: social media channels, Google SEO and website. The same elements were taken in consideration for the competitors.

The competitors:

I did a brief Competitive Usability Evaluation. I analysed 7 competitors in the national market, 5 of them direct competitors in terms of product, market and company size (small, medium companies) and the other two were The North Face and Decathlon Colombia. Also 3 competitors in the international market: Sutterheim Raincoats, Uniqlo and Marimekko.

Overall online presence was significantly better than its competitors. The engagement rate on Instagram was the highest among all and from the 7 competitors on the national market, only 3 ranked above on SEO, two of them being Decathlon and The North Face.

Also one of the hipotesys was wrong, the DMs on Instagram showed that people were interested in buying the product, putting so much effort to be able to get one Pluvo Raincoat: from asking a direct PayU link, to make a bank transfer or even go to an ATM to wire money to buy the product.

The website analysis told a different story. Visits were low and quick, and most important, no purchases were made. Compared to the competitors, it was in the top bottom rank of them all. The following experience map shows a brief journey to buy a raincoat.

Experience map:

The experience map showed significant pain points, especially on the website.

Even if the engagement and social media presence was higher, they were not converting into sales
There were zero sales on the website.
Is impossible to finish a purchase. “One size fits all” does not work at all.
The community being built in the social media channels were not in their majority potential customers of the brand, but aspirational followers.
The website is in english and in US dollars, however the brand is operating in Colombia and targeting colombian users.

“This is MORE an UX issue rather than a digital marketing one”

Personas

Once I had the outcomes of the analysis, plus interviewing the client and gathering information about leads, customers and followers of the social media channel who do not intent (or cannot afford) to buy the products, I defined three personas for Pluvo. Meet Maria Antonia, Camilo and Amaia:

After defining the personas, gathering all the user data, competitor and analysis, and knowing the negative outcomes again specially in the website, I showed the client the results so far. I shared my thoughts about addressing the project from the UX side. With the client approval and trust, I went ahead and changed entirely the project. I focused now on UX.

The UX Design process

Validating with potential customers. User testing (thinking out loud)

Changing the project and tackling it from where the issues were discovered, I digged deeper into Pluvo’s existing website. I did 5 remote usability testings through skype: 3 users from Colombia, 2 users from Colombia living abroad, 1 user from Europe.

There were two tasks. “Buy a yellow raincoat” and “Buy a product that you like”

Screenshot of one of the remote usability testings.

Main issues of the usability test based on heuristics (major severity):

Buttons to nowhere: While on the website — in english- and click on the button “Shop Colombia” it goes to the exact same shop as “Shop Worldwide”.

Shipping and COVID-19 restrictions: At the top of the home page there is the warning that due to COVID-19 the shipping is available only for Colombia. Only 1 of the 5 users was aware of this message, and shipping addresses outside Colombia during checkout process showed no warnings or errors.

Man - Women sections being an unisex brand: For aesthetic reasons, there are two big buttons to shop called “man” and “women”. However the products of the brand are unisex and to the date of the evaluation, Pluvo had made a photoshoot with one female model, having no content to show products in male models. This frustrated male users who wondered why they kept seeing “female products” in the male section of the shop.

Language and currencies: The website is in english even for users in Colombia. The currency is showed in USD, but if people connect from Europe, an EUR pop up shows up at the top of the screen. Also, if you choose not to pay via PayPal, the currency is shown in COP, converted from USD; which is almost doubles the price of the product.

Checkout process: Users didn’t know what to do if they didnt want to pay via PayPal. (Keep in mind that PayPal is not available in Colombia), and it took a while for them to discover that the “checkout” button offered other payment options.

The usability test and later heuristic evaluation gave me enough data to discover the main issues to approach the problem and start thinking in specific solutions.

Define and prototype.

Turning pain points into goals

Taking in consideration the main issues, I prioritized functionalities for a MPV, and started prototipyng from low to high fidelity. The prototypes iterated after meeting the client and by stepping up the level of fidelity.

Sketches:

Keeping in mind that the client was keen to keep the UI as close as the original one, I focused on improving functionalities rather than visual elements.

Wireframes

Mockups

Next steps …

The site is now in development and getting ready to be launched. There is still room for improvement and needs to be tested. However, a good insight is that as soon as the developer team put up the site on the right domain, two hours later two purchases were made (we noticed a bit later since it was supposed to be a test!) so the first and main issue has been covered. The site now runs in two languages and two currencies as well.

I’ll edit this article with the results of testing and further steps to be done: