"Divided in 4" Method - How to create intelligent components.
This article will give you an overview of my design system work method and procedures. During my ten years of experience, I found an easy work system to create products designed for developers; we can call it the "divided in 4" technique.
For the last two years, companies have transformed from working "freestyle" to working with design systems, providing an ideal way to create more consistent and easy-to-manage products.
In this article I will not explain how to build a design system, I will focus on my processes for creating one component within a design system.
Before we begin, it is essential to point out that the software I am working with is Figma, the primary software for design systems and Design in general today.
- Target Audience & Competitors — Research.
The process's first step is the target audience research. Assuming the company has a research team that collected the information, I'll ask for the data. If there is no research team, I recommend using Heap, Google analytics, or Contentsquare to gather the data about the target audience of the interface in question.
Adequate and thorough research will help understand the interface users' needs today and create the KPIs. First, however, it is essential to know that each of those KPIs represents a problem that we, as product designers, need to solve.
For starters, I will divide the KPIs into pages, components, and atoms to build a road map that will accompany me at the micro and macro levels of the process. For example, if I start with the home page, I'll list all the components needed for this specific page, such as Global AD, the Top navigation bar, the hero banner, filters, grids, and more. Then, after listing all the home page components, start working on the different parts individually.
Side note: if you're an employee, you will probably get tickets from your product manager and the creative director split into sprints; etch sprint usually takes two weeks. Those tickets will contain briefs.
Brief component example:
Navigation menu and Global AD (re-make).
Let's start by checking the existing site (using Heap, Contentsqure, and Google Analytics); and try to understand the journey our user goes with our nav bar; it will help me know what to look for when I start the competitor's research.
The second step is competitor research.
I will find out the direct and indirect competitors of the business with the help of Similarweb and others; (if you are an employee, you will likely get this information from your managers). Then, the next step is to go to all of my competitor's sites and check their "Top Navigation menu and Global AD." Lastly, I will gather all the information to help create my next step (Experience & Design) options.
2. Experience & Design
So after I've gathered the information, I can start working on the "Top Navigation menu and Global AD" design options.
To begin working on Ecom, I will open a design system file on Figma and create all my components in this file; working with them in one place during the process is crucial from day one.
The design system file will contain both atoms and components.
Atoms are the ingredients of the Design, colors (brand*), fonts (brand*), spacing, grids, buttons (organism*), icons, and all the other items that I want in my components.
So, for example, after I enter the atoms into a design system, I can use them to start and build small components like a categories menu, search bar & icons, and global ad, and more.
Eventually, I'll combine them to create the "Top Navigation menu and Global AD" significant component.
*organism — a small component that combines between 2–4 atoms.
*Brand — We usually do not have much control over colours or fonts because they are set at the brand level.
Let's start with the following:
I'll open a new file with a few pages: Storage, Discovery: Target audience research, Competitor research, Experience & Design: Mobile 375x812, Tablet 768x1024, Tablet 1024x768, Desktop 1280x720, and Prototype for each of them, and VQA.
After that, I recommend meeting with representatives from the content, accessibility (ADA), user testing, and development (back and front) departments and, of course, a product manager and a creative director. Present to them all your research and ask questions. Usually, the discussion will be created in this room afterward, giving rise to many ideas and improvements backed by technical knowledge and data. After this meeting, you will return to the drawing board! You may have to do it a few times, but it is the most significant part of our work, so enjoy it!
Tip: Always start from a mobile device; because most internet usage today is done from mobile devices, the mobile device has become more critical in the process. Also, because mobile screens are much smaller, if you could solve the problem on the mobile device, it would be easier to solve it later on larger screens.
I will check the Navigation bar structure of my competitors and try to understand it as much as possible. Which elements it contains, where the details are located and why.
In this case, most of the Navigation bars we see on mobile commerce sites are similar. The menu icon is located on the top left side, the Logo is centered, and on the top right side, the cart icon, profile icon, and sometimes additional icons such as location (if there are physical stores) and more. Of course, the Navigation bar can be composed differently in other interfaces like dashboards, Apps, or websites but not E-commerce ones. In addition, I will check movement and transitions: how it will open and how much it will open before I start the Design. In the end, I always present three design options — the first one is basic and functional, the second one is a bit more advanced, and the last one is the most advanced (Probably more complex than the functional one). But the functional one will probably be the MVP solution.
Usually, at that point, I will collaborate again with the other departments, the creative director, and the product manager so we can agree on one option to go forward with.
Right after, I will create a prototype for a usability test for several users from my target audience (I use the website usertesting.com). After the test, I will be able to know if the component works or not and, if not, why.
Then, I will fix things according to the usability test and do the same process several times until no more corrections are needed, and my users fully understand the narrative.
Now, let's create two prototypes, one presentation prototype for the stockholders and management and one for development.
It is recommended to work closely with the development department during the process. At the end of the development process, I'll review the interface, check everything against the approved Prototype and send corrections.
Good Luck with your next system!
Itamar Shamrik, Youngsters.Experience (creative house). Design & development interfaces, stop-motion short films & marketing, and decor.