SAP

The Project:

Improving the visual look and feel on SAP.com

The Problem

Our pages on SAP. com (the website) did not follow any visual consistency with color and graphics. We aimed to change that with a set of templates.

The scope

20+ Pages across SAP.com - mostly at the L1 and L2 level of the navigation.

The plan

• Prioritize list of components that could undergo changes
• Work with the user researcher to see what users think of the current components design.
• Design new templates for said components.

involving user researchers

Survey insights

Some factors on our scale when testing the current design:
Visual appeal, Overwhelmingness, Outdated/ Modern, Generic / Unique
There were more which I haven't included to keep this case study short.

What stood out:
Photography of people didn't make much sense when associated with products.
Some of the images seem outdated.
Would prefer seeing product screenshots.
Patterned backgrounds did not test well.

When it came to color:
Users wanted to see more color not just a singular one.
‍

The whole test results was compiled into a set of recommendations
(Not shown due to NDA)
‍

Based on the recommendations - we started with photography and then delved into making visual templates for the components.

wORKING WITH

PHOTOGRAPHY

We standardized our style of photography as part of these templates to make it more modern.

For this, we collaborated with the Brand team to shortlist a style and list of photography to use for our templates.

Breaking it down by

Components and parts

01. Heroes

Replacing smiling humans with a mix of photography and UI elements.

02. Video thumbnails

Replacing video thumbnails with colorful graphics and titles to increase click rate.

03. Adding approved simplified UI

Highlighting certain features on a screen to match the content.

04. Visualizations for roadmaps

Adding visualizations for roadmaps to help users understand how roadmaps at SAP work.

1) Heroes

Before

Most of our heroes had human photography.

From our user tests, most users wondered why there were looking at smiling humans and how they were related to the product.

AFTER

We created more diverse templates which included a mix of both human photography and product (UI).

When showed the newer version, our users mentioned that it looked more modern, provided more context, and added practical value.

2) Video thumbnails

Before

Our video thumbnails weren't standardized

And most of them did not match the rest of the page visually.