Basico.com e-commerce
Art Director
and Head of Design

I headed the redesign of the website’s user experience and interface on the occasion of platform migration

2017–2018
São Paulo, Brazil

#ux ui
#visual identity
Data visualization practice

Produced at the occasion of the Parsons Infographics and Data Visualization Postgraduate Program


December 2023

New York, US

#data visualization
#ux ui
Basico with the dot com is the name of a fashion brand and e-commerce from Brazil that proposes to sell high-quality essential outfits for a universal public: “the best white tee you can ever have.” I was invited to become their art director as they were looking for someone who pays attention to the quality of the production as if it lasts forever. So I could achieve experience managing a UX and UI team at the time, adding the rigor of my printing design background.

As soon as I started to work, they asked me to lead the website redesign team. The motivation at the time was the previous decision to migrate all of their systems to the Shopify platform. Taking advantage of this moment, we had the goal of redesigning the customer experience, upgrading the features in the shopping flow, and repacking all the new content that emerged from a growing business.
The first challenge as a team leader was to coordinate the structural change of the system while the current version at the time was in pretty active use. Beyond that, it should still be operating in a creative and impactful way. The good of this, though, was that we could use previously collected data on our clients’ behavior and shopping history.

From an issue, the two parallels system became the solution. The idea was to take advantage of that situation and plan a gradual shift from the old to the new visual identity, and with the current operational platform, we tested those gradual changes while we were producing the new guidelines.

So, we started to experiment with the newsletters. These are three examples of the early use of the new identity —bold typography, cleanness, and movement. The success and acceptance could be tested by the gradual increase of clicks from the emails to the website.
The brand message was clear from the name Basic (in Portuguese). And such purpose should be reflected in its visuals. How to extraordinarily bake the best chocolate cake recipe? In other words, how can you translate an excellent but essential outfit into visuals?

Based on feedback loyal clients used to send us, we realized that most of the “white tee” chosen as their favorite was much more related to a connection built with the brand rather than a logical decision. So, our way to go was to place Basico .com as a “love brand.”


Result
We ended up betting on a simple, charming, and pretty basic typography, Neue Haas Grotesk, yet in refined and sophisticated multiple ways of use and combining its variations. With that flexibility, as part of the new identity, we created plenty of campaign logos, playing with the typography to represent the word’s meaning.  These logos were used through newsletters, banners, sliders, and landing pages.
So far, I have considered the digital medium essentially to project the visual identity. But at some point, it was tested when we started to apply in a few physical mediums, such as the stores’ signage, institutional matters, invitations, clothes labels, and, my favorite, the informative poster that comes with every purchase. By the brand tradition, this piece was already a space dedicated to our partners and brand friends, yet the technical instructions for the outfit were taken care of.

For Collectors
In this case, we decided to keep the poster idea and final format but go further with the big image exploration. Before, it was a blank cover with two simple folds, and the poster was only revealed once it was all opened. With the new design, the image is now partially revealed in a non-controlled crop, determined by the folds guidelines.

Because of the vast amount of poster printing, countless image varieties were possible. That’s why insinuating what content was inside enriched the poster idea and reinforced the brand-love concept with this collectible piece.

And it worked! We used to receive many messages of compliments and requests for one missed artwork. We even named it Basico’s hallmark.


Fitting into the boxes
Other than that, as it is sent with all kinds of outfits, it was essential to nicely fit the delivery boxes’ DIN format module. We found the solution to have two ways of folding in the same piece, varying from an A4 final format to an A5, simply folding once more in the image and text edge.
New Look
The visual identity was conceived as the new website was being designed. Besides a change of look and platform, the whole content was rethought and repacked. As the art director in charge of designing the flow of the website, I also proposed this content arrangement, which proved more accurate for the fast-growing company.The result was a clean and straightforward website that was in harmonic unity among its parts. The main flow was destined for the shopping experience, which now could count with more organized, helpful, and prominent filters. Also, all the other great initiatives of the company could be seen in a compiled special section, the “stories.” This separation of matters could be explored through different visual approaches.

Outcomes
The new mobile experience, as the whole responsiveness behavior, reflected the gradual increase of going further in the main flow of the website, such as adding products to the cart and finishing purchases. Also, the redesign gave us the opportunity to centralize all the design guidelines in an initial design system. Unexpectedly, I had to leave the project for health reasons and couldn’t be part of the live operating website.

Tools used
Sketch, InVision, InDesign, Photoshop, Illustrator, Bridge, Shopify, and MailChimp
My role in the design team
The design team consisted of about four in-house designers and a few fixed collaborators, such as photographers and image processors. We were part of the company's branding branch.

I led the team in all demands, communicating with the collaborators and other internal departments —metrics team, execution, production, and financial. I even supported the creative process of the outfit products by researching references, refining picture sketches, and suggesting patterns, among others. Further, I was responsible for designing the new visual guidelines, creating pages, and defining the new content structure.

Internal outcomes
With the new website design added to the Shopify platform, I also had the chance to optimize many internal processes. With the help of the design and development team, I created templates and a system of how they should be used and saved. Beyond a more efficient and time-saving process, the templates guaranteed consistency of the new guidelines.

As a manager, another significant change I made was to optimize the shooting process. I planned the before, during the day, and after schedules. From about 25 looks that were documented before, with my proposal, we went up to around 60 to 70 looks per shooting day. Now, we could try new experimental photos that could be used to create new campaigns.

Before: Planning the sequence of the looks to optimize the changing and ironing time and to get the minimum of clothes needed out of stock; During the day: Organizing a centralized sheet and being present all day coordinating the models and the staff; and after: Creating a system to download and safely store the considerable amount of files took per time (at about 100GB).

Tools used to centralize the work
Dropbox, Google Sheets, Excell, Asana, Trello
Through this visual identity refinement, we understood that there is a balance between creativity and familiarity. Also, I could assimilate the same about my experience in the new role, I was assuming, yet keeping my previous knowledge to help me out.

In leadership, I learned how to manage a team, collaborate closely with the other departments, and deal with all urgent demands while planning a main structural change. Finally, balancing the work with the in-house and collaborators team was a great exercise.

Has being worked for Basico.com was an actual graduation school for me. Working closely with the development department, our design ideas were constantly proven for their impact on production and effectiveness.