To help ensure design consistency, I identified major sections in the UI that persisted across platforms. Sections included: global navigation, a content area, secondary navigation, and a panel with context-sensitive controls. For each section, I provided designs optimized for each platform but still in line with the main visual language.

Here a user can review and edit their data import. The global navigation is at the top: showing a blue tab with "Prepare" highlighted. Secondary navigation is at left. Here a user can navigate an aggregated view of their dataset. The panel at right changes content and controls depending on the user's selection in the "canvas" area. The canvas area itself is for user content which in this screen would be "tabular" view of their data.

Here a user can build out charts. Note, the global navigation is at the top. The secondary navigation is directly below it but in a slightly different form than the previous example. Despite the slightly different form, a user can still navigate their dataset to select data members. And, just as in the first example, the panel at right is contextual to the content, changing depending on the user's selection in the "canvas" area.

In this view, a user can see relationships between various assets in their account. They can also set view permissions for sharing with others. The view "intent" is quite different than the first two examples, but the UI sections are still the same. Secondary navigation is at left. Here a user can navigate the hierarchy of their data assets: from dashboard to charts to datasets. The content is a list of who has access to what with the ability to change access privileges.

The visual design was based on the official SAP product visual identity, called "Gold Reflection." I wanted to align SAP Lumira's (or "Havana" as it was called at the time) look-and-feel to the brand but I also decided to make some changes to better accommodate what I knew about the user's needs.

For example, a SAP Lumira user would likely be in the product for long periods of time. As a result, I softened the typography so that it was less obtrusive but still had a clear hierarchy.

I re-used many standard colours from the "Gold Reflection" palette. I also added a few new colours to allow for a wider range of selection states needed for SAP Lumira.

An example of the modal dialog for the web client.

Fancy dials to animate part of a chart. They're designed for both touch and mouse interactions.