Style Guide & Design System

An essential tool in helping to build consistency and quality into the Control Center product.

PRIMARY ROLES:

20% UX Designer
80% UI Designer/Developer

About the Style Guide

This live online document was created to maintain consistency, ensure on-time deliverables, enable rapid implementation, facilitate easy maintenance, and allow easy access for internal users within a secure system. Its primary focus was to serve as a source of truth to maintain style consistency and help improve the development of essential features for the Control Center product.

Case Summary

Product Goal

Create a tool enabling developers to deploy required projects with consistency and pixel-perfect accuracy through an efficient, streamlined development process.

User Problem

Product Managers and Designers would complain of inconsistencies in the user interface not matching the final mock-ups. The inconsistencies would result in a poor reflection on the company’s branding integrity and cause bottleneck delays.

Outcomes

The Style Guide provided a reliable method for the development team to rapidly develop features with precision and consistency. The product inevitably evolved into a fully functional Design System enabling even faster development for future product features.

Style Sheet Theme Page

An overview index page of the initial phase components utilizing an existing template setup.

Process Highlights

Project plan and overview

Project Team

The team consisted of a Product Manager, Lead UX Designer, Developer, and Lead UI Designer.

Role & Responsibilities

My role in this project was Lead UI Designer and Product Owner with some light web development.

Process & Methodology

Although there was no formal UX methodology from the start of this project, design thinking principles were present and used to help create this product.

Project Plan

This project spanned over three months for the initial design. Eventually, the Style Guide evolved as improvements and updates helped shape the overall product.

Research and Discovery

Understanding the Users for this Product Tool

From our initial meeting with the team, I collected vital information, which helped to determine the intended users directly involved in building the Control Center product. In later years, the Style Guide became a valuable resource for cross-functional teams. Outlined here are example personas of our users describing the estimated percentage of use for this product tool.

Chart View

Platform Analysis

An integral factor in creating the Style Guide is deciding which platform to use. I received suggestions from the team of various platform products to investigate and conduct research. I outlined each product’s benefits and disadvantages in a report similar to a SWOT list. After gathering all the needed data, I reviewed my findings with the team. After careful review, we determined that Confluence was the most feasible choice due to security, control of data, and ease of use and access.

Establishing a Solid Workflow Process

After creating buy-in for our choice platform, I needed to improve the current deliverable process to ensure quality and consistency for each new component request. Outlining the current workflow helped to identify areas to improve. I proposed adding another step to the process before releasing the final approved mock-ups for development. The improvements to the flow required that any new or updated components be captured through the Style Guide to prevent duplications or discrepancies.

Prototypes & Interaction

In addition to creating a solid workflow, we also needed to create a streamlined user flow where the team could easily access the Style Guide. Maintaining consistency and accuracy with updated information was essential while knowing where and how to access, update, and provide feedback for each component.

Style Guide User Flow

Since we continued to work with Confluence, which worked well with our Jira management system, I began to prototype the first few pages and components. After finalizing the initial prototypes and user flow, I met with the Lead Developer to present our case to the engineering team. The presentation went very well, and we got buy-in to begin implementing the new process and building the first phase of the Style Guide.

Initial User Interaction Flow.

Sample components demonstrating initial format and specifications of the Legend Style Guide System.

Sample pages of the Style Guide within the Confluence interface.

Testing and Validation

After setting up a few pages with the specified components, I tested them by running the components through live projects. Then I met with the design and development teams for feedback to refine areas to improve before fleshing out the rest of the components and pages for the first phase. Through time, the Style Guide improved and evolved through feedback and adjustments provided by the team. The adjustments made to the guide inevitably helped shape it into a fully functional and live online document.

White Paper Prototype

In addition to the online Style Guide, I created a white paper pdf document at the request of Developers who wanted to refer to a printed version of the Style Guide. Producing one entire document to reflect the online guide proved to be a cumbersome task requiring additional development time. Later, we discovered this was not an effective use of our time and discontinued using the PDF version. The document only caused confusion resulting in outdated information from legacy paper trail documents attached to the Jiras.

Outcomes and Results

The Style Guide proved to be a successful tool for helping to bridge the communication gap between Design and Development. In later years, it developed into an effective functional Design System utilizing the latest UI tools like Invision, Sketch, and Zeplin. It also served as an onboarding tool for new teammates to get accustomed to the Control Center interface.

Improved Systems, Concepts, and Evolution

With newer software supporting developer and designer needs, we eventually transitioned from Confluence pages into more automated design systems with improved ways of delivering assets and providing accurate specs.

Results & Impact

Overall, the guide helped improve the visual aesthetics lending itself to an improved experience, enabling the team to promote a clean and solid product. Users could see the difference in the product where the experience improved over time and increased the product’s value. As the team delivered a cleaner product with new features and improved experiences, the product gained a rise in new onboarded accounts and growing device counts.

Benefits of the Style Guide:

• Reduced bottlenecks
• Faster Builds and Deploys
• Accurate Development
• Increase in User Engagement
• Branding Consistency
• Efficient and Streamlined productivity
• Enables New Feature Opportunities

Increase in device uploads with over
120 mobile operator partnerships globally.