The first version of our digital freight platform Shipa Freight was built in six months. Our design agency did a great job with the initial design, giving us something that looked professional and enabled us to go live quickly. Once we validated our business model and committed to funding the business, it was time to get more serious about our brand. With the help of a branding agency, we defined the core elements of our brand, created logos, and developed brand identity guidelines. This was a good start, but it did little to help us with the many design decisions we needed to make when building our apps.
Our head of UX/UI, Atishay Goyal, took on the assignment of creating a design system that would let us build UIs quickly, consistently and professionally. Based on Material UI, our Gateway design system includes over 200 resuable design components that form the basis for our web, iOS and Andriod app designs. It consists of:
- Atoms – Basic design elements like typography, color palette, grid, and shadows.
- Molecules – Simple composite elements like buttons, form controls and notifications.
- Organisms – More complex structures like navigation elements and content organizers.
Why did we use Material UI? It’s well established, very extensive, and well documented. We didn’t have a compelling reason to build a design system from scratch. And it was customizable enough to express our brand effectively.
It’s now been in use for a few years and we see the benefits of it every day. While we need to tweak it from time to time, the cost of doing that is small compared to the value we’ve gotten out of it. For our designers, they can focus on the unique user experience requirements of each part of our apps rather than the common design patterns. For our development team, they can implement the common elements once and reuse them across the site. For our business, we present our brand consistently across all platforms. And for our customers, they have a consistent experience across the whole user journey.
While I was a believer in the value of our design system before, I was even more convinced when we started supporting white label versions of our platform for partners. This required us to tailor the fonts, colors and logos of our site for each partner, quickly and at scale. Because of the modularity of the Gateway design system, it lended itself to cloning and modification in a way that is easy to manage. The result: beautiful partner sites reflecting their brands yet with all our product functionality, requiring minimal maintenance on our part. That’s a win for all.