.png)
.png)
The tech startup company based in South Korea, 'Toonsquare', launched their SaaS AI webtoon content creation service, 'Tooning' beta version, just a few months before I joined as a product designer. At that time, the initial product was designed without a design system and UX strategy. So the company was struggling with inconsistent design, we decided to build a design system and UX strategy that can deliver Tooning's design point of view.
.png)
We reviewed all the pages of the existing UI and unified UI components such as models, menus, and buttons. In addition to this, the style guide was established - colors, fonts, and icons were unified. During the process, we established regularity and design rules unique to Tooning.
.png)
We integrated functional components and their usage to increase efficiency in subsequent design and development. We documented this and then applied it to rapid design decisions.
.png)
We made efforts to implement consistent design languages for better communication between designers and developers.Using Figma's component naming structure, we organized element naming in the following order.
.png)
We also simplified naming through the use of intuitive abbreviations - e.g. button - btn, component - comp.
The first step in the design system was to build a spacing and grid system. We built a sense of rhythm through spatial system use and designed a visually organized UI. We used the 8pt spatial system and formed the grid with a 12-column structure for web and a 4-column structure for mobile. Grid systems were considered with reactive and flexible column division.
.png)
We used NotoSans as the main font because of the available variations, but we used Roboto and Apple’s System Font together for multilingual service and device-specific support. The font uses a line interval of 1.5x and font size changes in increments of of 4px.
.png)
We unified the style, color, and size of icons used in existing systems. The basic icons uses the open-source, line-style icon, Ionicons. Other additional icons were designed to unify the thickness and style of the basic icon style.
.png)
We adjusted the secondary color and gradation focusing on the three brand colors of Tooning. Brand color was mainly used for CTA, active status and emphasis. By defining color roles and unifying colors, the Tooning Service UI was able to maintain the hierarchical structure and visual consistency of information.
.png)
We developed Tooning's components library. The library includes reusable interface elements, such as Buttons, Input Fields, and Menu Bar; combined components to create patterns, such as the Top Bar; and a resources list for Editor Pages to reuse patterns effectively. The image below is an example of Tooning's UI components and patterns.
-
.png)
-
.png)
-
.png)
Tooning's UI, which had a variety of existing round values, sizes, and colors, was changed to an organized UI with a unified design language, brand kit, and components and pattern library through a design system.
-
