Need to transform design to code? Don't hardcode it, Avocode it!
See how
August 3, 2016

What is so tempting about continuous design?

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

Fabrizzio Zampieri (34) is a cofounder, partner and Senior Product Design VP at Beauty Date, a Brazilian marketplace for online beauty appointments booking. He started coding in HTML and CSS in 1997 at the age of 15. Today, he is fairly acquainted with JavaScript and React.js. His first design tool was Fireworks. These days, he prefers Sketch over Photoshop.

Developing design or designing development?

Fabrizzio always believed that design is not a one-time thing but a continual process. That's why he was never happy at ad agencies. He puts it: “In advertising you have limited time to really change design for the better. Just when you think you could move it to the next level, the client is satisfied with the result and assigns you something new, completely unrelated to what you were doing prior to that.”

After a few advertising and corporate jobs, Fabrizio turned his focus to startups. He started at a big data startup Navegg, owned by Buscape. After he redesigned Navegg's analytics user interface, his friend introduced him to Alexandre Kleis. From this point on, Fabrizzio's life should never be the same.

Go big, or go home

After a few introductory talks, Alexandre persuaded Fabrizzio to become a partner at his startup Agenda Beleza. Fabrizio agreed under one condition: 

"The design of the entire thing has to change."

That's the approach Alexandre was searching for. Together they applied for a government program Startup Brasil. They got it and received $5000 in funding. Soon another angel investor threw in extra 5K and the Agenda Beleza with six people in total on board was ready to sail.

After one year of development they raised 5 million USD from Valor Capital Group. Agenda Beleza used this money to acquire another company AZ Solutions which specialized in wellness and the rest is history: Agenda Beleza became Beauty Date, an online platform for small and medium salons. Recently, with 80+ employees on board, it was acquired by IBG for $28 million.

Among other things, Fabrizzio designed the entire CI of Beauty Date.

"It's not just how it looks like. It's how it works."

Fabrizzio believes that designers should focus on more than just making pretty things.

“The eventual look is just the result of the functionality of the product. Take one week off and watch what is out there. Write down all the benchmarks and sign up for their trials. Don't touch Photoshop or Sketch before you've finished this homework.”

That is the only advice Fabrizzio gives to his team members every time they start working on a new project and he adds: 

“Visualize everything. Designers job is to design something that the developer can easily put to life. That's why I always work with mockups to show everyone on our team how the thing we're building actually works at every step and at every interaction.”

How to manage design workflow?

Fabrizzio found his dream intersection od design and code in product building. Today, as a Head of Product at Beauty Date he spends about 80% of his time on design and 20% on management and testing. Here are some tools that help Fabrizzio keep design workflow management down at 20%:

  • Pipefy – a set of templates to prototype workflows and pipelines for the team. It simply shows if certain tasks were finished before others were started.
  • Proto – to prototype mobile apps, especially because of its fluid effects.
  • Pinterest, Dribble, Behance for mood boards.
  • Avocode for design hand-off and exporting assets from designs.
  • Evernote – yes, of course you know this one. But at BeautyDate they actually use it for creating boards with benchmarks of the competition. Whenever someone from the team finds a new benchmark or a new feature of some competitor, he/she puts it to the Evernote so anyone can see. Clever.

And what are your favorite tools for design workflow?

Tell us in the comments below.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: