Check out my new project, Practical Service Design!

Jive Product Style, UI and Interaction Guide

Key Collaborators

CTO, Front End Development Lead

My Roles and Involvement

UX designer, UI, visual and interaction designer, html/css

Jive needed a detailed style and interaction guide to start building their new products and platforms on. There was no existing style guide, or even basic UI template, so coming up with a cohesive library of UI and interaction to build from was going to have a huge impact on future development. The whole project was going to be delivered as a HTML boilerplate, designed and coded by me.

Primary Problem

  • Existing platform interface required complete abandonment
  • Developers needed style guide and templates to work without designers present
  • Multiple legacy interactions were so bad they needed a whole paradigm rework
  • Interface must accommodate whole new business model

Challenges

Jive had an existing admin portal for their product, but it was built to be almost unmaintainable and had no usability or experience consideration given to it. The decision had been made to abandon it and begin work on a new platform.

The admin portal had dozens and dozens of features and disparate interfaces, mashed together and built up over time. There were things that made no sense, were redundant, missing, and just so counterintuitive that they almost seemed designed to stop the user in their tracks. Anywhere I threw a UX rock, you were bound to hit something I could improve.

jive-ui-4

Working interface example with copy/paste ready HTML

Another interesting aspect of this guide was that there was no defined feature set it had to accomodate. It was essentially going to be a kitchen sink approach to building a product templating system. Instead of designing for specific behaviors, this was a toolkit that could be used to build prototypes and MVPs (minimum viable products). As new features and user behaviors/stories were determined, this guide would provide all the pieces and parts it takes to make it a reality. I was basically building a templating library.

jive-ui-3

Interface “kitchen sink” resource with multiple example states

Solutions

I spent a great deal of time going through every interface option, button, link, etc., documenting what they did, what context they were in, and any other UI they were related to. I took that information and compiled a list of the core functions. Then, I did the same exercise, only this time I did it for the interactions that were present in the existing system. This was essentially linking together the core functions into the base behaviors the user was supposed to be able to do.

jive-ui-5

Working interactive interface example, copy/paste HTML included.

jive-ui-1

Style guide internal website. Working interactive elements and copy/paste HTML.

There was a great deal of artistic freedom in the creation of the new interface and interaction guide. As I needed somewhere to start, I created an overall visual theme that was relatively modern and extensible. It had to look good and be very extensible; plug and play.

This was an interesting stretch as use cases had to be taken from the existing portal and conceived as something that would be a decent user experience. It won’t be until the new products have been designed and developed that the real impact of a style and interaction guide will be felt, but for sure it is better than starting from a bad place, or starting with nothing at all.

jive-ui-2

Example layout and specific page styling

Outcome

In the end, I ended up creating the whole visual design, UI patterns, and interactions in a guide that had most of the elements that would be needed to get started. The whole thing was delivered as an HTML and CSS template library, with code snippets, comments, and examples made for easy usage and stored as a master repository on the Jive GitHub account.