Oracle’s complete visualization library
Twelve Data Visualization Tools (DVT) components: chart, graph, gauge, NBox, pivot table, geographic map, thematic map, Gantt chart, hierarchy viewer, treemap, sunburst, and diagram. Producing twenty-seven distinct data visualizations.
All made available across two technology platforms: Oracle JavaScript Extension Toolkit (JET) and Oracle Application Development Framework (ADF).
Timeframe for this case study is during the design system transition from Skyros to Alta.
My Role
Sole Designer
Research
- Prototyping
- Design validation
- Customer interviews
Design
- Component design
- Interaction patterns
- Data visualization
- Visual design
Leadership
- Design system governance
- Product team advisory
- Engineering partnership
- Patented invention
Skyros to Alta
The design system evolution
Skyros was Oracle’s previous design system: glossy gradients, bevels and 3D effects. Alta replaced it with flat color, generous white space and large, legible figures, putting the data ahead of the decoration. DVT migrated with its behavior and APIs intact, so product teams could adopt the new look without code rewrites.
It was my role to conduct the interface design migration for all twenty-seven distinct visualizations. DVT was an extension of the design system, with its own unique interfaces and contexts that needed to be addressed on a case-by-case basis. Collaborating closely with the design system team, I methodically applied the new Alta system, and contributed newly created patterns and guidelines back to the design system.
Skyros
A sampling of the DVT library in Skyros before the migration. Everything from gauges, treemaps, pivot tables, charts, maps, and more.
Alta
A sampling of the DVT library in Alta after the migration. Everything from the Skyros library, plus new components such as NBox, Diagram, and Dual Timeline.
NBox
A new component in Alta, NBox is a grid for comparing a set of items across two factors at once. Each factor is divided into ranges, such as low, medium, and high, and where those ranges cross, you get a box.
The result is a visual map of your data: what scores high on both factors and what’s strong on one but not the other. Click any box to expand it and see what’s inside, while the rest of the grid stays visible around it, so you never lose context.
I was the sole designer for NBox, applying fractal design and the Gestalt principles of similarity and symmetry so the matrix can be scanned at several depths at once. Two US patents were generated from this component.
See the live NBox demo in the Oracle JET Cookbook
US 10,474,317,
Dynamic node grouping
Markers grouped by department, with each one relatively sized by quantity.
US 9,874,995,
Maintaining context
Selected box expands in place, holding its orientation within the grid while also allowing one-click navigation to expand other boxes.
Down to the individual
Turning grouping off displays each record individually with various attributes.
Raw design files
Some original designs of the various view states available in NBox.
Diagram
Node-link structures, configurable layouts, customizable display
I inherited Diagram mid-flight from a previous designer. That designer had laid its foundations before rotating off, and I joined to close the UX, UI and interaction gaps standing between it and release.
Those design gaps included stacks and grouping, editor panels, links, and a contextual menu.
See the live Diagram demo in the Oracle JET Cookbook
Display examples
Chord, arc, hierarchy and flow examples.
US 9,466,138,
Attribute-based stacking
End users can expand, collapse, pan, and zoom through grouped or stacked node containers. Diagram creators have a visually based editor canvas to work in.
Editor panels
Legend, search and link style panels.
Links
All link types and states, as well as the creation pattern, were designed and validated. User testing ensured the linking experience was fluid and intuitive, and state treatments were easy to understand.
Contextual menu
Also known as a transient toolbar, this menu renders options that are contextual to whatever object is being interacted with. The menu is available in both the end user and editor experiences.
Raw design files
Some original designs exploring Diagram solutions.
Dual Timeline
Enhancing the Timeline component to compare two data series simultaneously
The DVT Timeline component was already well used across Oracle. Dual Timeline was an enhancement to allow side-by-side data series comparisons. It was highly requested, broadly adopted upon release, and resulted in a US patent.
US 10,642,471,
Dual Timeline
See the live Dual Timeline demo in the Oracle JET Cookbook
Horizontal orientation
Comparing two employees’ event histories using the horizontal layout.
Vertical orientation
Comparing two professional tennis players’ records over the season using the vertical layout.
Working in Skunkworks R&D
One designer embedded in a specialized research & development engineering team
Product teams across Oracle submitted component requests, which were triaged for impact. The ones that were accepted as either an enhancement (ER), or scoped to become a new component, had a requirements document drafted up and got scoped into the release roadmap.
From there, the project gets assigned to a lead engineer. And when front end design work is involved, I got brought into the project. The teams operated on an Agile framework and worked in sprints, typically with the goal of running experiments to prove/disprove a theory or technical limitation.
I owned the front end design solutions across all visualizations and was responsible for executing rapidly. Proposing innovative solutions backed by hard data (collected through research, usability testing, and end customer feedback). The end customer being internal Oracle product owners made it easy to quickly connect for feedback sessions, accelerating design and derisking outcomes.
This R&D environment also afforded me the ability to explore ideas, both conservative & crazy. Sometimes, the crazier the better. But it also afforded the opportunity to contribute on the engineering side. Like when no engineer could align the Dial Gauge component’s needle to its tick marks accurately, and I was able to jump in, make the graphic and JavaScript tweaks, and got the needle working correctly.
I’ll never forget the opportunity to work in such a small, tight-knit and talented team. It taught me that nothing is impossible and that the only limitations are the ones we impose upon ourselves, and that a lot of design solutions can be found in nature, mathematics, and everyday life.
Outcome
Twenty-seven visualizations in Alta, two new components, and four US patents.
Every DVT visualization moved from Skyros to Alta across both JET and ADF, and the patterns created along the way went back into the design system. NBox and Diagram shipped as new components, and Dual Timeline extended Timeline to compare two data series at once. All three are still live in the Oracle JET Cookbook today.
Issued Jan 23, 2018
