TIBCO UX Pattern Library


TIBCO UX Pattern Library can change the way you do business.


I worked with UX managers, interaction designers and front-end developers on a pattern library and style guide for TIBCO's diverse product portfolio.

Landing page mock-ups

The current pattern library had a very plain landing page without any calls to action. I brainstormed with the design manager and another visual designer and came up with three options: "clean corporate", "dark cosmic" and "natural beauty" (my preferred option). After discussing the pluses and minuses of each, we settled on the natural landscape theme. It was the most visually appealing and easy to navigate, plus it fit in with our current cute animal mascots for our open source products, such as Flogo and Mashling.

Content template

After deciding on content for the first release, I provided interaction designers, developers, and writers with an easy-to-follow page template. They could then plug in whatever content they needed to showcase. I pushed for narrower text widths for better readability of paragraphs, while allowing for wider image blocks to better showcase graphic content.

Visual style guide

The existing style guide was a bit confusing as it featured numerous colors, grid systems and typographic hierarchies with little to no usage direction. As a first step, I reduced elements to the basics with clear indications of how each should element should be used in all product UI's. This gave us a good foundation to add to as we flesh this out into a design system.

Components

We decided on a limited set of global components. I provided visual guidance on each component. I also directed a junior designer in preparing each component for a shared Sketch library and export to Zeplin. During development, I filed numerous JIRA tickets and worked with remote developers via Slack to refine the visual implementation.

Sample project

Below is an example of the first project to start using the new pattern library.

Results

Gave more visibility to the TIBCO UX team internally. Provided front-end developers from new acquisitions or on-premise products going to the cloud with a central location for components. Gave visual and interaction designers a common sketch library to use for their projects.

Future

Next step is to create a color palette that is optimized for accessibility. We'll continue to add components, icon sets and guidance on motion, as well as necessary refinements due to user testing and responsive issues.

TOP