← All work
Mobile SaaS Data Visualisation

Designing Intuitive Chart Visualizations at SAP

Optimizing 10+ chart types for truly mobile-native interactions, helping SAP Analytics Cloud deliver a data experience built for the way business leaders actually work on the go.

My role UX Designer
Timeline 4 months
Team 4 designers, 10+ developers, PM
Tools Figma, Claude Code

🔒 This project is under NDA. The work shown here is intentionally limited I'm happy to walk through more detail in a conversation.

Context

SAP Analytics Cloud: Leader in Data Visualization

SAP Analytics Cloud (SAC) is a leader in Business Intelligence, renowned for its powerful web experience that helps enterprises plan, analyze, and act on data at scale. SAC continuously stays ahead of the curve introducing new AI-powered features, expanding enterprise planning capabilities, and helping businesses make smarter decisions faster. It is a platform that sets the standard in the industry and keeps pushing boundaries.

Problem

Mobile Experience Falling Short of User Expectations

Unlike the web experience, the mobile team had noticed significantly falling user adoption rates. The app's UI was visually outdated, functionality hadn't kept pace with the desktop version, and it wasn't truly mobile-native it was simply a shrunken version of the web app, with no consideration for touch interactions or on-the-go usage patterns.

"I just need to check my numbers on the go, but the mobile app is so difficult to use that it's easier to wait until I'm back at my desk."

Solution

Shifting to a Mobile-First Strategy with a Brand New App

The team decided to build a brand new app from the ground up. Designed to embrace Apple's latest Liquid Glass iOS design language and packed with all the latest functionality, the new app would be truly optimized for mobile making it effortless for business leaders to view and interact with their data on the go.

My Contributions

Optimizing 10+ Charts to be Mobile-Native

📱

Mobile-first chart interactions

I helped define many core chart interactions from the ground up not adapted from the web, but truly mobile-first. This included interactions like scrubbing, swiping, and tap behaviors, as well as tooltip sizing and content, how to surface complex multi-element data on a small screen, data variance display, and the end-to-end filtering flow.

📐

Chart Sizing Guidelines

I defined comprehensive sizing guidelines for charts on mobile covering minimum and maximum dimensions, how charts scale across device sizes, and how they behave in different layout contexts. This gave the engineering team a clear, consistent reference for implementing charts that feel intentional and readable on any screen.

⚠️

Error and empty states

Designed a comprehensive set of error and empty state patterns for the mobile experience covering data loading failures, no-results views, and connectivity issues. These states had previously been inconsistent across chart types, leaving users with no guidance when something went wrong. The new patterns gave engineers a clear, reusable system to build against.

Design Decisions

Prioritization: What Matters on a Small Screen

One of the core challenges across all chart types was deciding how much data to surface at once. On mobile, screen real estate is limited and cognitive load is high - showing everything is not the same as showing what matters.

Tooltips: a case study in prioritization

Tooltips were one of the most complex areas to get right. On certain chart types like the Box Plot, a tooltip can contain up to 9 lines of data - minimum, maximum, median, quartiles, and outliers. Displaying all of that in a single floating tooltip on a small screen is overwhelming and often illegible.

We decided on a two-tier approach. A compact preview tooltip surfaces only the top 3 most relevant data points inline, giving users just enough context without cluttering the chart. If users want the full picture, they can tap to expand into a full-screen tooltip, where the complete dataset is presented across swipeable pages. This keeps the initial experience clean while still making the full data accessible to those who need it.

The tradeoff was discoverability - not all users would know to tap for more. We addressed this with a clear visual affordance on the preview tooltip indicating more data was available, and validated the pattern through usability testing.

Outcome

Successful Beta Version Launched

The initial beta version of the redesigned SAC mobile experience has been successfully launched. I participated in QA testing alongside the development team, working through edge cases and validating design behavior in the live build. Once the results of additional user testing are incorporated, the app is expected to launch publicly on the App Store in late 2026.

Feedback

A Few Kind Words From the Team

Reflections

Thinking Mobile-First, Not Mobile-Adapted

Mobile is not just a smaller web

This project deepened my understanding of what it really means to design for mobile. Translating data-heavy chart interactions from web to mobile isn't a 1:1 process - touch targets, thumb zones, screen real estate, and legibility at small sizes all require fundamentally different thinking. I learned to question assumptions that worked on desktop and design specifically for the constraints and behaviors of a mobile context.

Working within technical constraints

This project taught me how to work closely with developers to fine-tune interactions at a detailed level - every gesture and edge case required careful back-and-forth to get right. I also learned how to design within the real constraints of iOS theming, where the system has strong built-in opinions that shape what's possible.

Working at SAP, Vancouver

Working at SAP, Vancouver