iB Cricket's Design System
This case study narrates how I created a design system for iB Cricket. I’ll share insights into our process, product design, the tools I used to create and implement the system.
Platform
iPad & Web
My Role
Solo designer — Research, ideation, visual design
Duration
Jan 2018 (6 weeks)
iB Cricket is rapidly growing as a franchise company offering cricket as a virtual reality sport, available to play for people in the franchises and they needed a technology solution to provide support to its franchisees and improve processes.
Introduction
iB Cricket needed a technology solution to bring together corporate and franchise owners for sales and operations support, streamline processes, and help the company stay on track while developing new franchises. Take a look at the franchise app case study here.
When I started this project, I realized that it's going to keep scaling with new features as iB cricket planned to introduce a few other apps for some other requirements. Considering all these needs, projections and maintaining the brand sanity across all apps we started off building the design system.
Design Process
I believe in "Great digital products are built upon solid foundations"
It was my first time working on a design system that contains more than hundreds of symbols, colors, grid systems and typography. I explored the Brad frost atomic design system principles and then took off with research in existing systems for inspiration. Design systems like Material design, Fluent, Shopify's Polaris, Atlassian, Airbnb, Salesforce Lightning Design System were all already established systems and had built great products.
I started off by listing the UI inventory focusing on the upcoming features in the system. which are the building blocks of the design system.
Colours
iB Cricket’s brand material is predominantly blue, white and black. So, to maintain brand sanctity in the upcoming apps, I chose a similar palette. It’s important that the design doesn’t distract the user from the content, so subtlety is key. Brighter colors are used to convey meaning. Blue is used for primary actions and navigational links. Red is for warnings and alerts. Other tertiary colors are for different scenarios like avatars.
Typography
UI Inventory
After establishing the basic design elements including color palettes, typography, layout and then worked up towards more complex components such as input fields, buttons, and content cards, it allowed me to freely explore visual styles and quickly see them across multiple pages.
Tools
Sketch was used to build the design system. Component prototypes were built in Adobe xd and Invision app. I used Abstract to version control the design system as well as our actual project files.
Final UI design
Learnings
When you want to build a Design system that is easily scalable and reflects updates across the system, you should work on all nitty-gritty things that actually matter.
Be organized
Distribute the components into different pages, it will be easier for navigating between the component. More it is organized, more easier to design and modify.
Defining the layers
For example, if a color has to be updated in the system and it should be reflected across all the components, then that layer must be defined as a layer style.
Naming is hard
Yes, It's slightly complex. Because there will be hundreds of layers, icons, typos and other components in the system. The naming scheme should be very straightforward and simple. That'll make it easier for the other designers to navigate and apply.
Tip: You can name the layers based on where you're using them. For example, if you're using a layer for a button background, the layer name could be Buttons/blue/active. Ideally, the structure is <Component>/<Color>/<State of the component>. It's easy to build & use and is scalable.
Nesting the elements
As I mentioned earlier, there will be hundreds of layers. Nested layers are really helpful in navigating to the desired styles. Just like symbols, text and layer styles can be nested using a forward slash in their name, which lets you organise your styles nicely in a hierarchical structure.