Trukky has been working to raise the standards of logistics by digitalising the processes and facilitating the users and drivers have been focusing on the quality of services at competitive prices and supporting each shipment through latest technology with standardised customer services.
The boxed is the key factor in designing the user interface for the customers and the drivers since both had to be designed differently keeping in view their use and intellect. It is a visual language of the product truly following the idea of uberization of the Truck hiring services and fleet solutions. This new mobile technology and seamless communication system within the network of truck operators have been standardised through this design system.
The designing department at Trukky is consisting of multiple functions and teams working across the borders. In years of working at the organization, it was clear that a systematic way for guidance and leverage was required for the collective effort of the team.
Design Principles
The collaborative teams distributed around the globe especially the Product management team working in San Fransico and India needed a standardised designing system for the web and mobile app. Keeping in view the distributed network of people working at Trukky the standardised designing system – Boxed was initiated by Margeret Liu, a renowned Product designer who has expertise in creating magical user interface for web and mobile apps.
The design components have been based on Figma. Whereas the Development for the web has been completed in Next JS and for mobile app React Native has been used for product development.
Simplicity
Do not use illustrations, icons, colours or elements unless necessary. Everything has a purpose that is on the page. Use white space to create space and focus.
Consistency
Reuse patterns where ever possible, do not reinvent the wheel each time. All elements must be used in the SAME manner. Example a date display will appear differently than a date selector even though they both deal with dates.
Ease
Prioritize the most important action/flow and make sure the user can complete it in as little steps and clicks as possible. Even if this means sacrificing the ease for secondary action. No clickable surface should be less than 30×30 px
Basic Architecture of Design
We have created the Boxed as the key source of designs for all the processes in Trukky. It has been standardised to build meaningful interactions and sharing the best practices across the teams. It is a one-stop platform for the principles, templates, tools and the components for web and mobile app at Trukky.
The design architecture has been defined as atomic components that have been used to build the complex molecules. The atoms in development are used in many ways subject to the component of front-end. Each component is a description of its element based on the typo, icons and images.
- Layout
The Layout has been divided keeping the focus on the conveyance of the content of the message. Keeping it flexibility the emphasis has been made on the clarity of the impression. The division of the layout pattern has been straight, blended from the edge and rectangular, symmetrical and asymmetrical keeping the spaces flexible to the relative size.
The layout is based on the grid system using series of rows, columns and containers to align the content. It is fully responsive llayout based on the visibility utilities using the custom breakpoints ensuring the grid values at each level.
- Colour
Black, Blue and white are the standardised colour at Trukky. The product colours will always appear as full tone neither darkened nor lightened for clear visual appearance without making it too colourful. The standarddised colours used will be
#065DF6 Truck
#5612ED Ocean
#0C2A87 Driver
- Typo
The font styles used at Trukky are elegant, with mixed cases to get loud and striking and yet reduced to keep it clear in all the interfaces. Bold, Semibold and Regular font from Google Sans family has been used as a standardised font structure. The different weights used to enable the content to be structured clearly and the web pages have been showcased in a diversified ad affective manner.
The font size for tappable surfaces on mobile is 48×48. The smallest font size should be 14px for information deemed important. Things like legal text is at the minimum legal size.
- Icons
The icons indicate simple and direct information and interactions that are derived from the technical drawing. A wide range of icons have been designed and developed for all the interfaces each with two different sizes for use within the website and the mobile application.
These icons have been made from fewer elements styled with a contant thickness of 1px avoiding the filled in blocks. The icons have been assigned to a certain term and is used in the respective context only.
- Spacing
Although padding, margin and absolute positioning is used in the CSS for identifying spaces but these properties are varied with respect to the size, colour and type of the group of layout and font used. Space is all in multiples of 4px. So smallest space is 4px, then 8 px, then 12, then 16, etc. This includes the size of components. So a button size could be 36 x 256.
- Button
The buttons have been grouped into categories depicting its primary, secondary use its text button and icons also. The primary buttons are used for the most important actions on the page while the secondary buttons are designed in thin frame used for subordinate actions
Also diffrenciated by the colour.
The button size used is 36 x 256. Although the buttons have been categorised by its importance that can be applied to a vareity ofondes with its variant intention.
- Animation
The response effects and functional animation have been used to visual animation of the product. The hover effects on the buttons visually identify the cursor movement on the screen while the functional animations guide the user\ through the process for improved orientation and focusing on the small details of the product.
The animation has been used in improving the user orientation for comprehensible and flowing transition between the two views. The motion patterns on the mobile devices have been covered byb the native functions.
Design Library
The components that have been descriped above are colleted in library that is described as the master file for referring in the development process. To do the needful the design components have been build on Figma and the classes have been curated from the Figma styles sheets in React Native for the mobile app and Next JS for web designs. The library will not remain static and it will keep on growing as the individual components have been organized into general category of content, image, navigation etc.
The components have been created seperately for the phones ( Android and iOS) and the web. Although the components would remain almost the same and the code will only be written in two different styles for once only.
Tone of Voice
Humble:
Trukky is created by people for the people, therefore we are always very humble, approachable and understanding.
Simple:
We keep our technical lingo aside and simplify our words so that everyone can understand it easily
Straight Forward:
Just like our services, our words too don’t mislead or confuse our customers. Our words and language are very straight to the point. We respect your time and give you exactly what you want.
Friendly:
Before a service provider, we are humans first. Our priority is to serve you the best everywhere. It always adds a personal touch to our words, just like a friend who cares for yo
