Hatch

Designing solutions for large scale engineering problems

about the project

Hatch is a Global Multidisciplinary Management, Engineering, and Development Consultancy based in Canada. Its Group Companies have more than 9,000 staff in 70+ offices. 

They needed help on the design of different digital products.

mockup-6-devices1

my role on the project

In order to padronizate the style and usability of all Hatch products, part of my role was creating all the Design Styles, Responsive components and Screen Flows, according to the features demanded on each project. Detailed journeys and prototypes were created for each functionality and the Design System was builded simultaneously to keep up with the project needs.

006-board-isometric

the design system

Based on the brand styles, I created the color palette for primary, secondary, and supportive actions, the text styles and sizes, and the interface components with their respective variations.

002-typography-board2
001-color-palette-board
003-components-board4
005-desktop-board
008-desktop-board
006-desktop-board
007-desktop-board
004-mobile-board

management system for
engineering projects

The main project supported by the Design System was a Centralized System to manage big engineering projects with lots of departments, signees, permissions, budget control, and forecasts in real time.

orms-5-devices-ok

monitoring and metrics in the field

System features focused on monitoring and analyzing metrics in the field were prepared for tablet and mobile screens.

011-tablet-landscape-tailings

monitoring and metrics in the office

Monitoring screens were prepared for many screen sizes, with options for personalization depending on the status and importance of the data being visualized.

001-office-tailings-2-monitors-dell
004-office-orms-1-cut
Terminal Marítimo de Ponta da Madeira

prototypes

High Fidelity Prototypes were made for the functionalities proposed on the system. This stage was very important to align interactions and data validations with the development team, and also, to accurately reflect the design components with the components used in the development.

the results

Most of the functionalities proposed in the designs ended in the final product. The Design System was essential so that the styles and the usability could follow a high level of consistency for the users.

003-multidevices-orms
004-board-isometric
001-board-isometric

many thanks to

Jason Scott, Ryan Hunter and all Hatch Staff that gave great support on all steps and made this project possible.

more projects

QuiteoftenProduct Design, Design System

Context 365Product Design, Design System

Plans WellProduct Design, Design System

Etisalat Design SystemProduct Design, Design System, Leadership

Clube FIIProduct Design, Design System, Branding, Leadership

Good Move Dubai AppProduct Design, Branding, Leadership

C-Me AppProduct Design, Branding, Leadership

Starbucks Sales ToolkitProduct Design, Leadership