Hyro's New Website
My Role
Assets
Team
Website
Visit website
01
Previous Website
Structure
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.
Website
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.
02
New Structure and Style Guide
Structure
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.
Navigation
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.
Typography
Colors
Layouts
Buttons
Components
03
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.
