Basico.com
A brand
and website
redesign

E-commerce

In-house art director

2017-2018 Brazil

Web design, UX, UI, visual identity, art direction, graphic design, e-commerce, management

I worked as art director of the fashion brand and e-commerce, and changes to the Shopify platform triggered redesigning of the website and rebranding of all the visual identity.

E-commerce

In-house art director

2017-2018 Brazil

Web design, UX, UI, visual identity, art direction, graphic design, e-commerce, management

I worked as art director of the fashion brand and e-commerce, and changes to the Shopify platform triggered redesigning of the website and rebranding of all the visual identity.

Situation:
The best basic you can have, either as an outfit or as a website




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 last 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 join and 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 up business.

The lead challenge:
Present and future at the same time





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 bet:
A visual identity for the best chocolate cake




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.

The ultimate proof,
or the fun part:
The instruction fold




So far, I was considering 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 taking 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 this poster printing, it was possible to have countless image varieties. 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.

The way to go:
New website impact




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 destinated for the shopping experience, that 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

Takeaways




My role in the design team


The design team was about four in-house designers and more few fixed collaborators, such as photographers and image processors. And we were under the branding branch of the company.

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 played 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).

As a spin-off of this new system, we ended up tagging all the looks, so we could now quickly look for all the instances a product was shot, scaling the harnessing of each shooting.


Tools used to centralize the work


Dropbox, Google Sheets, Excell, Asana, Trello

Learnings:
Innovation and maintenance





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.