Overview

Enterprise Theme
& Style Guide

Completed: 2017
Timeframe: 6 weeks
My Role: Project Owner
Collaboration: Support, Marketing, QA, Development

Objective

Transition our brand and existing UI into the enterprise market with a new app theme and style guide.

Deliverables

Visual design, style guide, clickable prototypes, Jira documentation, and interactive assets in CodePen

Process & Methods

Competitive analysis, wireframes, visual design, prototyping, usability testing, stakeholder presentations, and using our own product

Overview

Shortly after celebrating our company's 10 year anniversary, we faced a tangled mess. The interface was functional, but it didn't communicate efficiently. It was full of variations, special cases, and exceptions that muddled the experience. Competing design patterns spread across the layers of the app. It told the story of a bootstrapped company growing at light speed.

At the time, our team was handling the transition of a large chunk of our brand into the enterprise market. DIY customers loved the quirky UI. However, enterprise customers were hesitant to put trust in the brand. To grow, we needed to focus on designing for the enterprise market.

Early Proposals

Quick Wins

To get started, I tested some simple changes in our side panels. They're self-contained and occur throughout the app. So, they're a great place to start without causing any breaking changes. I iterated on systematic guidelines for typography, vertical spacing, and hierarchy. 

While it seems like a simple series of CSS changes, the side panel re-design signaled a larger transition. It inadvertently called attention to ad hoc solutions found in the app and a need for standardization. Through this project, I made a case for establishing a formal design system and solved some small consistency issues so that everyone could focus on more challenging problems.

Buy-In

Getting buy-in

The refresh of the side panels was a paint job. But it showed how a little systematic design could be effective. The re-design generated enough interest from stakeholders to proceed with polished clickable prototypes exploring UX updates.

The process uncovered several opportunities for improvement and opened up discussion with the development team. We got buy-in from our CEO to move forward with a new theme for enterprise clients. Within the new theme, we would use the guidelines from our current proposal. At a later date, we could continue work on the design system. 

Process

An enterprise theme

Working with the head of product design, I built the new theme in a rapid series of iterations focusing on clean and simple design. We started by collecting inspiration from apps like Asana, Mailchimp, and Intercom. We looked through the design system proposals I had completed. We established clear goals for what the enterprise theme should communicate and where we should focus.

As a theme refresh, most of the changes were surface level changes to the CSS. We introduced an updated palette that referenced our existing palette but felt more contemporary. Working toward simplification, we shifted the aesthetic focus to being lighter throughout. This meant removing heavy backgrounds, cutting some illustration, and using a single font family. 

Mockups focused on several key sections of the app to set stylistic guidelines. As the project owner for the style guide proposal, I also became the project owner for implementing the enterprise theme.

Collaborating remotely with a front-end developer, I pair designed the remaining sections through a dedicated Slack channel. We collaborated on solutions as we encountered issues and circled back with the rest of the team on important decisions. To make the palette more flexible, we created SASS variables for all our colors and cut redundancies in the existing app.

The Outcome

Enterprise ready

The new theme was well-received throughout the organization. It addressed the perception that our product wasn't serious enough for enterprise customers. This branding shift would eventually split the brand between individual users and enterprise users. New products are now built with the enterprise theme as the default. 

Exploration

Systematic design

The success of the enterprise theme generated enough interest to explore creating a design system. We started by whiteboarding through the first run of components and states that could cover most of the app. I studied Mailchimp's design system as an example of a mature design system. Then, with the rules I'd created in our proposals, I began fleshing out the rest of the system.

Much of the work revolved around taking inventory of the existing UI and prototyping changes in the browser. By testing with real content, I was able to adjust quickly. To interact with dev, I also set up a CodePen for discussing typography as a starting point.

Excerpts below:

The Outcome

A great starting point

As an internal style guide and design library, the new enterprise theme was successful and led to several other re-design projects. But, for it to be a living design system, the process should have started in closer collaboration with development. I'd hoped that a little extra effort could turn the style guide into a design system after the fact. But, the two have vastly different levels of depth within an organization and product.

I learned a lot through the process. While the project scope was limited to surface changes, many of the root problems were structural. To be truly effective, the design system needed to address and simplify the existing user tasks and start as a collaborative effort with the development team.