SAP Help Portal

 

One of the most exciting projects I worked as a UX Designer at SAP was to contribute to the successful launch of the new SAP Help Portal in 2016.

With a team of 3 Designers, we styled HTML to our branding and semantics of the DITA Elements (Darwin Information Typing Architecture), designed the general outline of SAP Help Portal’s Document Viewer, Search Results Page, and Product Page.

Skills and Tools
Semi-Structured Interviews
Cognitive Walkthroughs
Balsamiq
HTML/CSS

Stakeholders
Developers, Designers, Documentation Writers, Product Owners, external customers, any end user who would consume documentation from SAP Help Portal.

My Role
User Researcher
UX Designer
Usability Tester

Team
3 UX Designers, 1 Visual Designer, 5 Developers

Project Duration
10 months

Usability Testing
We performed User Interviews with various stakeholders from different work areas to better understand how they consume and interact with SAP Help Portal.

We conducted Usability Testing on the placement of Document Search results inside the Viewer.

We created Feedback Survey to gather user feedback and with the results, we designed iteratively.

20151203_113155.jpg

Whiteboarding Design

After conducting user interviews, we began designing the information architecture on the whiteboard.

Product Viewer Page

Screen Shot 2019-11-12 at 7.23.00 PM.png

Based on user feedback, we divided the page into 3 sections:

  • Main page: Documentation content

  • Left pane: Table of Content with one-click features to Collapse-All or Expand-All, and the ability to hide this section

  • Right pane: Feedback feature, allows users to leave comments on the documentation

Screen Shot 2019-11-21 at 6.22.42 PM.png

Search Results on Viewer Page

The Viewer Page at the launch of SAP Help Portal looks visually different than the product now. However, I worked on the design of font, styling, and information architecture.

We conducted usability testing on where to display Search Results within the Product View Page.

We had 3 options from brainstorming:

  • On the side pane

  • Middle pane, change content

  • Pop-up

We created high-fidelity prototypes, and received feedback from users who weren't necessarily familiar with SAP's ecosystem.

Screen Shot 2019-10-12 at 2.15.12 PM.png

SAP Help Portal Home Page

The main focus of the Home Page is to allow users to search for SAP Products. Based on user feedback, we decided the Home Page would have more emphasis on Search function, and less emphasis on Browse function.

We decided to add some features to the Product Page so the Product page can become more of a standard entry point.

Users would also like the Home Page to:

  • Browse through the complete list of all SAP Products for their documentation

  • Navigate through the Learning Journeys for structured visual guides

  • Easily access available SAP Support resources.

SAP Help Search Results

We conducted usability testing on what key information was important to users when searching for products (Product, Version, Guide, and Language), and how to best present key information for each product.

We leveraged SAP Icon Fonts to stay consistent with www.sap.com.

SAP Help - Search Results.png

SAP Help Portal was a big project that spanned the duration of my Internship at SAP. It was a great opportunity to contribute my designs on a global scale, as the SAP Help Portal page receives over one million visits per year. I learned to work on an impactful project and collaborate with various stakeholders and components.