Arch Systems Design System



Project Summary (TL;DR)

Problem: There were design inconsistencies across the Arch's products and internal tools such as multiple typography, colors, and UI components.

Opportunity: As first designer at Arch, I took the initiative to organize and standardize design to improve consistency and brand image through a design system -- documentation, style guide, and UI components.

Impact: Completed a basic system that improved organization and consistency for design across the company


Project Brief

I joined Arch Systems as their first designer (intern). There were inconsistencies across the mobile app, web app, and marketing website and there was a need to improve consistency across all products.

Visit Arch System's website here.

*NDA cleared with Andrew Scheuermann, CEO and Cofounder of Arch Systems

Details

  • Tools: Sketch, Google Docs, Google Sheets
  • Timeline: Jan - Dec 2017
  • Project Type: Internship
  • Role: Designer
  • Skills: Design Systems, Documentation

Goals and Team

Arch need a simple design system with proper documentation and easy-to-iterate assets solves the problem of inconsistency. A library also benefits both designers and developers to rapidly prototype new designs to production without redesigning/recreating similar designs.

I implemented Arch's design system from ground up with frontend engineer, Vanielle Le, for the frontend technicalities.

image-1

Goals for design system:

  • Improved consistency enhances overall UX for Arch’s products reducing confusion and better branding.
  • Design: Organized system with for efficient prototyping through resuable components.
  • Engineering: Reduce UI decisions.

Research

I picked up the best practices from B2C and B2B companies such as Airbnb, Facebook, and Salesforce. A bulk of my learning came from reading off Medium — a completely overlooked, rich treasure trove of knowledge.

Reading list:

Documentation and Organization

Documentation allows others to understand your thought process and continue work you left off. Previously, there was unorganized file management and I was the only one who knew where everything was located. That mess can snowball when scaling up and result in frustration and a mountain of backlog. Good documentation made collaboration easier and efficient, and prevented that catastrophe from occurring.

I organized the company’s design folder with a naming convention — two numbers, underscores, and date for specific files and folders as shown below.

image-1

The next step was to document the process and standardization of the system. A Google Doc was made as the single source of truth for design-related information.

image-1

Design Philosophies

Arch’s design philosophies are to be in place in mind of the values that best suits the company and the way design should be implemented.

image-1

I applied Brad Frost's Atomic Design Theory into Arch's design system and inspiration from Airbnb’s ‘evolving design ecosystem’ and applied it to be adaptable and flexible.

Style Guide

Arch engaged Jeff Withers of Cartisien, to design the logo and the initial website of Arch. While he did an amazing job with the foundations and branding of Arch as well as inspiring the work I did at Arch, there was no standardized style guide for the team to follow. With Jeff’s prior work, combined with the company's mission and vision, I improved the existing style guide.

Color Palette

I kept the primary and secondary colors the same for branding and experimented with an accent color for functional use. Applying Color Theory and Color Psychology, I picked other colors to invoke trust in our brand, security as a whole, and robustness of our systems.

  • Base Color Palette for branding,
  • State Colors for ‘Danger’, ‘Warning’, ‘Info’, and ’Success’ states
  • Shades of Black and Whites
  • Gradients

image-1

image-1

Typography

Working on type was a challenge for me as the choice of type gives the user the feeling that they are using Arch’s products. The typeface that Jeff chose for the marketing website was Montserrat and while it looks gorgeous on Headers and when used uppercase, a lightweight Montserrat has a larger kerning compared to regular Sans Serif typefaces. The dilemma was then to either replace Montserrat or pair it with another typeface.

I did not dare risk matching Montserrat with a bad typeface as rebranding multiple times would be disastrous. I searched for typefaces that were open-sourced with multiple weights for hierarchy or emphasis. Changing the typeface was too major a move and I was not confident to make the move so I chose 'Open Sans’ as the paired typeface. I made use of the strengths of each typeface - Montserrat being strong and distinct for headers, and Open Sans for body text for functional use and being easy to read.

image-1

Brand Guide

In effort to enhance Arch’s branding, I worked off previous Jeff Wither’s succinct and easy-to-use logo usage guide as inspiration to create a more comprehensive branding guide. As a result, I developed a poster which includes colors, typography, best practices, logo usage, and clear zones as a form of reference for any branding-related questions.

image-1

Grid System

I adopted an 8-point grid system provides a more consistent UI and designing with one is more developer-friendly, reducing the amount of time fiddling with decorations and time to code. It also brings about functionality where it can scale for responsive multi-platforms. I adopted the ‘Soft Grid' as it is more flexible where the elements are positioned relative to one another as opposed to have a rigid structure that the 'Hard Grid’ method has.

image-1

UI pattern library

Arch had differing UIs across all its platforms. I did an UI inventory audit to measure the scale of the problem and to identify what UIs we need to develop and accounting for all possible states of the each element.

image-1

Next was to create a spreadsheet to identify which UI elements has to be designed and developed. Building the UI library is still a work-in-progress.

image-1

Result and Success

The end-result is a pretty comprehensive design system enhancing the overall consistency, efficient prototyping, and lesser questions asked — ultimately enhancing focus and clarity for everyone.

There was not enough time to gauge success as pick-up and implementation onto actual products required more time. I personally had great success in generating more consistent designs such as graphics and templates, faster with lesser effort (utilizing reusable elements and finding files in the design folder had never been so much easier).

What could I have done better?

If granted more time, I would have experimented implementating the design system into existing products such as the mobile app and web app as it takes a lot of resources (including frontend engineering effort) to put it into place. Seeing how implementation is not vital now at early startup stage, not implementing design for now is a better product strategy. I would also conduct a quick survey of the implemented designs to gather how users feel about the change in the interface.

Patching up the rest of the design system — Portions of the design system such as interactions, marketing vocabulary, and marketing tones were missing too. These small components add up to a user's overall experience with Arch.

Contact for more info