Crafting Elegance: The Journey of Building a Design System for Tiffany & Co.
UI Inventory
Design System
Task
Laiba Sarwar (Me)
Karan Vora
Zhixi (Cici) Lin
Michelle Huang
Team
2024 (3 months)
Duration
Figma
ZeroHeight
Tools
My Role
UX Designer
UI Designer
Project Overview
Founded in 1837, Tiffany & Co. epitomizes luxury and elegance, setting the standard for fine jewelry and timeless design. Although Tiffany & Co. provides customers with clear information on the collections and ways to purchase their elegant pieces, the platform lacks an established design system.
Therefore, our team embarked on a mission to enhance the digital experience for users by creating a bespoke design system that leverages Tiffany & Co.'s iconic brand identity. Through meticulous research and collaboration, The Blue Box design system was created and captures the essence of Tiffany & Co. while ensuring consistency and accessibility across digital platforms.
From the signature Tiffany blue to refined typography and layout, every element of the design system reflects the brand's commitment to excellence and innovation. With a focus on user-centric design principles, the Tiffany & Co. design system aims to elevate the digital experience, instilling trust and confidence in users as they engage with the brand online.
Our pitch to the acting audience of Tiffany & Co. managers, designers, and developers. (Left to Right: Laiba, Michelle, Cici, Karan)
THE PROBLEM
Why might Tiffany & Co. need a design system?
To maintain the platform be consistent with its branding throughout the platform.
Tiffany & Co. needs a design system to maintain the consistency and integrity of its brand across various digital platforms. As a company renowned for its timeless elegance and iconic blue hue, Tiffany & Co. must ensure that every digital interaction reflects its esteemed brand identity. Without a design system in place, there's a risk of inconsistency in visual elements, such as colors, typography, and layout, across different digital touchpoints, which could dilute the brand's image and diminish user trust.
Moreover, as digital experiences become increasingly important for customer engagement and sales, having a unified design system allows Tiffany & Co. to deliver a seamless and cohesive user experience. By streamlining the design and development process, a design system empowers Tiffany & Co. to efficiently create and maintain digital assets that align with its brand values, ultimately enhancing customer satisfaction and loyalty. In essence, a design system serves as a strategic tool for Tiffany & Co. to reinforce its brand identity and elevate the digital experience for its discerning clientele.
OUR PROCESS
In order to address the platform' inconcistencies, we created a design system by following these three steps.
1.
To find the inconsistencies in the brand and website.
Website Inventory & Audit
3.
For a more efficient way of understanding the kit, there needs to be a clear knowledge base for the Tiffany team.
Documenting the Process
2.
How can we identify the patterns and create a more cohesive kit?
Creating the UI Kit
WEBSITE INVENTORY & AUDIT
We conducted an interface inventory and identified inconcistencies to be aware of.
View The Full Audit Here
By following Brad Frost's process and methodology of creating a UI inventory, we found several different variations for each category of typography, buttons, and icons.
We thoroughly went through the whole website and created screenshots to see how each element within the overall categories looked and made a detailed audit that was organized to see the variety of components and understand the platform's inconsistencies and patterns.
We also evaluated how the platform and components are tested through accessibility guidelines.
CREATING THE UI KIT
After seeing the patterns, we consolidated the components and created a more organized and cohesive design system.
Unique Branding
Visual elements such as logos, colors, typography, and imagery should reflect the Tiffany’s personality and values consistently across all platforms and touchpoints. We strive to show a unique identity, combining elements of tradition, innovation, and luxury to create a cohesive brand experience.
Consistency
We use consistency in the Tiffany design system to ensure that all visual elements are aligned seamlessly. We also created reusable templates and design components that adhere to brand guidelines.
Inclusive
We prioritize accessibility and inclusivity in our design systems by ensuring digital products accommodate people with disabilities. This includes features like image descriptions, easy keyboard controls, and screen reader compatibility.
Colors
Tiffany & Co. uses an elegant serif font like Sterling Font by Hoefler Type Foundry coupled with a san serif font like Santral Font, we also decided to use two fonts in our design system. Due to licensing, we replaced these fonts with similar fonts like Abhaya Libre and Inter for ease of use and accessibility.
Tiffany & Co. originally used many different styles of these two fonts without a clear structure. Therefore, our design system differentiates by providing categories of heading, title, paragraphs and more.
Typography
Cards offer bite-sized pieces of information or actions centered around a single theme.
Tiffany & Co. likes to feature specific items and types of jewelry. Due to that, there has to be a consistent card style with all the information needed in a clean and clear layout.
Therefore, we provided Tiffany' iconic heart symbol on the top of the image with a description that uses type hierarchy as well as a secondary button to link to learn more about the luxury jewlery.
Icons
The Block Section provides a collection of pre-designed and reusable UI components that can be combined to create a variety of layouts for different purposes.
All the Blocks consist of various components assembled to facilitate direct usage for users, eliminating the need for individual creation.
REFLECTION
What were my main takeaways from this project?
Buttons
What did I learn throughout the project?
Layout & Variable Creation
My figma skills clearly improved by the end of the project since I was able to label each component and make them into variables and assets so that the team and designer can use it for later.
Collaboration
Creating a design system with three other people can be a little stressful when you are a perfectionist. However, by splitting up certain parts and creating boundaries while being communicative, the project went by smoothly.
What would I have done differently if I had another chance?
Analysis
Due to time constraints, the team decided to jump into the creating a system part before analyzing the audit and making decisions as a team. If we were able to do that, the band and forth during the consolidation process would have been minimized and no longer a challenge.
What were some challenges that I saw and how did I fix them?
Consolidation
Auditing the UI of the platform is the easy part but making decisions on what stays and what doesn't is the biggest challenge ever. However, I decided to go piece by piece and review how other design systems categorize their buttons and typography which helped me get the labels done so that I can move on to the consolidation part.
FULL REDESIGN
How can all of these components come together to build Tiffany & Co. home page in a seamless way?
Cards
KEY PRINCIPLES
What are the brand values that we incorporated into our design system?
Carousels
To match the branding and have a clear and intuitive call to action button, we made very specific variations that can be used for any purpose and be consistent at the same time.
There are two main types of buttons, one that is primary and the other secondary. The primary button can be used in banners and big cards while the secondary buttons can be used within descriptions. The main difference between the two is the black outline.
Each button also has different states, the initial just being the description and the icon. The hover button provides a thin turquoise line underneath. Lastly, the Clicked has a slightly thicker line.
Since each section of the platform has specific dimensions, the buttons also need to be flexible it, thus providing the small, medium and large sizes.
Blocks
Our design system uses a curated color palette to create a consistent and stylish look across your application. Each color is carefully chosen to evoke a specific feeling when used on different UI elements.
Tiffany's signature Turquoise color is the main color and with it, there are other shades to support it and add hierarchy to cards and the overall platform.
The light grey and charcoal also add to the elegance, especially through its selected imagery and banners.
After all of the hard work of consolidating elements and creating the system, it is clear that documenting the process and specific parts of the system is the best way to communicate how important each aspect of the project is.
ZeroHeight was the best platform to document the system since it provided a clear structure and we were able to link our figma components just by sharing the link.
For each section, we made sure to provide a small blurb, an overview, accessibility, and usage section so that all of the reasoning and examples can be clearly found by any developer, designer or manager.
The Carousel component provides a user-friendly way to horizontally navigate and view a sequence of content blocks. This versatile component is ideal for showcasing multiple images, products, testimonials, or any other content that benefits from a sequential presentation.
DOCUMENTING THE PROCESS
Every design system needs a proper documentation to help all of the designers and developers understand our choices and decisions.
By using the UI Kit that we have created, designers were able to replicate the homepage with no difficulty and in just five minutes!
Each icon is given a clean 1pt stroke to reinforce the elegant design that Tiffany & Co. showcases throughout its brand.
With each icon having variations of size from 12px to 32px, the different platform devices and readability have been taken into account to implement Tiffany's inclusivity practices.
Each icon also has the option of being outlined or filled for interactive and hover purposes.
