Website main navigation
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.
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.