Data Networks

Faster Than Light

High Speed Network Technology

Faster Than Light

The industry's fastest network messaging software Now the easiest to use.

 

High speed data transport used for

algorithmic trading and big data services. 

Customers:

New York Stock Exchange, FedEx, American Airlines, and 4000+ others

CATEGORY

SaaS Enterprise​ software design

 

DATE

Jan 2016 - Feb 2017 (1 year)

THE SOLUTION

Create a network app with one click.

By starting with a 1-click solution and working back into complexity, the resulting solution was naturally easy to use too.

I redefined who should be able to use Tibco FTL, shifting from Network Architects, whose time is very expensive, to much lower level Admin Engineers.

THE CHALLENGE

This software is deeply technical with layers of complexities and interdependencies.

The main challenges were to:

  1.  Understand all the tiny but critical variables with multiple layers of complex interdependencies

  2. Synthesize all that dense information and understand it deeply enough in order to simplify the software's architecture to achieve our users' dreams

  3. Redirect the entrenched enterprise, engineer-focused approach to design into a user-focused approach

MY ROLE

Interaction Designer

 

PARTICIPATORY DESIGN

Led cross-functional workshops

Secured stakeholder buy-in

 

RESEARCH AND REPORTING

User research

Market and competitive analysis

Personas development​​

Intake and synthesis

Uncover new relationships

 

ITERATIVE DESIGN

Rapid prototyping

Storyboarding user flows

Testing

Peer reviews

Stakeholder reviews

 

INFORMATION ARCHITECTURE

Created an interactive dashboard

Modularized complex functions

Microinteractions

Production wireframes

PRIMARY TOOLS

Hand sketching

Sketch App

Keynote​

 

FTL CLOUD REQUIREMENTS

FTL: The Backbone of TIBCO's Cloud Integration

Network Architects and Operations Managers will need to quickly & easily build, maintain, and troubleshoot complex data networks via the cloud app with the following qualities:

Minimal errors

Great UI

One Click Setup

Shortened set up time

Easy to build

Easy to troubleshoot

Easy to update

Built in GO and Javascript

REQUIRES A SEAMLESS EXPERIENCE

For Tibco FTL's migration to the subscription cloud, FTL needed a seamless cross-platform experience in the web browser with a consistent look and feel in line with a vision for the future of the brand.

     
 MY PROCESS
  • Define the problem

  • Needfinding and benchmarking

  • Analysis - research

  • Competitive analysis

  • Market place

  • What's missing

  • Design studio Workshop

  • Persona creation

  • Jobs to be done, goals

  • Needs, pain points

  • Synthesis

  • User stories

  • Journey map

  • Inspiration phase

  • Wireframes

  • Ideate

  • Choose

  • Implement

  • Test

  • Learn

  • Iterate

THE SOLUTION

Create a New Network App with One Click

After research, I redefined the persona who should be able to use Tibco FTL Cloud.

A network architect's time is very expensive, so making FTL accessible to low level admin engineers saves customers thousands of development dollars.

By starting with a 1-click solution and working back into complexity, it made it straightforward to figure out what the default settings should be.

EDIT AND CUSTOMIZE
APPS WITH NESTED TABLES AND MODULARS WORKFLOW

Flattened the user's journey by breaking apart the numerous steps into a modularized workflow, replacing nested forms with multi-level pivot tables.

CENTRALIZED MANAGEMENT

A hierarchical decision making structure 

 

All decisions and processes are handled strictly at the top level.

 

Users can drill down through detail pages if necessary.

Streamlined the setting up and simplified the network administrator’s job.

 

This centralized management strategy reduces the amount of technical expertise required of the user, thus reducing the level of seniority needed to administer the networks and saving massive salary costs for our customers.

THE PROBLEM

SETTING UP LARGE COMPLEX NETWORKS IS DIFFICULT AND ERROR PRONE EVEN FOR CHIEF ARCHITECTS

Many customers expressed difficulty getting their complex data networks up and running quickly due to the highly technical details and various compatibility issues.

 

Setting up and maintaining a network was a time-consuming process that required the deep technical expertise of a network architect.

CARL a Network Architect

Form after form

PRIOR UI

Dozens of complex Forms

The previous version was a very tedious and time consuming experience, with a series of nested forms that the user had to fill out sequentially. 

 

The process obscured many of the hidden requirements and options needed to make the network applications run correctly, making it very difficult to troubleshoot errors.

DISCOVERY PROCESS  | Workshops
WORKSHOPS

I bring the teams together.

Open up discussion about 

Who ?

What ?

Where ?

When ?

Why why why why why ?

 

Unifying interdisciplinary teams from multiple locations:

San Francisco 

Palo Alto

Chicago

Mexico

China

India

LEARNING TERMINOLOGY:

Network Applications:  configurations that can be repeatedly uploaded to multiple servers

Apps: can contain hundreds of endpoints, which can send or receive data in a one-to-one or one-to many configuration

