De la Rue Packing Screen
Design System
Design System & Interaction Design
The Client
De La Rue is a UK-based company that provides stamp printing services for governments and postal authorities worldwide. With a history of over 200 years, De La Rue offers secure and innovative stamp design, production, and distribution services. The company's expertise and advanced security features are trusted by postal authorities in more than 40 countries.
The goal of the project was to evaluate and enhance the digital service provided to clients, while developing a design system. In order to accomplish this, we cantered our attention on one of De La Rue's services as an illustration: the complete process of obtaining authentication stamps, also known as the "Certify" system. This allowed us to recognise the components that were necessary for constructing the design system, as well as the specifications for designing each individual element.
The project was executed in an agile environment, allowing for seamless collaboration between designers and developers. To ensure consistency and efficiency, components were meticulously documented using a visual tool like Figma. These documentation files provided comprehensive details about the components, including variants, sizing, and individual elements within each component. To cater to Arabic-speaking clientele, the documentation also covered right-to-left designs.
The Problem
The Process
The Client
The Problem
The Process
Once the components were documented, the development team utilized Storybook as a platform to bring them to life. Storybook allowed for interactive development and provided a centralized space for developers to work on the components. This streamlined the development process and ensured that the components were implemented accurately.
To further consolidate the documentation and provide a comprehensive design system, zeroheight was employed. The design system incorporated not only the use cases of the components but also showcased them in an interactive manner. Moreover, the system documented accessibility standards associated with each component, serving as a valuable checklist for future users of the system.
Please see the design system below.
Once the ordering and approval processes were designed for the system, attention turned towards developing a digital service that satisfied the demands of stamp packing personnel in Malta. To achieve this, the existing system was evaluated, and discussions were held with all accessible packing staff and product owners in the enterprise to obtain a comprehensive understanding of the business rationale for the procedures. A preliminary flow chart was generated to grasp the particular phases, including duties, personnel, and location.
The primary challenge for both the employees and customers was that the packing screen in the system did not meet the diverse requirements for packing formats, delivery requirements from shipping providers, and import guidelines from different countries. As a result, the productivity of packing staff was affected, as they had to refer to the provided documents to look up various packing requirements, manually copy and paste packing codes in and out of the system, and customer service staff had to deal with a large number of complaints and re-packing endeavours. The subsequent packing regulations needed to be adhered to.
Once all the regulations were confirmed, I proceeded to revamp the packing flow entirely. To minimize errors, the user would first land on a dashboard, from which they could either continue packing or start a new packing process. If they initiated a new packing process, they could combine multiple orders with the same specifications. This would then take them to the packing stepper, taking all the selected requirements into account. Afterwards, the user would review the packing on an overview screen and could print all necessary documents for shipping and import.
Addressing the packing stepper was a critical concern, as it was essential to enable packing personnel to pack items as efficiently as possible with all necessary information displayed on the screen. This was successfully achieved through the above stepper, which ensured that the appropriate number of stamps was packed in compliance with the formatting, shipping, and import requirements. Although it was just one aspect of the work carried out for Malta, it was one of the most transformative ones.
For each user story, one page within Figma was created which included the workflow that showed the separate elements within the screen as well as which target would need to take to be actioned in order to progress and return to other screens. Underneath that, all the pages with components represent each instance in the flow.
