Onboard Retail Management Platform can manage the entire sales lifecycle, from new product development and supply chain to sales development and reporting.
Scalable and customizable, the entire software suite is focused on maximizing onboard retail sales and is supported by a sector-specific ERP solution combined with world-class technology infrastructure.
Design system aims to help teams communicate and improve the design process through a collection of reusable components, guided by clear documentation, that can be assembled with designers and developers to build any number of products.
I was one of the Product Designers involved in the research, development of the design system and also redesign the Onboard Retail Management Platform. Responsible for the UX strategy and the project roadmap.
The BackOffice Platform is a 10 years old software deployed into monolithic architecture, and over the time it has grown with a lot of new features.
With the transformation process moving into microservices the product design team was responsible for designing simple and usable experience on every module.
By redesigning the modules of the platform was the opportunity to feed the design system and build new components and patterns.
The design system was developed in 2019 by a group of developers, using a developer-driven model by adopting the Semantic UI framework.
The Aileron design system was a software product developed by a group of developers using a developer-driven model. This meant that the development team itself played the role of product owner when deciding what the potential users would need. Our developers used Semantic UI, which is a modern front-end development framework, powered by LESS and jQuery. All the available components were documented on Docz which were usable only for developers. However, we lacked a unique source of truth to document and host components where designers and developers can have access.
The introduction by the Product Design team of creating a new design system was a new aspect of our process and adoption.
We went through the user experience research process to generate together the requirements. Those requirements were very important to identify needs.
A huge part of our internal research consisted of interviewing stakeholders. This research method is a valuable tool to start the design process by focusing on extracting information in the main areas like - User Needs, Business Goals and Technical limitations.
After gathering large amounts of data and organised them into groups based on their relationships, we started seeking the best Design System tools that would work for both designers and developers teams. Finally, we received buy-in from the senior management team to proceed with the InVision DSM.
As a Team, we decided that the winning solution would be to keep the Semantic UI framework as a base and respect the hard work that Dev team put together in Docz. InVision DSM gave us the possibility to merge Docz documentation into the new world. Unfortunately, Semantic UI didn’t display the components directly in Sketch file, this is why we recreated the most used assets from Semantic UI into our sketch file and we moved those assets into InVison DSM with full documentation.
Another step was to conduct the UI Audit form the existing Design System created by developers. We analysed all overlaps within the components and pattern libraries.
When conducting our first Heuristic Evaluation of the existing Onboard Retail Management website, we realised a lack of usability and consistency issues across the whole platform.
Another workshop we conducted with our stakeholders was the Lean Canvas, it helped us identify problems and solutions. It captured all the important criteria that we have assumed within a 1-page document that is easy to follow by the team. It helped us also to gather and build ideas about the product.
We identified two Proto Personas after the workshop, it was our goal to put a face to our users and use them throughout the Module redesign project as a reference to make sure that any decisions we make will add value to them.
To give us deeper insights into our users by entering their world and understanding the emotional drivers that affect the user behaviour we conducted an Empathy Map Workshop. We tried to uncover the behavioural attributes in the context of the different situations. What is the user doing? What have they just done? What are they thinking and feeling? How does that affect what they do next? Both workshops were very successful. We were able to gather the user experience skill set of the team involved and create a believable live user environment. The maps showed a common understanding of the user's needs.
Our Design System is still an ongoing project and there is still a lot of research needed within the modules to make sure we solve the existing problems.
We decided to feed the Design System every time we need a new component by redesigning a new module within the Onboard Retail Management Platform.
The design system needs a constant reference, particularly when operating within the teams and when new people join the company.
With the right dynamic, design systems can help reinforce and value a proper design thinking mentality across the organization.
It is a great experience to be a part of this engaging and growing project.
