Artnet - Creating a design system for a leading player in the online art industry
Artnet.com is a pioneer art market website that started its business in 1989. Although Artnet is a very successful player in their field, they struggled with establishing good UX practices and keeping a visual consistency throughout their website pages and digital products.
They reached out to me for UI support, and since July 2021, we have been collaborating to create a cohesive design system to serve as support for designers and developers working with the brand.
THE CHALLENGE
Issues with the website’s backend setup and the low UX maturity in the company bought up unexpected limitations and promoting UX/structural changes was hardly possible. In order to move forward with the project at a faster pace, we decided to focus on reskinning the components first and tackle the information architecture at a later point. It was not an easy decision to make since we observed a lot of improvement opportunities, but given the scenario we had, that was the way we found to develop our work while satisfying other stakeholders’ needs.
LIBRARY STRUCTURE
The Atomic Design from Brad Frost was the methodology we used to structure our libraries. It was inspired by the atomic concept of particles, dividing design elements by hierarchy and groups.
We cluster our design assets in five categories: foundation, elements, components, modules, and templates.
TAILWIND
In order to fasten the coding process, the team decided to use Tailwind as a basis. Tailwind is a lightweight CSS framework to use preprocessors quickly and efficiently. Tailwind works by providing many features for CSS that help to read code and a set standard system.
OUR APPROACH
After interviewing the main stakeholders that could potentially be involved in the process of creating the design system and understanding their needs and workflows, we started by setting up the tools we wanted to use and listing a prioritized inventory.
TOOLS WE USED
1. Figma
Where we design and store our UI library
Who is using it? Designers & developers
2. Storybook
Where we store our code asset library
Who is using it? Developers
3. Zeroheight
Where we document each asset. It is also the hub that connects every stakeholder working with the design system.
Who is using it? Designers, developers, POs, Marketing team, etc.
OUR INVENTORY
DESIGN PROCESS
Following our prioritized inventory, every time I had to design a new component, I started by collecting and identifying all variants of this component.
I would then start highlighting the issues and creating new variants to be discussed during the weekly sync meeting with designers from other projects and a front-end developer.
After a component got approved, it was time to make the Figma asset work properly and publish it so other designers could have access to it.
PROJECT DOCUMENTATION
To make the project and its phases easier for everyone to understand, we created a confluence space dedicated to ADL.
COMPONENTS DOCUMENTATION ON ZEROHEIGHT
As we moved forward with the components, I took the time to write the guidelines and rules to ensure that developers and designers working with ADL could apply the components with confidence.
SHOTS FROM OUR FIGMA LIBRARY
PAGES BUILT WITH ADL COMPONENTS
To be continued…