|The SAP Theme Editor|
|Brand Adaptation of the mySAP Enterprise Portal|
|Branding and Usability in Software Products|
|Resources: Visual Design|
By Michael Hatscher, SAP AG – February 21, 2003
Companies strive to align their outward and inward appearance and presentation with their corporate design or corporate identity (CI), trying to establish their own name and logo as a brand. Getting all of the customer's printed and online materials in visual sync – stationery, business cards, brochures, the intranet, and the corporate Internet site – creates a feeling of unity and identity for people within the organization and an impression of quality and solidity to the outside. The CI's goal is to communicate a carefully shaped corporate image to its audience – the company's customers and partners, as well as its employees. It can be used as a channel for expressing the corporate culture. That incorporates the way the members of an organization see themselves and their organization, how they interact and communicate with each other, and their common understanding of how to address and solve problems. So the CI can remind employees of the corporate culture whenever they deal with materials that incorporate the CI (carrying the corporate brand) and help foster a feeling of belonging.
Adapting the visual appearance of mySAP Enterprise Portal to the customer's CI is very important, at least for some of our customers: The portal is always there; it constitutes the frame in which users work. Designing this frame to effectively convey the company's management view helps confirm that it recognizes and agrees with certain values.
The same holds true for customer-specific development projects for outward-facing Web applications. These apps have to be in sync with all the other marketing material and outward appearance of the company in order to create a unified impression. In this case, the application (or the service provided through the software) is part of the marketing strategy of the company. Its usability, as well as the quality of its visual design, contributes to shaping the public image of the company.
Most customers already have a very detailed CI for their printed materials and outward-facing Internet site. When it comes to the intranet site, there can be different levels of alignment. In a number of cases, mySAP Enterprise Portal replaces a (sometimes huge) number of unrelated, often regional intranets, each with their own design. In this case, it is a good idea to overhaul the look and feel of the intranet solutions and come up with something completely new – in order to ensure consistency in visuals and usability.
mySAP Enterprise Portal 5.0 offers a wealth of options for customizing the look of the portal. Using the Theme Editor, an administrator can easily change a few colors, replace the graphics files for some interaction widgets, and create new styles. The styles are then published and can be used throughout the company. If more profound changes are required – for example, changing the position of iView window widgets in the iView tray header, adding color-coded nested hierarchies to the appearance of the detailed navigation iView, or altering the user interaction in the portal – the customer will have to invest in customer-specific development efforts (Java or ASP development; see interview with Sven Kannengiesser in this edition).
However, in order to achieve a convincing design solution it may not be sufficient to rely on the administrator's design skills and taste. A design consultancy can offer higher quality support in this area. Designers don't just consider the existing CI documents – they also contribute their in-depth knowledge of things like color perception (including the varieties of color blindness) and the emotional effects of colors and shapes. A high design consistency can only be achieved with a thorough design sketch prior to style sheet adaptations and product knowledge is a must, too. The Usability and Design Group within SAP's Global Professional Services Organization can provide these services, as well as consulting on all matters relating to enterprise portal design and usability.
As consultants in the Usability and Design Group (formerly the SAP Portals Europe Professional Services Organization User Interface Design Group), we have been involved in mySAP Enterprise Portal 5.0 implementation projects for large corporations. Design work was often not part of the original scope and we succeeded in convincing project managers and customers to incorporate design efforts into the project.
In some cases we devised a special portal style guide to incorporate mySAP Enterprise Portal features. This usually occurred by first analyzing the existing CI style guide and then mapping the CI style guide elements to the portal product and its elements – colors and fonts in navigation areas, content iViews, and widgets. We then designed simulated screenshots using graphics software like Adobe Photoshop or Macromedia Fireworks and presented them to the customer. After the proposals had been agreed, the actual design adaptations took place in mySAP Enterprise Portal's Theme Editor (see article by Esther Blankenship and Inge Winkler-Hansen in this edition), and the final style sheets and accompanying graphics files were exported and sent to the customer's site to be incorporated into the product (if we were not already working at the customer's site). Collaboration between the customer and the technical consultants usually worked very smoothly; each successful portal implementation and design project serves as another success story for SAP.
In a number of cases our close collaboration with the customer-specific development and portals groups helped us a lot in achieving our goals and plans – for example, if the customer insisted on getting certain design elements that were not part of the original portal product. The experiences from these projects were collected and fed back into the Product Design Center (PDC) to be analyzed and considered for inclusion in the next revision of the product. Thus our close contact to the PDC and the user interface designers in the mySAP Enterprise Portal platform and knowledge management groups helped us to solve some tough problems and allowed us to get customer project insights to these more central groups.
Style guides are collections of designs and templates: highly in-depth descriptions of small details of the design for print or online material. They usually contain extremely detailed information on colors, font faces, font sizes, formats, measurements, distances in pixels, and so on. Good style guides really help the designer to develop something new without overly constricting the creative professional's options.
In the projects we did, we came across style guides in various stages of development. We usually welcomed the style guides as they could help reduce consultation with the customer and provided a basis from which to start. Yet, in at least one case, we came across a style guide that provided a detailed description of an interaction design that we simply could not agree with. As far as we were concerned the use of the element in question was plainly wrong and we told the customer so. However, the customer had already built another application following this style guide and had had the style guide tested (and approved) by another design consultancy. For the sake of consistency they insisted on sticking with the design we considered faulty. In this case it is clear that consistency does not always lead to better usability or better design: Consistently following bad design decisions lead to a consistently bad user interface.
In this section you can see some examples of successful projects. Figure 1 shows the standard look of mySAP Enterprise Portal 5.0. This look can be changed easily using the Theme Editor. Figure 2 presents an example of the modifications possible with this tool. If more profound changes are needed, appropriate development effort has to be invested.
Figure 1: Portal standard design Mango and Polarwind (mySAP Enterprise Portal 5.0)
Figure 2: Customized mySAP Enterprise Portal 5.0 using the Theme Editor
Figure 3 shows the solution for a major customer – the United Nations. (It should be noted that this result could only be achieved by a significant amount of change to the original portal product.) A graphics designer within the organization developed the design sketches. We then worked very closely with the designer and our internal development teams to create the solution seen here. Note the efforts made to change the branding and the navigation area of the portal: The logo has been moved to the right, spreading across two frames; there is an additional context-sensitive navigation to the right; the portal itself has been changed to accept non-logged in users as well as authorized users, with the latter admitted to some restricted areas of the portal. A very similar feature, guest user access, has meanwhile become part of the standard product with the portal's Service Pack 5: This allows users to log into the portal without being prompted for a user id/password, if this has been configured by the administrator.
Figure 3: Highly customized mySAP Enterprise Portal 5.0
Between these extremes we have had a lot of projects for design adaptation with different degrees of "desire for change" on the customers' side. Some just wanted their logo to be in the branding area and some colors adjusted (which is easily done using the Theme Editor), others opted for huge changes.
Branding is an important service offering in consulting. Corporations realize that enterprise portals and other applications serve as parts of their communication strategy, be it inward or outward facing, and thus need their software products to be adapted to the look of the other collateral and printed or online materials. Providing these services needs expertise in design, usability engineering, and technology as well as communication and negotiation skills (and a good deal of perseverance).