Project vision:

All Kibo solutions will share one look and feel, with new and existing UI components stored in a pattern library for reference.

What problem does this product solve?

Three software companies (Shopatron, Marketlive, and Fiverun) were merged in 2016 to form Kibo Software, Inc, a provider of omnichannel commerce solutions. Each organization had its own brand guidelines and front-end technology. The Kibo rebrand effort meets the need for a unified brand presence throughout all Kibo application interfaces.

 

Original header designs from three web applications in need of a rebrand
Original header designs from three web applications in need of a rebrand

Business goals:

  • Influence buyer perception of Kibo as one united organization, rather than a strategic merger of three separate companies

How did I contribute?

  • Design project management
  • Wireframes
  • Visual design

The Kibo rebrand began on the marketing team with a new logo, typeface, and color palette. When I joined the project, the font Arial and the colors #2b2b2b (dark gray) and #ffce06 (Cadmium yellow medium) had been already been selected for the preliminary style guide. I shared a few concerns with the VP of marketing and lead designer:

  • Primary color selection
    • Black and yellow are striking colors, designed to grab attention at a distance and indicate modernism and excitement, perfect for a marketing website or tradeshow presence. But this eye-catching contrast is harsh on the eyes of users who remain logged into a web portal or app environment all day.
    • Inverse text (light on dark) is used throughout the marketing website, but is unsuited for enterprise web applications as it causes eye fatigue. Inverted text is harder to read than medium-dark values on a light background.
    • The preliminary style guide called for buttons with white text on a yellow background, which is nearly unreadable and fails the WCAG 2.0 guidelines for contrast accessibility.
    • The marketing color palette lacked affordances for feedback and information design. I asked for supplemental colors to indicate success, failure, alert, and active state.
  • Typeface selection
    • Arial is a generic font, so widely used that it cannot lend recognition or personality to a brand.
    • In Arial, the lowercase l and the uppercase I are identical characters. This leads to confusion when reading mixed alphanumeric strings. A font like this would certainly increase the potential for user error in an order management environment where employees frequently deal with order numbers, part numbers, return labels, and barcodes.

I worked with the marketing team and another user interface designer to create a robust color palette, true to the brand guidelines, with supporting hues and values for visual designers to establish information hierarchy and provide UI feedback. Additionally, I convinced the marketing team to switch to the multi-weight font family Source Sans Pro, an open-source font from Adobe where l, I, and 1 are all different characters.

kibo_applications_palette

 

Screenshot of the Kibo rebrand epic in JIRA
Screenshot of the Kibo rebrand epic in JIRA

Next, I led a team of designers, product managers, and quality assurance engineers in a user interface audit – the team spanned five offices (San Luis Obispo, San Francisco, Petaluma, Swindon, Minsk) in three different countries (USA, UK, Belarus). We documented over 200 areas in need of rebranding: stylesheets, logos, packing slips, transactional emails, and dozens more. I created a barrage of JIRA tickets and accompanying wireframes, visual designs, and CSS specifications to assist the front-end development team in this massive effort. To facilitate handoff to front-end development, I created a JIRA epic, breakout task tickets, and hosted a kickoff meeting with relevant engineers present. I joined regular scrum meetings and assisted with sprint planning. By April 2016, four months after the rebrand effort began, the brands previously known as Shopatron, Marketlive, and Fiverun were replaced by the Kibo UI pattern library.

 

 

Kibo user interface rebrand