Landing page mock-ups

TIBCO UX Pattern Library

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

Role: Lead visual designer

Landing page mock-ups

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

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

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

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

Sample project

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

7-example project.png