Spotfire Website

VISUAL/WEB DESIGN

Project Overview

In 2022, Citrix Systems and Tibco merged to create Cloud Software Group, resulting in several new business units from both companies' product lines, including acquisitions made by Citrix and Tibco before the merger. One key acquisition was Spotfire, which became part of the Tibco product line and adopted the Tibco brand. Now operating as its own business unit, Spotfire needed a fresh visual identity and a new website, so I led the design for the website's look and feel, using a color palette from the product team and including visual elements to maintain a connection to their existing product design. Along with a UX designer, a content strategist, a writer, and our small development team, we designed and built the website from scratch in just four months, utilizing some existing components within our CMS, which I re-skinned and tweaked to align with the new Spotfire look and feel.

Wireframes

In close collaboration with our UX design team, I developed wireframes for the website's primary pages, following a new information architecture and web strategy. These wireframes acted as a blueprint for our production team to create the remaining pages of the site, with the design team and web strategist supplying the specific content for each page.

Moodboard

To gather insights that would guide the visual style of the website, I created a mood board featuring UI design treatments and components from various SaaS sites that complemented the existing brand elements. The stakeholders were drawn to a lighter and airier aesthetic, which emphasized their products and effectively highlighted the unique product screens and animations, capturing the user's attention.

Color Palette

I collaborated with the Spotfire Product Design team to create a complete color palette for the site using their existing brand colors. I tested and adjusted the colors to ensure they comply with WCAG accessibility guidelines for contrast and provide an inclusive user experience.

Typography

The existing typography system in our CMS, complete with custom styling, was implemented to facilitate a seamless and consistent development process for the site pages.

Iconography

I developed a detailed icon library to illustrate product features, benefits, and technology concepts. The icons were designed to complement and enhance the brand's visual style.

Web Style Guide

To ensure a cohesive experience and consistent visual design, I created a web style guide. This guide includes specifications for various components, custom visual styles for photography, and treatments for product assets, which will serve as guidance for the future design and development of additional pages.

High-Fidelity Comps

With the visual style finalized and approved, I created high-fidelity mockups of the primary pages, including mobile responsive views. These designs featured the various custom-branded elements, uniquely styled imagery, and product screenshots supplied by the Spotfire Product Design team. I presented these mockups to stakeholders and our internal design and development teams to secure their final approval and confirm that everything was feasible.