Digital Boardroom

The flagship SAP product launched as the CEO's keynote presentation at SAP's annual Sapphire Now conference in 2016.

I joined the team in 2016 as the primary UX and Visual designer.

 

TEAM

TIMELINE

Product Expert 2016 - 2017
Developers
UX Designer
Financial Controllers

conference-edited3.png
 

What is Digital Boardroom?

Digital Boardroom offers transparency to businesses by bringing together data insights into one central place.

The purpose was to replace static PowerPoints and empower executives to present business insights, ask “what if” questions & make strategic decisions in the same meeting.

Digital Boardroom is made for creators, the people who manage dashboards, and the executives who make decisions based on these insights. It enables creators to organize dashboards and then share them with executives on any device, from large touch screen installations to mobile phones.

 
 

 

Project Overview

The Challenge

In a typical board meeting, if an executive had a question that hadn’t been addressed in the PowerPoint, analysts would need to do a second round of data discovery and presentations to answer the executive's question.  

How might we make it easy for content creators and business executives to access live data on the fly and during board meetings?

The Goal

To build a seamless interactive analytic experience that connects live data from many sources into one central place.

THE REQUIREMENTS

  • Integrate the POC into SAP Analytics Cloud: Digital Boardroom started as a hardcoded POC which was tested internally. My task with the initial team was to explore how we can productize Digital Boardroom and integrate it into the SAP Analytics Cloud landscape.
  • Design a responsive viewing experience: The POC of Digital Boardroom was hardcoded to only function on a 3 screen setup, however, not all customers have or want this setup. Aside from other presentation setups, I also needed to think about how executives could access Digital Boardroom on their phone or tablet.
  • Enable Analysts to stitch together multiple dashboards: I needed to make it easy for an analysts to synthesize, manage & edit large amounts of data and presentations from multiple stakeholders.
 
 

My Role

As the primary UX/UI Designer on Digital Boardroom, I was responsible for the Visual Design, UX and UI Design for the application:

  • Multiple visual themes & guidelines which were applied to Digital Boardroom and used as standards for internal customers.
  • Wireframing & interaction patterns to guide users through the creation of Digital Boardroom presentations & responsive stories.
  • Interaction prototypes in low fidelity (HTML/CSS) and high fidelity (Framer/After Effects), for example to explore how widgets can responsively adjust to any screen.
  • UX & Visual mockup specifications in Zeplin and design support for development when technical limitations required us to change the workflow.
  • Plan the product roadmap by collaborating with internal Financial Controllers & Product Experts to gather user requirements for universal and C-suite edge cases.
 

1. Visual Guidelines | Sapphire 2016

CREATING A VISUAL GUIDELINE FOR DATA

 

Overview

When Digital Boardroom was selected as a keynote for the SAP annual customer conference, Sapphire 2016, it was operating as a demo.

This meant I had to hard-code a visual standard & guideline design for the presentation that didn’t yet exist in the production application.

 

My goal was to take the styles I defined for the TV ad campaign and refine them into a visual design that looked great at Sapphire but could be recreated and comply with internal standards once the application was built out.

On top of creating the visual theme, I attended the conference to test the interface on the multiple screens like the giant keynote projection and conference booths.

 
 

What I Learned

The fast paced, high velocity environment in the short lead up to Sapphire helped me learn how to make good decisions quickly.

At the conference, I was able to experience how the application could be used in a scenario that is more complex than what we originally designed for.

 
Digital Boardroom being showcased at Bill McDermott's (CEO) keynote with Christian Klein (COO).

Digital Boardroom being showcased at Bill McDermott's (CEO) keynote with Christian Klein (COO).


2. Responsive Dashboards

FLUID USER EXPERIENCE ACROSS DEVICES

Digital Boardroom was first developed for executives with a Minority Report set up: at least three massive screens. It looks awesome, but is very expensive and limiting. And so, the second design goal was to allow customers to use the application on a screen of any size.

 

Overview

The concept was to break out of the strict single page container and build a shell for multiple responsive dashboards that adapted to any device.

sketch_creation2.png

I worked with the SAP Analytics Cloud team to design a new responsive layout that could be used in creating and importing dashboards to Digital Boardroom.

Based on standard column grid logic — like Bootstrap, which I used for initial prototyping — I designed an experience for users to layout widgets, build dashboards, and then import them into Digital Boardroom.

 
Wireframes: Layout logic flow for responsive sections

Wireframes: Layout logic flow for responsive sections

 
 

Discovery

