
Style Guide & Design System
An essential tool in helping to build consistency and quality into the Control Center product.
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.
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.