VDMS Pattern Library

A resource of various layouts, components and elements that use the same visual language and follow a set of common principles, to be used by developers, designers and product managers to deliver higher quality, production ready solutions more effeciently.

Overview

When it comes to designing and developing apps and services that are intended to work with one another, it is almost essential to develop a pattern library that communicates common principles and standards that can be followed to create consistent experiences for users that will interact with the multiple apps or services. Unless a design and development team work closely together to specify and document these patterns, a substantial amount of overhead and debt will occur in the process of a team trying to bring about consistency and clarity in the products they are working on. With the potential of leveraging distributed teams in the US and offshore resources, it was and extremely valuable endeavor to create a pattern library to be used in developing these highly technical tools for CDN services as well as determining the process for teams to implement the pattern library. So far, github pages is being used to publish the patterns and share across the enterprise. Most content is written in markdown and image mockups of the patterns are posted as placeholders until they can be replaced by live code snippets.

Objectives

  • Organically build up a catalog of re-usable components and elements that can be used by teams throughout the Verizon Digital Media Services organization
  • Create a GUI Kit that can be delivered to product managers and any future UX, UI designers, to enable them to create consistent mockups and wireframes.
  • Document all the patterns that are identified in a holistic fashion by written definitions, descriptions of functionality and sketches, wireframes or mockups that illustrate the look and feel of the particular components.
  • Work with engineer resources to get all the patterns, components and elements converted into clean, consistent, well structured HTML that can be copied by anyone to be used anyone, anywhere in any product.
  • Craft an efficient but flexible and adaptable process for these patterns to be implemented by diverse teams.

Use Cases

  • A new UX designer has been hired to work on a particular product and needs to see and understand why certain decisions were made regarding system architecture, navigational models, layout guidelines and the visual language for the user interface.
  • A seasoned product manager receives many requests from customers for a very particular feature in their product and they want to create a quick wireframes or mockup of how the feature might be implemented by an engineer in a short amount of time.
  • A contracted off shore development team is responsible for developing and delivering a new product. They visit the pattern library and quickly understand many of the UX guidelines and perspectives. They work with the in-house engineers to get grab the scaffolding and copy the html of the components they need, when they need it.
  • VDMS demonstrates it's intentional and thoroughly considered approaches to some of the highly technical design problems, by making some of the pattern library publicly available, providing assurance for loyal customers that VDMS is committed to building a solid foundation.

Business Value

As I have expressed, endlessly, there is a great deal of value in a pattern library. A company can save money, time and effort by creating a catalog of layouts, components and elements that can be reused throughout their entire suite of apps and tools. If their decisions are intentional, thoroughly considered and sustainable, a product team can respond to trends and changes in the industry in a much more nimble way. This agile and iterative practice yields quicker delivery of products to market that are more consistent and higher quality with Less technical debt by having to go back and fix things that are not in sync with business requirements.

Process

This is an active project. Much of the content is not available to post. I will share the process when a greater majority of the project is finalized and determined suitable to present.