The Signature Design under the Microscope

By Esther Blankenship, SAP User Experience, SAP AG – August 6, 2008

In this article, I’d like to briefly describe the design process we followed to arrive at the Signature design and take you on a tour of the key visual aspects of the design.

 

The Design Process

When we kicked off the Signature design project back in early 2007, we compiled a team made up of two development architects (Peer Hilgers and Leif Jensen-Pistorius) with a long history of visual design expertise, two new in-house visual designers (Vera Legisa and James Morrison) and one visual design manager (myself). Next, we chucked everything aside except for our vision and mission statements. The designers then scoured the internet, hunted through magazines and photographed real world objects in an initial exploration phase. Mood boards were then assembled with images of award-winning products and everyday objects from every imaginable design discipline: car styling, architecture, furniture design, consumer electronics, household appliances, jewelry design, and so forth. Everything was fair game except software design. We were out for a fresh, distinctive look and steadfast about not aping current industry fads. The reason for this is that in our business, the visual designs we create today will probably first get to most of our customers in three to four years. Setting trends saves us from a Sisyphean game of catch up.

 

An example of the Signature design, here for SAP Business ByDesign

Figure 1: An example of the Signature design, here for SAP Business ByDesign 

After sifting through piles of pictures we hit upon some conclusions about what made the chosen objects engaging, exciting and desirable. Key in our analysis was the realization that by juxtaposing contrasts – such as dark and light, organic and geometric, open and closed, rounded and square, glossy and matt – many objects acquire an enormous emotional interest. One of the best examples that we found of this was the Eva Solo tea maker. This award-winning design features an unspectacular glass and metal canister, but the zinger is the plush, soft sweater pulled up over the round base, keeping the contents warm and cozy. Dubbing this juxtaposition effect “yin yang,” we decided early on to embrace this as one of the primary drivers of the new design.

The team also examined the mood board images for their qualities as real physical products. For example, we studied how the different materials react when light falls upon them, what shapes are particularly effective, where the logo is placed and how it is pressed into or placed on the product. That kind of thing.

The visual designers then sketched and drafted some 30 or 40 comps which the team then pared down to a handful of strong candidates. After reviewing these ideas with key stakeholders, including members of our executive board, the Signature design (then code-named “Nova”) was the clear winner.

Next on the agenda in the process were several feasibility rounds with our development. Critical design features such as alpha channels, the irregular window shape and drop shadows were up for grabs. In the end, a few small compromises were made to compensate for the rendering capabilities of different technologies. But by and large, our developers were so won over by the design that they investigated every technical possibility to retain as much of the proposed design sophistication as they could.

Finally, the longest, least fun and most important part of the whole process has been writing the piles and piles of design specifications needed to support the long journey from “slideware” to software. Over the last two years, we have been refining, specifying and collaborating with a series of fantastic front-end developers to bring the Signature design to life and to as many SAP products as we can. That has been a huge effort, but it has also been tremendously rewarding. Personally, I find it amazingly satisfying to fill out my travel expense report in this design that was “just” a Photoshop comp a year ago!

 

A simplified version of the design process including a rough timeline of each phase

Figure 2: A simplified version of the design process including a rough timeline of each phase

 

The Materials

From the mood boards assembled in the exploration phase of the design, the visual design team zeroed in on two main “materials” to give the Signature design its unique character: white porcelain for the content area and a dark blue brushed metal for the window perimeter. The contrasts of light and dark, sharp and rounded corners as well as the thickness and feel of each material expressed the yin yang spirit we sought from the analysis phase. To the best of our knowledge, none of these materials has ever been used in visual design for business software before. When using these materials we continuously imagined what the UI would look like if it were a real physical object that could be picked up and handed around a conference table. Therefore, we used the metal as if it were a clasp wrapping around the porcelain slate, holding it in place and giving the product a very tangible feel.

 

Illustration of the usage of “real” materials in the design of the UI

Figure 3: Illustration of the usage of “real” materials in the design of the UI (click here for a larger image)

 

The SAP “Home” Icon

Located in the primary optical area of the screen, the SAP home icon is a visual anchor point of the main window. It also takes the well-known “home” visualization a step further by integrating the appearance of the icon into the look and feel of the software environment. By occupying an intentionally ambiguous architectural space between a residential and commercial building, we aspired to create a more appropriate metaphor for “home” in the context of business software.

The SAP “home” icon

Figure 4: The SAP “home” icon

One could almost maintain that the home icon is really a piece of architecture “built” for our software. As in the rest of the Signature design, it was designed with real materials in mind. In this case, we chose glass, concrete and steel.

 

The Clasp Metaphor

In the main window, the metal clasp wraps from behind on the left to accommodate the contextual navigation. The visual robustness of the area, which can also be collapsed, draws the user's attention to this important navigational area of this floor plan and is one of the main visual features of this window type. When the left navigation is collapsed, the clasp metaphor is maintained even in the minimized size.

The clasp metaphor accommodating the left navigation main screen of SAP Business ByDesign (left) as well as the scrolling mechanism for the work center items (right)

Figure 5: The clasp metaphor accommodating the left navigation main screen of SAP Business ByDesign (left) as well as the scrolling mechanism for the work center items (right)

In the application windows (shown in figure 6), the clasp provides a frame for the contents of the screen. The openings at the top and bottom give the screen a light, inviting feel, while at the same time again emphasizing the dimensional planes and the physical qualities of the visual design.

The clasp in the application window of SAP Business ByDesign running in the SAP NetWeaver Business Client

Figure 6: The clasp in the application window of SAP Business ByDesign running in the SAP NetWeaver Business Client

 

Logo Placement

The product logo is integrated into the porcelain material and, in most of our products, positioned at the bottom center of the screen. This placement harks back to the roots of “real” product design, e.g. cell phones, televisions, kitchen appliances, etc. Featuring the logo in this way subtly reinforces the SAP brand. Although somewhat unusual for a software product, the decision to use this treatment resulted from the analysis of real objects in the analysis phase of the project.

 

Logo placement and treatment

Figure 7: Logo placement and treatment

 

Visual Support for Different User Tasks

Similar to the way the shape of street signs conditions drivers to subconsciously recognize the content of the traffic message, the design of the outer shape of the window signals the distinct task type of that screen. In SAP Business ByDesign, for example, there are four main window and task types: the main window (where users are pushed information to analyze and organize their work), the application window (where users change and enter data), the supplemental window (with helpful information not absolutely necessary to complete the task at hand) and modal dialog boxes (which require immediate user response).

 

The visual design of the shell supports the distinction between the Control Center / Work Center window and the application window

Figure 8: The various window types are outfitted with variations of the Signature design in order to provide a subtle visual cue to users about the different task types (click here for a larger image)

 

The visual design supports different user tasks

Figure 9: The same window types as in the previous figure, but here filled with content (click here for a larger image)

 

Harmonized SAP Product Family through Signature

The ultimate goal of the visual design team is to give our users the most attractive and productive working environment possible. Through the Signature design, we also strive to harmonize SAP’s product brand to further optimize the user experience of our software for our customers.

 

The Signature visual design leads to a harmonized SAP product family

Figure 10: The Signature design visually harmonizes the SAP product family (click here for a larger image)

As you can see above, the Signature design has been, and is being, applied to many of SAP’s major products. Finishing and evolving this should keep the SAP User Experience – Visual Design team busy for a little while longer. So, stay tuned for further developments and let us know what you think of the new visual design!

 

Closely related articles:

 

To top top