Year: 2023

Role: Lead UI Designer

Chores: UI design, interaction design, prototyping and testing, specs, engineering handoff, and quality assurance.

Redesign based on data and Marketing input

Redesigning a website's main navigation it's a challenging endeavor. It impacts directly on metrics and traffic, and requires key areas of the company to successfully launch it. In this particular project, my role was reading the UX research data, combine with the Marketing team's input, as also teaming-up with front-end engineers who would later implement it.

Another layer of complexity was designing it in a way the team of designers could reuse the component in Figma, with all the uses cases they will later need for further projects.

💻 Desktop Figma Prototype →

📱 Mobile Figma Prototype →

A complex component built with several other dynamic components in Figma

The component was designed and specced on Figma as part of the company's library. While using the component, the designers may select properties such as the kind of user logged and the grid, changing the aspects of the component to suit different devices while designing UIs.

This was backed up by a set of dynamic components I built before, such as buttons, links and form components. Each of them having their own technical specs for engineering, and properly linked in the menu component's specs.

Tailwind responsive-ready design

The design was aligned with engineering technologies, thus meaning the component sizes matches the grid used in front-end such as using Tailwind classes and variables for color and text.

Figma component overview

The video below shows an overview of the structure required to create the menu component in Figma, and how the properties are organized to make it easy to use in the UIs.

Vitor Heinzen
Product designer with coding skills 🧑🏻‍💻

More by Vitor Heinzen

View profile