Andriana Gutierrez

Interface Builder: UX / UI Design

May 2016 – On-Going

Interface Builder Header Settings

TL;DR

Epicenter's Interface Builder is a tool that allows analysts to easily design an interface for their dataset or model. Currently in public beta, this product is still in development at Forio. My challenge has been to come up with the components, themes, templates, and workflows that are scalable regardless of possible new features and settings. Since I enjoy solving complex puzzles, this was a challenge I eagerly accepted.

The Problem

Forio has an existing product called the User Interface Builder, it was built originally for Simulate, a flash based modeling and simulation product. A new version of the UI Builder was built using modern web technology for Simulate’s replacement, Epicenter. This very freeform, drag and drop version didn’t get fully realized and was never quite finished or usable. My job was to design the next iteration so users could easily build a working simulation to share.

In terms of Design, the Interface Builder needed to:

  • Be able to easily & quickly build our most common simulation types
  • Be templated, guide users into creating more thoughtful designs
  • Be modular, restrict the parts of the UI that can be changed
  • Offer multiple page types like introductions, dashboards, reports, and run comparisons
  • Use common components for charts, tables, histograms, and decisions
  • Themeable, users should be able to choose a desired theme
  • Customizable, users should be able to easily customize their projects using themes, colors, fonts, and/or layouts

Process

After a couple meetings discussing the product requirements with the team, I began by organizing a list of desirable features, grouped by functionality into categories. Providing an overall structure of how users would go about creating a simple turn-based simulation. From here I was able to organize an architecture and begin sketching out a basic user flow. Frequent iterations to this flow happened informally with my design lead and formally with the entire team, through those meetings we agreed on something similar to the following:

interface builder user flow

New features were being discussed and added to the list frequently, creating a bit of chaos, requiring me to think systematically and design for scalability. This mode of thinking allowed me to come up with a layout and flow that could be built upon regardless of what new features and settings would be added to this product in the future.

As we progressed I moved wireframes into InVision prototypes, then onto higher fidelity mockups/prototypes. I needed to match the Epicenter branding at the time and make the Interface Builder feel like an extension of that product. It was challenging and rewarding to come up with new styles and ways to build upon current components.

interface builder wireframe

Throughout the design process, our platform team extended APIs and built new dependencies to support the Interface Builder, while the front-end team worked on architecting and structuring the build. Once a front-end build was in place I worked with the dev lead to discuss implementation and work through constraints.

interface builder model check

Results (on-going)

After a shaky but well received ALPHA, our BETA version was released in late 2016. This project has continued to evolve as we get more and more testing data, platform updates, add features, and refine the currently implemented ones. I've even taken up coding new templates and adjusting themes for mobile end users, yay!

interface builder selecting groups

Checkout this mobile menu concept created using InVisionhere 👉

interface builder mobile concept