ICANN
Design System
Role
-
Senior UX Designer
Team
-
1 PM
-
1 Lead UX Designer
-
1 Senior UX Designer
-
1 Quality Analyst
Duration
-
5 Months
Duties
I created this entire thing, I synced with the lead when I need guidance. However, I was the sole designer doing the work on this project.
Product Overview
The team was challenges with Transferring ICANN's files from Sketch to Figma, the performing quality check and repairing as needed. Through the process We saw a need for a design system to help ICANN operate more efficiently. We gathered what they had and organized and grouped the components into specific pages. Then iterated many varying layouts and came to the conclusion to what would work best for ICANN's needs.
Base Elements
We had to take a look from a 1000 ft away to understand the structure of the Design system. Thinking like a book we need certain elements to be present to bind the whole thing together, then we would need additional structure and information within the individual pages. Below are the elements that at the binding to the book!
File Structure
Using clear labeling throughout helped to identify what the user is in search of.
​
-
Change log so anytime and update was made it can be tracked.
-
Foundation Elements is the style guide touching on color, font, icon, and logos.
-
Getting started where we breakdown the basics of this design system in order for any user to understand.
-
Canvas & Annotation tells what canvas size to use and gutters etc, and how they are to annotate for final delivery.
-
Text styles displays headers, body copy, links.
-
Buttons is the rules around button in hover state and non active state.
-
Navigation & CTAs discusses the headers and footers how they are best utilized.
-
Forms & Search shows the variety of components used in order to build a form for a user to fill out. Being this action is throughout the site the component list is very expansive.
-
Tables breakdown how to use a variety of tables/ spreadsheets within the site.
-
Cards is an essential function that is populated throughout the site from image over text to image next to text and this page shows the variety and there uses.
-
Multimedia goes into details about videos and audio files as well as carousels.
-
Widgets, Social, Banners displays hero banners, social icons and there use, along with other newer less used widgets.
In the content within a page we organized that to best suit the user as well. Structuring each art board with an appropriate title and leaving the components off the board for quick access.
Foundation Elements
These elements are the design language the company has set forward. I felt when thinking about navigation how important this information is and the constant need for it to help those with minimal knowledge to refer to as well those with an abundance of knowledge to have ease of access to this information. Not only do we show the item being discussed (Logo, Font), but we want to explain how to use these instances. Lastly for ease of identification was wanted I've opted to provide clear and large board labels throughout the design system.
Getting Started
This is the breakdown of how you would create a web page. This particular set of information discusses the preferred grid system, a breakdown about the style library too. Thinking of those that may not be experience with this tool I wanted to give info on how to use it like developer needing to inspect pages. The idea is to make this accessible and easy to use for the whole company not just designers.
Board Structure
Board Structure is how I break down the specific page from components, rules around the components and use, showing samples and examples.
Components
In most design work I have down component are the back bone to the system. Making them then creating there different variations. We wanted to go one step further and enlighten the use practices. With components we still have to house them and at the top of each page is those dedicated components. When ICANN creates net new or modifies I wanted to make sure they are easy to navigate to and keep in there respective categories.
Rules
Creating dedicated rules not only explains the what it is and how it works but when and where it should be used as well.
Samples
Samples simply shows the different states of the components we are discussing.
Examples
In the examples portion we just wanted to highlight how this product was being used.
Complete Board
In the complete board you will see from left to right we start with rules and then samples. We paired these two up because they are direct correlation with each other. Then I opted to put a think blue line as a divider and to the right of that we show the examples. The division was determined because we need separation to ease with navigation. Being the relationship between the rules and samples I thought best to keep them paired and the examples are only examples some of the components can be used in different manners.
Final Design System
