Soniq Design System

Reinventing soniq's applications

My role as a UI/UX Designer & Design Engineer for soniq IQ, the all-in-one solution software for professional cleaning.

Cover image showcasing the web app and mobile study case, a snapshot of a web app feature displaying a table, search function, and date selection.

Note: This project is subject to a non-disclosure agreement (NDA). While some information can be shared, images have been modified to comply with contractual agreements.

My role

UX/UI Designer / Designer Engineer.

Team Structure

I collaborated with the Design team (Product Design Lead and 4 UX Designers), Product Owners from different teams, and Developers.

Background

In my last role, I had the opportunity to contribute to Soniq, a B2B company that aims to simplify the lives of managers and employees in various industries like cleaning, hospitality, and retail by helping them organise their schedules and efficiently manage shifts, absences, replacements, and all those related tasks that can sometimes feel like a juggling act.

To achieve this, they offer two main applications:

A web app specifically designed for team management.
A super handy mobile app tailor-made for employees.

Illustrative image displaying three Figma file covers, representing different design projects.

Our Figma file covers: everything properly labeled and with the correct status.

How I helped

During my time on the project, the company went through a rebranding process that involved changing its target audience and overall objectives. This meant we had to give the products a complete makeover, from new structures to a brand-new design language.

I had the opportunity to be a part of the entire journey, collaborating closely with both the web and mobile teams. My role was to focus on the design aspect, working closely with a multidisciplinary team to shape the new structure and create a fresh UI that perfectly met the users' needs.

Design Process

From research analysis to final UI deliverables, my primary responsibility was ensuring a smooth transition from UX to development. I actively participated in UX decision-making and workshops to ensure that our designs were not only aesthetically pleasing but also functional and intuitive.

Here's an overview of my activities:

Collaborating with Product Owners and developers to establish priorities and align our goals.
Translating research findings into wireframes that provided a blueprint for our designs.
Iterating and validating wireframes to ensure consistency, accessibility, and a great user experience.
Bringing those wireframes to life by creating polished UI designs that were visually appealing and aligned with our brand.
Handing over the designs to the development team and maintaining open communication to address any questions or concerns.
Conducting regular review meetings with the development team to ensure the designs were implemented accurately.

Snapshot of user preference screens on the mobile app, accompanied by an audit table structure that serves as a guide in defining elements for both the mobile and web apps.

File ready for development, featuring covers and descriptions for each feature, providing an overview and details for efficient implementation.

Screenshot of a Figma file displaying the exploration of different chat behaviours in various views, including side panel and full-screen.

Examples of our day-to-day work: preparing files for developers, participating in workshops, defining patterns and behaviours aligned to the Design System.

Deliverables

To keep things running smoothly, we followed a biweekly sprint approach, working closely with both the mobile and web teams.

As part of my deliverables, I provided neat and meticulously organised Figma files to the development team. This allowed a seamless collaboration and efficient translation of designs into functional products.

Examples of the table component in usage within the web app features.

Examples illustrating the timesheet feature and user search behaviour.

Examples illustrating the schedule feature on the web app.

Some of the components exclusively built for the apps.

Additionally, I took on the responsibility of developing Soniq's Design System while working on both the web and mobile applications. It was an exciting journey that helped us establish a cohesive design language and maintain consistency across all products.

If you're interested in learning more about it, feel free to take a closer look here. 😊

Disclaimer: The images in this article are limited due to contractual agreements. Therefore, they have been modified from their original form to still accurately represent the project and provide crucial insights into my work execution and methodology.