Case Study: SAP Lumira
See foundation styles, the unified UI frame, and the rationale.
Designing across platforms
SAP Lumira is an web application that was designed for multiple platforms: a desktop client, a web client, as well as iPad. Since one user could touch all UIs, my task was to ensure visual consistency across the suite.
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.
Major UI sections in "preparing data"
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.
Major UI sections in "building charts"
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.
Major UI sections in "managing data assets"
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.
Foundation styles: typography
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.
Foundation styles: colours
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.
Example visual-design specification: list-view.
List-view specification for iPad.
Getting into the details: what are the various states for both touch and mouse interactions?
An example of the modal dialog for the web client.
Examples of drop-down menus and mobile popovers.
Fancy dials to animate part of a chart. They're designed for both touch and mouse interactions.
Future design explorations: creating charts
A user can select data members to begin building out charts from the panel at left.
Future design exploration: editing charts
Controls for manipulating chart types and data order are in the panel at right.