HOSTING ORGANIZATION DESIGN SYSTEM

Effectively Communicating UI Needs for Developers

This project presented the situation of not simply designing for a single website but the web design brand of the entire Cloud Hosting organization of General Electric CoreTech. Going into this project, the Cloud Hosting organization had several web tools developed by teams in the organization and used by individuals both within and outside it. However, such tools all had their respective designs and layouts, with some of which being more intuitive than others. My challenge was to create a design scheme that would make the experience across all of our web tools more consistent.

The problem:
How can I effectively curate a style guide that communicates UI needs for our developers?

My Role:

UI/UX Designer
Interaction Designer

The Team:

UX Designer
Front End Engineers
Product Manager

Tools Used:

Sketch
Axure
Figma
GitHub

My Contributions:

UI Design
Design System Creation
Cross-functional Collaboration

Outcomes:

Consistent UI elements throughout our production site
- Previously less consistent
A platform for additional UI elements as needs evolve

STARTING SMALL

My approach to the style guide was first to figure out if my division of GE had any existing style or brand guides. Other than color and font standards, whatever I could find was either more in the realm of suggestion or being sunsetted, so I gathered what I could before starting on a guide.

Having worked in front-end development in the past, I decided to seek some input from the software engineers on my team, and afterr some brief counsel, we decided that building off of the Material Design framework would be best as it would strike a balance between ease of implementation and serving as a basis for our own custom design scheme.

With this in mind, I planned out my tasks ahead, taking an "atomic design" approach:

Focus on the simplest, "atomic" elements first
- Color palettes
- Font sizes
- Icons
Build "cells" out of the atoms
- Buttons
- Tables
- Paragraphs
- Interaction colors
Build "tissues" out of the cells
- Navigational items
- Page layouts

The reason for this decision was that the most atomic elements would provide the basis for all others, from forms to documents, centered around what colors and sizes to apply to them.

ORGANIZING AND EVOLVING

Once I had the elements sorted, there also came the challenge of how to display them. Rather than a complex solution such as a dedicated website, I figured that the best solution would be to organize them in a readme file on a GitHub repository.

The reasons for this were simple:

Ease of creation (no dedicated website to be made)
Display of all design elements with text on a readme
Inclusion of static mockups created through UX tools.

Speaking of additional items, as our team’s website grew in scale, I found that elements from newer features also needed to be included in the style guides.

Furthermore, members of other teams within the Hosting organization began consulting me for clarity on elements not covered in the style guide as it was or asking for suggestions on how to handle various elements.

Having more sources of input, while beneficial for my approach to design, also made something else clear: the presentation of the style guide needed to change to a more high-fidelity medium.

In other words, it was back to the drawing board.

While it was a relatively simple matter to include them in our GitHub readme file, there needed to be some more interactiveness to this style guide to ensure clarity in interactive responses and comprehensiveness in design elements. The solution going forward has been to display many of these design elements on a style section of my team’s UX prototype website. More details on this to come.

SEEING RESULTS

Over the course of the creation and evolution of this style guide, it became clear that this style guide was being used throughout multiple teams within the organization. Visiting these pages yielded a similar navigational layout to our Cloud Hosting Products website as well as a near-exact color scheme.

While different tools were used for various purposes and had different layouts, the brand and experience were consistent throughout. This was also evident by fewer employees coming to our team for help in how to use these items.

As this project continues, I can anticipate even more streamlining of our teams’ tools in terms of consistency and brand and even more cross-team collaboration to achieve a cohesive product.

A NEW START

As more tools were added to our website, and as both our development team and UX team grew so did the need for more direct collaboration between both teams. To address the need for collaboration with my fellow designer, we migrated our existing designs from Axure to Figma. In doing so, we collaborated on a comprehensive array of atomic design components from color to format with which we are building our new pages. Above is an example of this.

In addition, these components also serve as the backbone of a new component library that our front-end developers are building. This library will serve as the basis of front-end development and serve as a means of seamlessly transitioning component designs from UX to production.

Expect a PDF deliverable soon.