Projects - Aivat

INTRODUCTION

AIVAT was designed as an advanced system for the analysis of video and image with the help of Artificial Intelligence and Computer Vision. It has applications on different business sectors like the use in systems for employee safety at workplaces, productivity analysis, face recognition and city plannification among others.

GOAL

Work on parallel with the development team to deliver a product in a month and a half that includes 3 modules focused on their use in the sector of Industry 4.0 Designed as a whole to help businesses improve their handling of situations that could endanger employees in the workplace, by aiding management to oversee dangerous zones, improve productivity and check for the correct bearing of security uniform on work spaces. Mainly designed for desktop, being that the people who use it are on an administrative level, should additionally be able to be properly displayed on mobile devices (cellphones) for the use by other employees at lower levels.

DELIVERABLES

ON DEADLINE

Complete Design system. Screen designs for at least 3 different modules of the project. Prototyped screens. Userflow. Mobile adaptation of the screens.

SUPPORT

6 months specfic for major or minor changes on the system and delivered screens. Development of the rest of the system modules (2 modules extra).

PROJECT SPECIFICATION

DEADLINE

1 month to deliver an entire Design system and prototyped screens.

CONSIDERATIONS

No distracting colors unless used for graphics. Use of the entire screen space. Easy access to submenu. Sectioned by modules.

SOFTWARE USED

Figma Adobe Illustrator

DEVELOPMENT OF THE PROJECT

The project needed to distance itself from a previous design that was not entirely liked by clients, and because there was gonna be a change in the way it was handled internally by code: An opportunity surfaced to change the image of AIVAT in its entirety. There was a need to begin this with a clear an organized foundation, so a full design system was developed, from picking a font and its variations, to buttons, and even cards used for presenting alerts on the site. The palette, composed of just a few colors, was kept for the majority of the site and only bright colors were used for graphic elements that needed to bring attention to them. AIVAT is a really big project divided in five modules, and in order to tackle it, there was a need to map out how the client would be interacting with the different screens, so a userflow was carefully thought out and executed in the design.

After it the desktop site was developed parallel to mobile designs due time constraints, which also affected the project not having enough time to work on wireframes as a way to make a smoother transition between the userflow and the high fidelity screens. Three modules were delivered in the beginning, being the ones in demand by the client, and after that there was an integration for the rest of the modules, giving a total of 5 modules in the final project. To this day there’s still changes being made, mainly, additions through client feedback, and every single update follows the established design system.

DESIGN SYSTEM

DESIGN SYSTEM

The Design system was made already with the elements as components for their use in prototypes.

USERFLOW

USERFLOW

Complete userflow of AIVAT system. There is a login that leads to a screen containing each module of AIVAT. Additionally all modules are available to enter from an internal menu.

WIREFLOW

WIREFLOW

Image showing part of the wireframing for the prototype. The project is too big and cannot be shared completely due to privacy reasons.

FINAL PRODUCT

Evidence
Evidence
Evidence
  • DESIGN SYSTEMS
  • WIREFRAMES
  • USERFLOW
  • UI DESIGN
  • PROTOTYPING
  • UX DESIGN