Overview
Sonavation designs and develops the industry’s leading ultrasound biometric fingerprint sensors for secure authentication into smartphones, tablets, wearables, automotive and other connected devices.
We had to create a product demo tool and its characteristics for the sales team. A desktop app that visually represents the fingerprint reading interface.
My role
Working at Globant, I was part of Sonavation Sales Demo project with a remote team of UX designers, product designers and developers based in Argentina, Brazil and United States. The project was organized by sprints, with daily status sync and weekly progress updates.
With many designers involved in the project, the creation of a design system with its documentation and manual was essential.
As lead visual designer, I was able to guarantee design consistency defining and updating styleguides and libraries. I was also in charge of supporting engineering team providing assets and ensuring a correct implementation.
Tasks
• Styleguide definition
• Library maintenance
• High fidelity designs
• Interactions
Tools
Sketch
Invision
Photoshop
Slack
Illustrator
Jira
Principle
Zeplin
First drafts
The brand didn’t have a defined visual style. They only had a website, but there were no guidelines.
We propose three different designs as a starting point.
Light style
Dark Console Style
Tech Dashboard
Approved version
After several iterations, concepts of each of the initial sketches were taken to define a final version.
This laid the foundations to start working on the styleguide and different UI elements.
Wireframes
We worked together with Sonavation engineers team to create the application structure.
Styleguide
The styleguide was created taking atomic design concepts.
First: atoms were defined.
Then atoms were combined to create molecules and organisms. One of the advantages of using atomic design is that it maintains a consistency and unity since all elements are aligned to the defined aesthetic. Another very important advantage is components reutilization, to create new pages very easily and quickly
Interactive prototypes
The project was divided into several stages and by design sprints. To present the sketches in an interactive way, navigable prototypes were created on the Marvel platform. This tool also allowed us to receive feedback in the best way.
Assets delivery
We worked together with developers providing all the assets to carry out the development. Zeplin tool was used to export components directly from sketch. This same tool was used to receive comments and feedback from developers.
Components library
A component library was created to speed up the creation of different sections. Through symbols overrides any designer in the team can create new pages really fast, keeping styles and aesthetics.
