October 2022

Hyro's New Website

My Role

Lead Designer, UX & UI, Art Direction, Marketing Design




Marketing Designer, Animator, Illustrator, Project Manger
Hyro's New Website


Previous Website


The previous structure of Hyro's website was mainly characterized by its simplicity. It didn't have many categories or a lot of content, complex categories or extended navigation. I worked with various teams to organize and divide it into different categories that met their and company's new needs.


Design-wise, it was quite basic, with few colors, simple elements, and inconsistent spacing, typography, and style. It served the company up to a certain point where we had to introduce more content and diversity, therefore this design no longer suited the new needs of the company.


New Structure and Style Guide


We developed a new website structure based on a content plan that was designed to grow with the company's changing needs. This structure includes categories, subcategories, template pages, and reorganizing existing pages. For navigation, I designed a flexible 'mega menu' that can easily handle new additions and future changes without major design overhauls.


The new 'Mega Menu' has various flexible components designed as part of the site's design system. These components can suit different content types, like lists, featured items, categories, or galleries of assets. In the mega menu, there's a spot for general and dynamic messages, plus buttons for requesting a demo or logging into the product.

Style Guide and Design System

Alongside restructuring the website, I began working on the elements for the new site and updated the company's visual style. First, I revamped the typography by changing fonts and creating a system that suits the site's needs. Then, I expanded the color palette and added sub-colors to each main color. This gave us more flexibility while keeping Hyro's brand visible.

Next, I created consistent layouts and a versatile button system. Simultaneously, I produced components and designed pages, ensuring we had a collection of elements ready for future pages. This approach allows us to easily expand the site and maintain a consistent style guide.



The Website

The project's main goal was to establish a flexible design system that could be used to create different pages for a dynamic product. The new site features vibrant, mature, and diverse colors. The layout ensures consistency across all elements and easy control over changes with minimal effort.

See Website