As the Shipwaves grew, it became increasingly necessary to maintain a consistent style and visual language across all areas of the product. With nearly over a dozen of modules, it was clear that we needed more systematic ways to guide and leverage our collective efforts.

The initiate outcome was to have a collection of reusable components that can be assembled together to quickly build any number of consistent experiences.

### Solution

The primary solution was to come up with a design system that was guided by principles and best practices. Also, to keep with documented at each step to ensure consistency and efficiency of work.

### Laying the foundations

This system is based largely on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.

This foundation loosely defined our typography, colors, icons, spacing, navigation and information architecture and proved essential for guiding our work in a unified direction.

We course-corrected when necessary and started defining our standardised components.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6m8qHmikY6hXlSTRWTslhe8upnf2%2F5EuseugPzoHtAfNuntDY%2F3176d88b-6d05-4d2a-b38a-7d7a8268c369.jpg?alt=media&token=36081141-90c7-463f-97a8-de15668fbcf1","id":"3176d88b-6d05-4d2a-b38a-7d7a8268c369","width":1440,"height":3154,"filename":"Shipwaves Design System.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### Bringing it all together

While the library was growing, we started organizing individual components into artboards containing similar items. These artboards were then organized by general category. Later we planned on create an internal website to document the system that can be used by both the devs and designers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6m8qHmikY6hXlSTRWTslhe8upnf2%2F5EuseugPzoHtAfNuntDY%2F00e92a4c-1ed5-4e6d-8b49-e15e78bf6097.jpg?alt=media&token=61e59e7d-ef22-4689-8a73-4d255b354b4d","id":"00e92a4c-1ed5-4e6d-8b49-e15e78bf6097","width":1440,"height":2843,"filename":"Shipwaves Design System 2.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Shipwaves Design System

The process of requesting new quotes for a shipment is complicated, manual and time consuming. It involves a multi-layered email process of initiating requests through email, tracking prices from each vendor and documenting all the prices in excel sheet. As a result, users find it challenging to requesting new quotes from multiple vendor and there is a need for a simple, hassle-free, and digital solution.

### Understanding of the current process

Typically, an employee will initiate request for quote by emailing all vendors through single mail. When vendor replies, they will update excel sheet with the price quoted by the vendor and will negotiate through either email or phone. Finally, they will award contract to a vendor when they are satisfied by the price.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6m8qHmikY6hXlSTRWTslhe8upnf2%2FlbO5qekyYxRNHv3mB7Ef%2F0c1ac437-e6b2-4f20-a450-8605e6881f97.jpg?alt=media&token=6dfedd5b-a62b-45e1-af31-caad79b19ed2","id":"0c1ac437-e6b2-4f20-a450-8605e6881f97","width":3712,"height":4550,"filename":"RFQ Flow Chart.jpg","type":"image/jpeg","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6m8qHmikY6hXlSTRWTslhe8upnf2%2FlbO5qekyYxRNHv3mB7Ef%2F5a8d75e2-a340-4838-b0e4-20dce133cbbc.jpg?alt=media&token=360465b0-6fab-4b41-a029-3bca320b5fbf","id":"5a8d75e2-a340-4838-b0e4-20dce133cbbc","width":685,"height":179,"filename":"RFQ Artifact.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### Pain Points

These are major pain points:\
➪ Communicating via email is tedious process\
➪ Manually track prices in excel sheet\
➪ Can't keep track of negotiations

### Insights

Based on the research and interviews, I concluded that users want to send time bound request for quotes to multiple vendors at a time and want a solution which can track the prices as well as option to negotiate price with vendors.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6m8qHmikY6hXlSTRWTslhe8upnf2%2FlbO5qekyYxRNHv3mB7Ef%2Ff50970a0-c277-47c1-9e84-9bff775cb536.jpg?alt=media&token=3de75117-febb-4662-a7bc-c3f7861650c3","id":"f50970a0-c277-47c1-9e84-9bff775cb536","width":2600,"height":1640,"filename":"RFQ Insights.jpg","type":"image/jpeg","caption":"","border":false}]}
```

### Solution

We came up with a RFQ module which will allow shippers to create a RFQ and receive quotes from multiple vendors at a time in a time bound manner. They can easily negotiate prices with all vendors. Vendors will be able to see their rank and compete with each other to get their quote approved. This helps shipper in reducing the price for the quote.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2F6m8qHmikY6hXlSTRWTslhe8upnf2%2FlbO5qekyYxRNHv3mB7Ef%2Fa61286b2-1dea-48d5-9119-9acd66bfa79e.jpg?alt=media&token=b6654e35-686f-477b-97a5-eefe759d0054","id":"a61286b2-1dea-48d5-9119-9acd66bfa79e","width":1440,"height":900,"filename":"RFQ Solution.jpg","type":"image/jpeg","caption":"","border":false}]}
```

RFQ Module

Product (UI/UX) Designer

Monsoon Course on HCI

Design emailers, landing pages, websites, print materials, social media creatives and work on front-end development of websites for following clients: Accenture, ICICI Prudential AMC, HDFC Home Loans, Bajaj Finserv, TravelSpends etc.

Web/Visual Designer

Create banners, handouts, newspaper adverts, presentations, social media creatives, website designs for following clients: Anando Milk, Watches of Switzerland, TraveLibro, Geeta Aluminium, Chennaiyan FC, SMAAASH etc.

Visualiser

Leading the build-out of the new design system, as well as the new visual language for India's leading online freight forwarder

Swapnil Rane

2023