After interviewing users, the 3 main use cases of the Digital Boardroom came to light:

  1. Executives will use Digital Boardroom to present data stories in a board meeting.

  2. An Executive will use Digital Boardroom as their central cockpit for information across the organization.

  3. Teams will use Digital Boardroom as a large scale data monitoring system, ie. to track output on a industrial manufacturing floor.

 

Each use case had varying needs and requirements:

  1. In board meetings people needed to keep and follow an ‘agenda’ of the meeting.

  2. In the cockpit use case, the user wants a high level overview of their organization and the ability to dive in deeper.

  3. The last use case is a more simple monitoring system for teams who watch important KPIs, but don’t directly interact with the system as frequently.

 
Sketch Userflow for creating Agendas & Dashboards and the touch Navigation menu.  

Sketch Userflow for creating Agendas & Dashboards and the touch Navigation menu.  

 

Wireframing

Given the multiple different use cases, here are some of the questions I explored during wireframing:

  • How might the multiple page experience of Digital Boardroom work on a single screen?

  • What is the easiest way to present on multiple screens without requiring manual configuration of the system?

  • How might executives apply & create data filters when using a large touch screen?

  • How might the design improve user accessibility so it’s easier to access different menu buttons and toolbars on very tall touch screens?

 
viewing-overview.png

Prototype designed to test a responsive transition between pages.

 

Delivery

The responsive user experience was released in the 2nd version of Digital Boardroom. The default layout shows as many full size dashboards as possible, and any left over space is populated by a preview of the next dashboard.

 
SAP Digital Boardroom in Production: Navigation Menu

SAP Digital Boardroom in Production: Navigation Menu

SAP Digital Boardroom in Production - Showing Control Menu


3. Overhauling the Creation Workflow

Import, Organize, Build, Connect

I travelled to work in Germany at the SAP HQ for 3 months. My goal was to research the internal SAP IT team, our European customers, and help build the foundational UX needed to redesign the creation workflow of Digital Boardroom.

 
sap hq

Overview

Our executive users were very excited about the responsive Digital Boardroom viewing experience, but the content creators - the ones who did the hard work of building & pulling all the dashboards together and setting up the Digital Boardroom - were still facing lots of time consuming UX pain points.

 

Discovery

While executives found the dashboards easy to understand and use, content creators found the initial creation experience very rigid.

How do we redesign & build a better creation platform for content creators on Digital Boardrooms?

  • Afford for flexible content structures: Users were required to organize their content into linear ‘agenda item’ structures, which was too limiting for most use cases.
  • Improve how users link dashboards: It was high priority to have a flexible and intuitive way of creating links between dashboards without needing to open each source as they compiled multiple Stories.
  • Improve how users work with many dashboards: If Digital Boardroom is meant to be a central data cockpit, I needed to think about how to reduce friction for content creators managing many Stories.
 

Sketch Wireframe: Exploring userflow & interaction patterns of populating topics for a boardroom.

Userflow: Overall journey & user flow of creating a Digital Boardroom dashboard or agenda. 

 

Wireframing

Building wireframes for the fluid creation workflow. I fleshed out the Topic UI, Story Library, and improved linking, and then presented wireframe prototypes to internal users and select customers.

The Topic UI is a simple container for people to put pages/dashboards into an order. Topics can then have any number of children topics, which is visualized in a tree-like structure that shows all the pages/dashboards in the Digital Boardroom. This made it easier for content creators to see how different pieces of the dashboard are linked.

 
Wireframes: Adding pages from Story Library into Boardroom Topics

Wireframes: Adding pages from Story Library into Boardroom Topics

Patterns in Digital Boardroom creation; dragging and drop pages from the Story Library into topic – and rearranging pages in topics.

The Story Library allows content creators to upload stories to a library in batches for use in the Digital Boardroom, resolving a pain point people experienced when they had trouble remembering what Stories are available and what topic they were added to.

I created a workflow that allowed people to easily create a link between Stories by selecting a source (chart or dashboard) and then dragging it to the destination dashboard.

 

 

Delivery

After the UX was approved by the stakeholders, I held a meeting with all the developers on the project to communicate the overall UX vision and details of each workflow. During the implementation process I sat right next to my development team to provide immediate UX support and make sure we were all on the same page.

 
 

What I Learned

It was an amazing opportunity to work alongside my German colleagues to bring the design concept to a reality. This was the biggest and most in-depth project where I owned the UX, managed the priorities, produced concepts, wireframes, and visuals over an intense 3 months.

It was also great learning how to communicate across language barriers and experience the cultural differences in Germany. The experience allowed me to see things from my German colleagues’ point of view, perspectives that were hard to understand when I worked with them over the phone and email from Vancouver.