hexa
A SaaS consumer satisfaction management platform.
Role: Product Designer
Platform: Web App
Timeline: 2020 - 2021
Introduction:
I Joined Circle6 in early 2020 to work on Hexa, a SaaS product which aims to collect data during the entire consumer lifecycle, analyzing and delivering it in a comprehensive way.
As a Product Designer, I am in charge of analyzing and solving specific user experience issues. All of this while maintaining good communication and producing deliverables for various stakeholders (users, development team, management team, analysts and more).
Wireframes used for prototyping with users, also includes specs for the engineering team.
dashboard & details view:
Industry specific designed "Voice of the Customer" surveys are completed by the consumers. The data collected from these surveys is then translated in different metrics and indicators.
Due to the broad spectrum of user types working with our product. Hexa proposes both a high-level view (via a dashboard) and a detailed view, so that different professionals can easily find the information needed.
design process of an advanced filtering system:
defining the problem via research:
On a bi-weekly basis, I met with some of our users. In order to gather feedback regarding their experience with our product. One of the most recurring feedback was the desire to search for surveys with more precision. Based on several indicators but also on the hierarchy of a company.
I then started to meet with specific users groups, to better understand their needs. Having these interviews helped us create personas. Which were subsequently used as a tool to help define the goals and requirements for the project (along with the different stakeholders).
I began designing the first concept of what would be an advanced filtering system. Wireframes were created and tested with the users, to gather feedback and test usability.
Personas were created to facilitate empathy and communicate user’s needs & goals.
IDEATION, COMMUNICATION & TESTINg:
Wireframes served many purposes in the design process and were a vital tool for many reasons. They were firstly used as the initial deliverables presented to the different stakeholders, to communicate ideas and support cooperative ideation. Wireframes were also used for prototyping purposes with our users to test and gather feedback.
Finally, wireframes also served as a point of reference for communication of the design specifications with the engineering team.
High Fidelity mockups:
Once the wireframes were tested and approved, both in terms of design specification with the engineering team and communication with the rest of the stakeholders, the next step in the process was to create hi-fidelity mockups. High fidelity mockups were delivered to the front-end development team via zeplin, so that the developers could start working with all the information they needed to code the designs (the design were originally created in Adobe XD).
The hi-fidelity mockups followed a design system which contained the most important and most used components of the product, as well as the different design rules which had to be respected (spacing, margins, fonts family & sizes, etc...).
Part of the design system used to create the different interfaces of the product