Case study: How branding and UX interact to create a new e-commerce experience

Enhancing online user experience on a small handicrafts e-commerce.

Details

Brief: Help a local business to cope with the Covid-19 context by designing a desktop e-commerce.
Deliverables: Research, benchmarking and mid-fi interactive prototype
Design Sprint: 7 days.
Team: Ana Luiza Fontana, Alice Costa and me.
Brand: As Tintureiras (current e-commerce )

Brand: As Tintureiras

As Tintureiras (the dyers) is a handcraft brand based in São Paulo, Brazil. It sells pieces made with ancestral techniques: natural dyeing and botanical printing. In addition, the brand promotes sustainability as its main value, that is why all the processes involved in the production are 100% natural and do not harm the environment.

handkerchief made by As Tintureiras. Photo: reproduction from the brand’s facebook account.

Brand values

• sustainable
• handmade
• ancient culture

Design Process

First steps

In order to deeply understand the market niche we ‘desk researched’ and ran exploratory interviews with 8 real and potential clients and interviewed the brand’s owner (and getting updates during all process).
100% of the interviewees expressed concerns for the local economy, sustainability issues and passion for cultural practices. Thus, we realized that both consumers and the brand have similar values and motivations, which is very curious and rare in other business niches, making handicrafts a very unique kind of business.

Affection is key to handicraft markets.

Workshop by As Tintureiras. Photo: reproduction from the brand’s facebook account.

• The consumers relate to the products on accounts of affective memory the tradition brought up by the objects, which reminds them of past memories and current identifications.
• Those consumers’ preference for handcrafted objects and aesthetics is constructed under familiar influences.
• 100% of the interviewees also practice some kind of manual work, which turns them also into colleagues and enables a strong feeling of community and partnership building.

“The consumption of handcrafted products is all about creating relationships and connections through stories.” (interviewee)

Since affection is key, handicraft markets suffered deeply from the social distance created by the COVID-19 pandemic.

For these consumers, buying is a political act.

Photo: reproduction from the brand’s facebook account.

Why do they prefer buying handicrafts over industrial products?
Because they believe that:

• Buying from a local business and investing in a small manufacturer will consequently help to enhance the overall income distribution.
• Handmade products are more sustainable socially, economically and environmentally.
• They are helping preserve ancestral and cultural practices and know-how.
• Handmade products are higher quality, so they are open to pay higher prices and to buy less frequently.

Brand and consumers have the same values, so consequently the same problems arise when it comes to e-commerce:

1. The user demands a virtual connection with the artisan to decide purchasing. Due to the pandemic, people can no longer analyze the products in person and create closer ties with the artisans.
2. The brand needs to increase sales, which have dropped due to the pandemic, since the artisans can no longer present the products live and create affective bonds with customers.

mini mind map

A third problem found was that many words and categories used in the current e-commerce were so specific that consumers couldn’t understand the concepts and ideas. Additionally, they could not complete some simple tasks such as “buy a scarf” or “find the kit for workshop 1”. Considering this problem easier to solve, we also included this improvement in the solution.

site map (as is and to be)

So, after brainstorms, mindmaps, benchmarks, market analyzes, site maps and analysing the e-commerce flow…

Main question

How do you bring the necessary affection and political ideas present in the physical world to the digital world, enhancing the relationship between brand and consumer?

We believe that adding products’ and producers’ specific information on the e-commerce will tighten the relationship between the artisans and customers, transform them brand advocates, and consequently increase sales. We would be able to measure the results by checking conversion rate, number of visitors, time on the page, and number of registrations on the website analytics.

The product’s biography is a defining factor in the purchase of the handicraft and contributes to brand building.

Solution Process

Facing the designed user flow ‘to be’, we decided in which touch points the e-commerce could transmit its values clearly.

user flow inside the e-commerce

Those pages were:

• Home: It serves as the front door, where the clients need to feel the brand’s ethos.
• About: shows all the information about who is responsible for the production and its values.
• All products: it was messy, with non important information displayed unnecessarily.
• Category: since in many categories information and concept aren’t common sense for every new visitor, better explain what a product is and how to use it.
• Unique product: includes new information about the material, the natural color and the product in an easier way to comprehend.
• Shopping cart: we spotted some repetitive information and lack of attention to the information architecture.
• Payment confirmation: it is important to confirm to the clients that they are achieving their “jobs to be done” when buying with As Tintureiras.

We decided where to insert those products and producers’ information based on the theory of design heuristics and the practice of concept and usability tests with look-a-like clients.

current e-commerce (before our design)

Some changes on the current e-commerce

1. CATEGORY PAGE:
   To reduce the risk of doubt for users, we included on each category page explanations about the product in question and how to use it.
2. PRODUCT PAGE:
   On the selected product page focusing on the problem presented, we also included information about the materials used for dyeing, the measures and raw materials, as well as a link to the about page, with a video explaining the production process.
3. ABOUT:
   To solve the problem generated by the pandemic and the customer’s need to have close contact with the artisan, we created the ‘about’ category. It contains several relevant facts about the artisans, their family relationship, the brand creation and the workshops and courses given by the artisans. At the end of the page, the user can then watch a video about the production process of the pieces.
4. HOME:
   Last but not least, the first scroll of the home page presents a concept video in full screen as a welcome message to the As Tintureiras studio, with the intention of making the virtual experience more similar to the physical experience and making the user feel comfortable and involved by the brand’s atmosphere. Right below, in the second scroll, a brief text about them is displayed and then the presentation of the launches and workshops.
5. We gave more emphasis to the registration of users on the website because it is a great way to strengthen the community around the brand and communicate with these users, presenting news and updates.
6. To integrate social networks and e-commerce and in order to have the same tone of voice and feeling, we integrated the photos from the Instagram feed at the bottom of the home page.
7. We removed all the credit card logos that were placed together with the payment methods in the footer, making it difficult to understand the message. This information will be included in the “payment methods” tab, which will also continue to be accessed through the footer.
8. PAYMENT CONFIRMATION:
   At the end of their purchase, the user will receive a ‘thank you’ message in first person, highlighting their contributions to small producers and sustainable economy.
9. ENTIRE E-COMMERCE:
   We made multiple changes in the copywriting.

These and other minor design changes you can check on the interactive prototype below:

To check the prototype perfectly, choose “fit” in the options button (up left on the prototype’s screen).

new e-commerce for As tintureiras (mid-fi)

While doing usability tests we got some outputs that we immediately iterated:

• great reaction to site navigation and page content
• suggestion to change some texts
• praise for the possibility of calculating shipping costs before finalizing the product purchase

Learnings

• When it comes to small and local business the process of competition analysis can be a little bit vague because it is possible that the owner doesn’t have a clear idea, that’s why for us it was important to go deeper in the clients interviews and research to understand the products’ jobs to be done.
• Many companies believe that making promotional prices they will sell more, but sometimes the client isn’t price sensitive but storytelling and causes sensitive (like we could see in this case).
• UX design is a transdisciplinary area, it is important to have an holistic point of view.

Next Steps

Redesigning the website and live testing.

Dear, reader.
Thanks for reading this case study, I hope it was helpful.
Please let me know if you have any comments or suggestions.
See you next week.