Lighthouse Kraken Design System

Product Overview

Release the Kraken!

The Kraken Design System is a web-based corporate design system built from the ground up under a lean design team consisting of myself and a front end developer. The design system aimed to provide a unified set of design standards and guidelines for reference for both developers and designers and act as an aid to streamline UI development and unify branding for all Lighthouse products.

Launched in 2023, the design system includes features such as isolated components, code demo, icon library, design usage guidelines and specifications.

Phase 1

Why a Design System?

User-Centric Focus

UX best practices have been thoroughly researched and baked into the recommended styles, component designs, and usage guidelines, ensuring that these same best practices are reflected in the product experience.

Brand Impression

Consistency in the caliber of product UI execution across the portfolio conveys a message of professionalism and reliability, which in turn instills a sense of quality and trust in the mind of the customer, leading to greater loyalty and advocacy of the Lighthouse brand.

Scale and Acceleration

Design systems are leveraged so that product teams don’t have to rethink and continually reinvent the fundamental elements and patterns repeated in much of the software. The UI solution comes together more rapidly freeing up time better spent solving complex engineering challenges and innovating.

Process

Prior to releasing any component to the Kraken Design System, a rigorous internal design and production process is followed to ensure that the component meets quality standards, aligns with design and accessibility guidelines, and fulfills the needs of Lighthouse products.

1. Component Concept Research

  • The Kraken Design System backlog was groomed and prioritized every other week, setting priorities for upcoming component production sprints.
  • An audit of all existing use cases for the component exhibited across all Lighthouse products is performed.
  • Additional use cases are conceptualized and considered based on foreseeable business need intuited from UX team involvement in current product design.
  • Design research is conducted for examples of component best practices across Lighthouse products, competitive products, other high-profile design systems, and comparable best-in-class products outside the industry for inspiration.
  • All pertinent use cases, variations, component states, and reference examples are detailed in an Azure DevOps UX Work Item for assignment.

2. Design Iteration

  • Component designs are iterated on and reviewed by the Kraken Design System team for critique and feedback.
  • Final component designs are scanned for contrast and color blindness accessibility adherence. Further adjustments to the design are incorporated if needed.
  • Supporting component usage guidelines reference documentation is prepared.

3. Development Iteration & Review

  • Component functionality and styles are developed with strict adherence to the prescribed design specifications.
  • A code demonstration screen is developed for the Kraken DS website with corresponding controls to manipulate the component use case, variations, and different states.
  • The Kraken Design System team reviews component demos for critique and feedback during development iteration.
  • Completed code components are scanned for WC3 2.1 and WAI/ARIA accessibility compliance. Code is refactored and edited if needed.

4. Testing & QA

  • Code demo screens are manually tested by the Kraken DS and broader UX team for alignment with design specifications and demonstration configuration accuracy. These tests are conducted using current versions of both Google Chrome and Microsoft Edge browsers on PC and Mac computer devices.
  • Linting is performed on all component code to ensure UI coding best practices have been followed.
  • Unit tests are developed and run against UI components, with code coverage minimum of 80%, confirming error-free tests.
  • Veracode scanning is conducted to confirm that no security vulnerabilities exist within each UI code component.
  • Deque Axe Dev Tools are utilized to test and validate UI component code against WCAG 2.0 AA-AAA visual accessibility and ARIA code accessibility standards.
  • Each finished code component NPS package is then downloaded from Azure DevOps Artifacts and installed in a working copy of the Spectra product project in a separate (sandbox) branch to validate the new component in a real-world application context.

5. Release

  • Release notes are drafted, reviewed by the Kraken Design System team, and posted to the Kraken Design System website.

Design

Style Guide

Included with the design system is a comprehensive style guide that defines the visual design standards and guidelines that are applied to the Lighthouse application. These range from the color palette, typography, icon catalog, motion, spacing & padding, and content usage and grammar.

Usage Guidelines

Each design component within the system is accompanied by a detailed usage guideline, providing clear instructions and best practices for its implementation, ensuring consistent and effective utilization across all projects.

Accessibility

The design system prioritizes inclusivity and accessibility, ensuring that people of all abilities can interact with, understand, and navigate the products developed. These range from addressing color contrast, color blindness, and code accessibility standards of practice.

  1. Color contrast: The Kraken Design System was designed to comply with AAA standard contrast ratios as defined in the WC3 WCAG 2.1 guidelines. Color contrast accessibility testing was conducted during the design system style and component design iteration processes.
  2. Color blindness: Color blindness poses a unique set of visual design and contrast challenges for the application UI. To accurately identify potential color blindness accessibility issues with the styles and component designs proposed by the Kraken Design System, we leveraged the Stark Sketch plugin which cover protanopia, deuteranopia, tritanopia, achromatopsia and blurred vision.
  3. Code accessibility: In addition to visual accessibility in the presentation of UI styles and components, the Kraken Design System adhered to best practices for code accessibility standards. These standards are based on WCAG 2.1 guidelines and the WIA-ARIA (Accessible Rich Internet Application) best practices for semantic attributes for assistive technologies. Component source code was scanned utilizing axe Dev Tools application, ensuring all components were compliant.

Development Resources

UI Framework

Kraken Design System components are custom developed for Lighthouse utilizing the Angular UI framework. Working with Angular enables the Kraken Design System to produce an entire library of lightweight UI components that are robust, modular, reusable, and designed to specifically meet the UX and business needs of the Lighthouse product portfolio.

Syncfusion

While the Kraken Design System aims to produce a comprehensive library of customized UI components to specifically support Lighthouse product UX patterns, there does exist a curated selection of components for which the strategic decision was made to leverage a licensed 3rd party library. The Kraken Design System has successfully leveraged the Syncfusion (Angular) library components and extended them to align with Kraken Design System styles and interaction patterns.

Evangelize and Adoption

When the Kraken Design System was initially launched, the team hosted a presentation roadshow focused on specific including leadership, PM’s, PO’s, and engineering teams. This helped to garner interest and feedback within the company and align the design system to upcoming product release roadmaps.

To continue engagement, a bi-monthly office hour meeting was established for team members to discuss any bugs or issues discovered during the development process, walkthrough and demo upcoming component releases, and reprioritize the component roadmap.

Adoption of the Kraken Design System was tracked through website analytics and reporting, theme package downloads, and conducting a quarterly survey with engineering teams.

Phase 2

AI Assistant

In winter 2023 during Lighthouse’s annual hackathon, the design team focused around the exploration of integrating AI as a solution to help improve customer productivity. The generative AI solution project called Kraken Assistant seamlessly integrated with the Kraken Design System and received high praise within the company.

Kraken Assistant’s aim was to provide rapid development of design system aligned UI patterns without the need of writing code.

My Role

Initiated effort and collaborated with cross functional team to create a custom design system with over 30 base components that included design specs, usage guidelines, demo website, Sketch Symbol library and Figma Component library.

Year: 2023-2024

OS: Desktop

https://krakenui.com

Password protected

Category
AI, Design Guidelines, Desktop