BAUDUCCO | E-COMMERCE
I led the UX team at Huia, which transformed Bauducco's Christmas e-commerce! Together, we modernized the online stores and breathed new life into the shopping experience!
+113%
Revenue
+98%
More transactions in e-commerce
+10%
+102%
of Users
Increase in interactions on social media
THE CHALLENGE
Bauducco had to reinvent itself due to the limitations imposed during the Covid-19 pandemic. The company's goal was to modernize its online stores, aiming to increase the number of orders and develop better media campaign strategies.
Bauducco then decided to create a plan focused exclusively on people, who, due to the pandemic, were visiting stores less frequently. The solution was to take the company's digital communication everywhere, at the right time, with a relevant message that would touch each individual uniquely, for both B2C and B2B customers.
The brand's strategy integrated actions for e-commerce management, digital marketing outreach, and also improvements to checkout performance.
THE TEAM
A multidisciplinary team, with professionals from Bauducco and Haus.
To achieve this, it was necessary to assemble a multidisciplinary team, with professionals from Bauducco and Haus. Together, we worked in a performance-based team, holding daily meetings to analyze the previous day's data, so that we could devise solutions to implement as quickly as possible.
PROBLEM FRAME
Why were users abandoning their shopping carts in the final stages of checkout?
Using analytics tools and website performance evaluation, we observed that many users were abandoning their shopping carts at checkout. From there, we conducted a heuristic evaluation to better understand the problems that needed to be solved.
Following these investigations, we identified several pain points in the purchase flow, performance, and responsiveness of the Bauducco platform that hindered the user's shopping experience throughout their journey.
FIRST ACTION PLAN | FRANKENSTEIN PROTOTYPE
How could we save time in creating a quick prototype and testing it with real users?
After mapping the user flow and with the analysis in hand, we needed to start testing with real users and uncover problems to verify if our assumptions were accurate regarding friction points and discover new opportunities for improvement.
We quickly created a prototype that we called "Frankenstein," which consisted of assembling an A/B test using screenshots of the current interface, and using Photoshop and animation in Figma to create versions of the prototypes, version B evolving as we observed the users' needs during the tests.
Based on the data observations, we also decided to begin testing the mobile version of the platform.
Bauducco Mobile Flow A 1.0
Performance indicators for testing.
What information do we need to collect initially, and what performance indicators will we consider?
After considering several points within the team, we defined which performance indicators we would observe in the tests.
Performance indicators observed:
-
Performance: How long and how many steps are needed for a person to complete basic tasks;
-
Accuracy: How many errors did the person make? And were they fatal, or was the person able to recover with the information received from the system?
-
Emotional response: How did the person feel after completing the task? Was the person confident or stressed? Would they recommend the product to a friend?
To gather insights, we chose MAZE, an online Product Discovery platform.
DISCOVERIES AND THE VTEX PLATFORM
How could our findings be adapted to the VTEX platform structure?
Checkout is the final step in the online shopping process and is also considered one of the most important for a store's sales conversion rate.
With the report in hand, it was time for a meeting with the VTEX team to understand what aspects of our findings could be applied and what was structural to the system, in order to then create a third suggested purchase flow for the Bauducco platform.
UI AND VISUAL DESIGN OF ONLINE STORES
Aspects such as UI patterns, WCAG accessibility guidelines, and visual design were considered in this phase.
By making your website accessible, you allow more people to interact with it and have a good experience, in addition to generating more traffic to the pages and improving users' perception of your business.
Now it was necessary to modernize the UI design aspect of the platform. The final wireframe of our Frankenstein served as a solid foundation to help the designer build a reinterpretation of the site's components and visuals. In addition, results collected using the WCAG Contrast Checker tool were considered.
Using the WCAG Guidelines as a benchmark, which is the main accessibility reference in the world, it was possible to make more informed decisions about the website's colors and contrast.
Outcomes and final considerations
Based on the three pillars of user experience: Usability, Accessibility, and Aesthetics, we helped create a new chapter in Bauducco's history.
The changes made by our team began with improvements to the navigability and visual identity of the online stores. The brand's websites and online interfaces are now more appealing to the public.
Following the positive results, Bauducco identified the potential of digital channels and began investing in strategies to ensure that sales through its e-commerce platforms remain significant throughout the year.