Throughout this 9-month project, I worked closely with the Chief Product Officer (CPO), IT leads, and Product Owners to outline a roadmap for integrating and branding a new token-based Design System. This included migrating web and mobile UIs and designing new features.
I collaborated with the internal UX research team to gather research and usage data, and I designed functional Personas. My main focus was on leading and executing the rebranding of the web and mobile app platforms. This involved restructuring navigation, improving UI/UX, designing new components, and migrating screens to the new design system.
Working alongside the internal team, I integrated and documented a token-based library of components that can be connected across all design files. This helped reduce variables and avoid detached components.
This product rebranding and migration included defining the new brand's visual identity, typography, and color palette.
The founders envisioned creating a web app that would streamline all operations, accounting, team management, and quality inspections into a modular and user-friendly platform connected to the "crew app" – a mobile application utilized by cleaning operators performing on-site work.
The primary challenge lay in enhancing the existing structure and aesthetics of the products while assessing platform usability through internal UX research, considering various users from different departments (Operational Managers, Administrative Managers, and Cleaners).
The objective was to revamp navigation, streamline design team interviews to reduce the number of design files and unconnected components, and craft a memorable interface that exuded cleanliness, simplicity, and freshness.
We started by focusing on the users, gathering insights from internal business operations and the cleaning team's organization, as well as from the crew doing on-site cleaning.
Based on their feedback, we redesigned the navigation to make it easier to find everything from operations to account management.
We also looked into our design team's organization, interviewing designers and product owners, and proposed a new design system to keep everything consistent across the board. Our aim was to simplify the system and reduce the number of unconnected components.
At the same time, I worked on giving the new design system a fresh, clean look that would be applied to all existing files and new features.
Due to the presence of multiple non-centralized design systems (approximately 21 mixed and incorrectly branded component libraries), we opted to conduct thorough market research to propose the integration of a unified library called Ant Design. This powerful React-based component library is exceptionally easy to customize through Figma Tokens and offers limitless possibilities for use. We organized our efforts by dividing the tasks among designing the new navigation, main layouts, branding the components, and creating new necessary components based on the new design system.
Following the redesign of the main wireframes, we presented the new design approach to the team and tested it with some users. Once we received approval, we proceeded to create a clickable prototype with the main features, streamlining complexity and establishing reusable design patterns while migrating all the Figma files.
soniq brand experience implies values as: modularity, digital, freshness and cleanliness.
With the aim of keeping the user experience of the soniq brand independent and strong alongside Kärcher, while occupying an exclusive position and confidently placing soniq as a leader in the industry, the brand personality must be recognisable and kept consistent in the product.
The consistency of the branded user experience will ensure, along with performance and design focused on user needs, a robustness and memorability worthy of a pioneering brand in the cleaning industry.
After iterating on several versions and validating with the internal UX team, sales and CPO, I decided to reduce complexity by avoiding a visual overload of icons, renaming and grouping pages in a meaningful way and giving a fresh style to the components to help users finding contents easily.
Component Consistency: With this project we were able to achieve a great success by decreasing the number of variables and future maintenance, rebranding the entire product and migrating 40+ files
Figma Libraries performance improvement +90.48%
(variables reduced from 21 to 2 Libraries)
Styles variable performance improvement +82.31%
(variables reduced from 605 to 107)
Components performance improvement +66.67%
(variables reduced from 3000 to 1000)
With the integration of Tokens we were able to brand the entire design system in 3 working days, saving weeks of manual work.
