Creating a design kit for a luxury jewelry business

Virani Jewelers is a family-owned business that specializes in luxury Indian jewelry made from high-end diamonds and gold. Towards the end of 2017, Virani Jewelers began to implement a completely new rebrand. With the rebrand the company wanted to modernize the website and increase its appeal towards Millennials and Western tastes. Although new print materials and packaging helped guide the design of the website, detailed rules for creating new pages had yet to be established. The design team lacked a single source of truth from which to reference.

One of my projects as UX/UI Designer was to create a design kit in Sketch. Before I came on board, each page was being designed without any true templates, and there was no system for ensuring that everyone was using the same components. Inconsistencies would be transferred over from file to file, leading to alternate padding, font sizes, and colors, etc. Developers were confused when they would receive two pages in a flow with slightly different styles—in which case they would choose one style or code both styles, leading to bloated CSS. Different interactive states weren’t designed and developers would either have to wait for a designer to design the state, or create their own version.

Going forward, our team recognized that creating a 1.0 version of a design kit was necessary—both to save time and establish consistency across the site. I helped clean up and compile all the design files, identifying the many patterns and inconsistencies. I reformatted pages so that each component drew from a master components sheet. I also wrote the rules that would guide designers and onboard future designers.

I started with two key pages first, the Homepage and the Product page. Everything needed to be designed in a very modular way. For instance, a contact module, needed the ability to be easily placed on most pages. This made the design flexible so that components could be added and removed on a case by case basis, determined by the product, season, category, special promotion, etc. Everything was built on a 12-column grid, and combinations of components could be easily updated using the Shopify CMS by anyone on the team.

Once pages were finished they could be used as templates for future designs. Emphasis was placed on making components as reusable as possible to save time for both designers and developers.

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.