Hello.
My Name's Calvin.

I’m a product designer growing Enchanted Network and creating an Internet of Rules with the Xalgorithms Foundation.

I work remotely from Frog Creek Farm, in beautiful Western Washington.

Let's chat.

Design System Wins

Three of the core Xalgorithms Foundation outputs are applications. While the applications are the core focus, there are also websites needed for working groups. In order to establish a cohesive identity across multiple applications, I decided a design system was needed to consolidate the components and ensure consistency.

I created a design system intended to ensure best user experience across applications and websites, streamline the design process, and facilitates front end development tasks. I viewed meeting the needs of users, designers and developers as crucial to the success of this project.

Ensuring Best User Experience

To ensure the best user experience across applications I considered issues of accessibility, multi-lingual functionality, and brand conformance. This draws directly from the intended impact:

Increased capacity to draft, publish, access, audit, and operationalize normative rules by people (and machines)

From the impact statement its clear that not only must the interfaces make rules accessible to non-technical people, it is also critical that rules are accessible to people regardless of ability, or language preference. This influenced my decisions, particularly those regarding type choice.

fira in use

I selected Fira Sans (and Fira Code) for use in the component library. Fira has high legibility, and has undergone significant user testing by the Mozilla Foundation to ensure readability on screens. Importantly, Fira is an open source project with an active group of contributors maintaining glyphs across alphabets. This means that Fira has exceptional multi-lingual support, that includes Latin, Hebrew, Arabic, Cyrillic, Devanagari and more.

color makeup

When making color choices, I selected colors to direct user actions, support the brand identity, while at the same time supporting users regardless of vision status. This meant considering issues of contrast and conducting usability testing across the color library. Accessibility testing was accomplished using xyz application.

preview of design system

Finally making the best possible user experience requires correct dev implementation. For this reason, I paid special attention to documentation to ensure compliance with accessibility standards, such as including image alts.

Streamlining Design Process

Creating a dedicated design system streamlines the design process. In Figma projects it is a simple process to import the library to begin building a high fidelity flow once the wire-frame stage is completed. This ensure consistency when collaborating with other designers. Also, given the fact that this is an open source project, easy designer on-boarding is a natural way to bolster collaboration.

figma library preview

Facilitating Dev Work

My final goal was to facilitate development, streamline prototyping, and create a shared sense of dev objective through a cohesive brand framework. Since the Xalgorithms Foundation website and the Rule Maker prototype are built in react, the natural choice was to create a react component library. I built a minimal component library containing all the atomic components of the design system. I deployed this as an NPM package for ease of implementation.

$ yarn add xf-material-components
// App.js

    import Logo from 'xf-material-components'

    function App() {
        return (
            <div className="App">
                <Logo />
            </div>
        );
    }

I decided it was also important to maximize flexibility by not assuming use of react. To help ensure effective design across frameworks, I but together a basic css file containing the atomic design elements.

// index.html
    <head>
        <link rel="stylesheet"
          type="css"
          href="xf-material-components/config/rootStyle.css">
    </head>

Similarly, I built a simple hugo template to facilitate documentation. This is also how I documented all of the elements of the design system. You can try out the theme by starting a new Hugo project.

$ hugo new site quickstart

Next, add the template as a submodule.

$ cd quickstart
    $ git init
    $ git submodule add https://gitlab.com/seeddisburser/xf-material-theme.git

Include the theme in the config.

$ echo 'theme = "xf-material-theme"' >> config.toml