Transports: specify communication protocols and transfer data messages which multiple endpoints can subscribe or publish to

Configurations: must be set such that the structure of the sent data matches what is expected on the receiving end  

COLLABORATIVE WORKSHOPS

I explained the high level concept and my design solutions to the rest of the UX team. To validate my concept, I wanted to see if they could develop a better idea or convention that I could leverage. 

SYNTHESIS AND INSIGHTS
 
INSIGHTS

The current iteration is error prone and takes months to setup a network application.

Companies need to be able to quickly deploy and monitor network applications in an accessible and transparent way.

 

SIMPLIFY AND STREAMLINE THE WORKFLOW

Network architects and operations managers need a faster and easier interface to create, modify, and troubleshoot complex networks.

 

Aim to help the user 

- the right action

- at the right time

- with the right context

- through the right channel

Network Apps always have

2 or more ENDPOINTS = O 

1 or more TRANSPORT = >  

An example use case
 
 

The New York Stock Exchange (NYSE) publishes stock prices at message rates of millions per second over Tibco's FTL Messaging. Millions of traders can subscribe to any one price.

 

A trading house needs to create a new network app to subscribe new desks to the prices published by the NYSE so they can buy or sell stocks internally or through the exchange. 

The network architect will quickly set up new trading desks using network apps to apply the same configuration to different offices around the world.

NYSE publishes a stock price over a one of our transports.

 

The trading house can subscribe to the NYSE stock price, making it available to hundreds of traders in offices around the world.

 

Buyers and sellers can instantly trade:

•in-house on internal transports or

•externally on the exchange’s buy and sell transports.

THE SOLUTION

Part 1

DESIGN GOALS

Drive awareness, engagement, and sales with an easy to use out of the box experience.

​​

Faster maintenance and reduced downtime without being required to know how the data distribution happens

ITERATIONS

Once I had an understanding of the technical concepts and what the user needed, I was able to synthesize it all down to a very simple and easy to use concept with a high level of detail and control.

I flattened the user's journey for setting configurations by breaking apart the numerous steps required into a table or grid that could be easily scanned and modified.

APPROVED CONCEPT:
LAYERED GRID

Based on the many-to-many relationships of the endpoints and transports, I came up with a multi-layered grid table.

This visually stacked hierarchy allows users to expand each layer while maintaining context. Each level in the table can contain multiples sets. 

THE WIREFRAME ITERATION

MULTIPLE VERSIONS OF THE LAYERED GRID WERE MADE AND TESTED

To find the most efficient and readable design, I made multiple rapid iterations and tested them with people who had no understanding of the technology or the purpose. 

 

I would simply put it in front of people to see if they could understand the structure just by looking at it.

EARLY VERSIONS

The app layer can contain multiple endpoints.

 

Endpoints contain multiple transports which are set by default to be compatible. 

The transports groups contain multiple transports,

and the transports contain multiple components 

That pattern is repeated for each section

LATER VERSION

Experimenting with adding and deleting levels in the grid.

+ DETAIL PAGES

Expandable detail pages were added to allow users to drill down.

FINAL VERSION

Once a design direction was settled,  I began to add layers of details and microinteractions.

I continually collaborated with  the project's visual designer, to work out many of the details. We constantly pivoted on the microinteractions.

+ STATUS CURTAINS

A hideable dropdown screen shows analytics.

It allows the user to drill down into detail pages.

The dashboard can be opened and hidden with a single click.  

 

SOLUTION 

Part 2

NETWORK MAPPER 

MAKING CONNECTIONS

The Problem with connections

Previously, there was no visualization of the entire network.

 

The user would have to make one complete endpoint configuration from start to finish then move on to the next endpoint. 

Users would have to take great care not to make a single error that would be challenging to track down.

 
 
MAKING CONNECTIONS WITH A 
CONNECTION MAPPER

In the new designs, after the apps, endpoints,  and transports are created, they can all be rapidly reconnected using a data mapper.

Breaking the process into small modules

for later assembly makes for a much faster and simpler experience.

 

ORIGINAL MAPPER CONCEPT:
USING DEFAULTS

The concept was to default all the setting for transport in order to allow easy set up and ensure communication between endpoints on the bus. 

 

Each transport bus is shown as a vertical line with the endpoints branching off the bus.

The user could drill in and out of multiple network applications, adding, deleting and moving the connections.

FIRST MAPPER PROTOTYPE

LATER MAPPER VERSIONS
FINAL MAPPER PROTOTYPE

 

OUTCOMES

FAST, SCALABLE, EASY TO IMPLEMENT AND USE

  • Extremely scalable

  • Ability to stay competitive in a volatile market

  • Prevent errors

  • Faster maintenance and reduced downtime

  • With its powerful platform, users can even create their own finance applications

© 2015    Charles    Perretti   Design    Build

 

charlesperretti@icloud |   San Francisco, CA 94122  |   Tel: 415-359-7545   

 To see my previous Product Design portfolio   www.perrettidesign.com