A scalable design system for Nulab
I led a team of three designers and together we audited an existing style guide and created a design system to support scalability, accessibility, and consistency for Nulab’s website. In five months, it was documented and published on Figma for design teams and engineers.
Role
Product design lead
Teams
Nadja Kurposova (Senior product designer), Svetlana Yudziskaia (Senior product designer), Mike Firkowski (Product designer), Jay Chen (Lead engineer), Elizabeth Chien (Marketing project manager), Diana Castro (Marketing design lead), Brandi Gratis (Content editor)
Timeline
December 2021-April 2022
About Nulab
As companies grow, their teams and systems scale. Nulab started in 2004 in Fukuoka, Japan, with a project management software called Backlog that allows teams to manage tasks, track progress, add documentation, and leave comments. Their suite of products now includes Cacoo, a diagramming and templates app, and Typetalk, a messaging and chat app. Nulab’s products are used globally by teams of engineers, managers, designers, educators, and students.
Screen shots of the websites before the domain merge
The problem
Nulab had separate domains for each product which wasn’t ideal for SEO, tracking engagement, user navigation, and brand recognition. The domain merge was an initiative to consolidate the domains to improve the navigation, optimize SEO, build recognition of the products under Nulab Inc. and increase product awareness in the global market.
In 2021, the marketing designer updated the brand’s visual identity for all marketing collateral. With the new visual identity, the domain merge initiative took place. It required recreating all pages and developing the codebase. The product design team was brought on to establish the design system.
Site visitor data on the 4 domains:
Nulab.com ~3 million visitors per month. Top countries: Japan, China, Vietnam
Backlog.com ~5 million visitors per month. Top countries: Japan, Vietnam, China
Cacoo.com ~500k visitors per month. Top countries: Japan, USA, Mexico
Typetalk.com ~200k visitors per month. Top countries: Japan, Vietnam, USA
Most visitors are between 24-35 years old, 65% are male
Design principles and goals
Consistent
During the auditing phase, we found inconsistent layouts, spacing, colors and typography, iconography, and duplicate components. Inconsistencies contributed to a lack of brand identity and would also cause issues for scalability internally.
Accessible
Components and text colors are legible and pass color contrast tests. Interactive elements are obvious and have focus states for keyboard navigation. Information hierarchy and navigation should be logical and follow guidelines for best practices.
Adaptable
Nulab has 3 core products and an additional security product. Some component colors are interchangeable depending on the page and product it references. Adaptable also means that components have flexible sizes for all devices and layouts without breaking the grid.
The foundations
The product design team divided responsibilities for updating the foundations, which serve as a framework for UI components and styles for the website.
Typography scale
A new type scale for desktop, tablet, and mobile that would be used in a hierarchical order for improved SEO and consistent layouts.
Grid system and spacing
A new grid system for desktop, tablet, and mobile provides consistent alignment and flexibility for various content.
Color system
Nulab’s products have their core brand colors, which could be used for components, but were adjusted in some cases for accessibility. The color system includes grey scale, component colors, background colors, alerts, and a separate palette for illustrations.
Buttons and links
Buttons and links were a foundational part of the design system to establish colors, basic units, corner radiuses, and type sizes.
Designing for scale
We created over 20 reusable components from scratch that aligned with the core design principles of consistency, accessibility, and adaptability. The goal of a scalable design system is to allow teams and new hires to use and build on it as the website evolves. Designers can add new components and refer to the document to maintain a unified visual language. The design system can also expand as designers continually contribute to it. Our work provided a solid framework for that type of extensibility.
Reflections
After collaborating closely for five months, the product design team successfully published the design system. We delivered the foundations, components, documentation, and page comps while meeting with teams weekly to review and iterate the design and code. The comprehensive system gives the brand clear standards for design, which I’m proud to have achieved with the teams. The new domain will be launched in July 2022.