Big Fish Games
TackleBox Design System

Unifying design and improving operation effeciency

Overview

Big Fish Games codenamed their enterprise tools suite as TackleBox. The UX team would provide high fidelity mockups for design handoffs and prototype demonstrations.

Problem

Designs created by the UX team did not represent a cohesive experience based on the latest feature integrations. As a result, saved designs would be outdated regularly and designers needed to search for the latest project and select components or update their designs to match current standards.

Users & Audience

The design system is for the UX Design team to use when preparing high fidelity mockups for Engineering and Stakeholders.

Roles & Responsibilities

My role was to own the design system and coordinate updates with the UX Team of 3. My UX manager and ux colleague would be available for design critiques and provide feedback when using the design system.

Scope and Constraints

The design system needed to reflect the capabilities of Bootstrap 3, existing widgets provided by Angular, and the Font Awesome icon library.

Process

Audit

We started with auditing all the components currently used in all the tools under the TackleBox umbrella. The goal of the audit is to identify all of the components and variations used and correct inconsistencies.

Component Design

When building out the components in Sketch it is important to support states, color treatment, padding and margin values, and existing style overrides. The goal was to empower the designer to select a component variation preset instead of component switching.

1

Text Options: Light and Dark options

2

Text Override: Designers can override components with text. Components with text are pinned to provide the proper alignment every time.

3

Frame Options: Top rounded, bottom rounded, not rounded, or specific corner

4

State Options: Default, Hover, Disabled

5

Color Options: Primary, Info, Danger, Success, Warning, Default

Standardized components

Visual layout organized by categories.

  • Matches current tech stack
  • Designed to be scaled to fit
  • Reusable for all users

Below are the components and interactions I championed for the Design System

Results

Improved consistency across the entire UX team.

7 tool designs updated with design system

Reduced confusion for inconsistent designs when handing off designs to developers

Lessons

Building out the design system gave insight to how components were being built within TackleBox. Frameworks like Bootstrap give a lot of options and it was a helpful exercise with the ux team to discuss which options were best suited for our users' experience.