Design kit for site redesign

UX/UI Designer

Research, wireframes, information architecture, prototyping, high-fidelity designs

The problem

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.

The process

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.

Instructions and best practices for how to use the design kit.
Core visual styles
Each interaction with a component was designed to show how the different states would appear.

A modular approach

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.

Homepage design

Working from page templates

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.

Collections page
Product page
Jewelry page
Category page
Mobile versions of each page were also part of the design kit.
Previous project
Next project