A work list displays a collection of items a user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it. The work list is a versatile floor plan that offers three main variants: a simple work list, a work list with tabs, and a work list with one or more KPI tags.
A new generation of SAP applications with Fiori.
The design challenge!
Design a new responsive design language and design system that touches all of SAP’s business applications. Work with product owners and cross functional teams to develop and design new user interface components and drive the development of a new iconography system.
What's SAP?
SAP stands for Systems Applications and Products in Data Processing. SAP was founded in 1972 by Wellenreuther, Hopp, Hector, Plattner, and Tschira in Germany. SAP software products are instrumental in helping companies manage their financials, logistics, human resources, and other business areas. SAP is the world’s #1 leader in ERP and the 3rd largest software company in the world with an annual sales of $27.4 billion. As of 2010, SAP has more than 140,000 installations worldwide, over 25 industry-specific business areas and more than 75,000 customers in 120 countries. It is estimated that 70 percent of the world’s transactions touch an SAP system. The majority of SAP’s revenue derives from cloud and software business solutions.
My Role
As a senior designer at SAP, one of my main responsibilities was to help in the development of SAP’s Fiori design system. As a senior designer, I owned 6 U.I. components where I defined the user experience and interactions from concept stages to production. I worked with product owners, product managers and users to design and test each component to ensure it meets business and user needs.
A New Design System Called SAP Fiori
The Cloud has made it possible for users to access data, applications, and services over the Internet, and eliminates the need for costly hardware, such as hard drives and servers. With the growing demand of businesses wanting to run via the cloud; SAP needed to rethink their current line of business applications and redesign them for the cloud. SAP began to develop a brand new set of business applications called “Fiori”.
SAP Fiori is a design language and user experience approach developed by SAP for use by SAP, its customers and its partners in business applications. The SAP Fiori design language is used in SAP applications, including the S/4HANA and C/4HANA suites, SAP Analytics Cloud, SAP Data Hub, SAP Ariba and others. SAP Fiori designs can be implemented using almost any technology, though SAP provides Fiori-compliant UI libraries in its SAPUI5 JavaScript library, as well as the SAP Cloud Platform software development kit (SDK) for iOS and SAP Cloud Platform SDK for Android.
SAP launch pad created with the Fiori design system.
Working As A Team
As a senior product designer within a large organization like SAP, it takes a village to create monumental change. SAP’s Fiori design system is the accumulation of many designers, product owners and product managers coming together to build a series of responsive applications powered by the cloud. Being 1 designer, of many, I contributed to the design system by owning 6 U.I. components where I worked across SAP’s ecosystem and product teams to design and develop the U.I. components below.
U.I components I designed & developed.
Iconography
SAP icons used within SAp’s Fiori Applications.
Advance Filtering
Smart filter tool bar used to filter complex data.
Icon Tab Bar
A navigation element using icons.
Calendar Picker
A date picker allowing user to pick a single date or multiple dates.
Wizard Floor Plan
A guided experience braking down complexity into small steps.
List Report
A report comprising of many inline elements.
Iconography Designs
The SAP icons were designed to be simple and friendly with a style that is consistent in terms of size, stroke and balance. Each icon was created using a design problem based on how it will be used, and where in the product it will be placed. Simple metaphors were used to display what the icon is, and it’s function within a user interface. Each icon was drawn by hand, scanned into Adobe Illustrator and pixel aligned to ensure clarity for the screen.
Smart Filter
With the Smart Filter, users can generate a basic search and render a filter bar based on the searched criteria. Users no longer need to manually input each criteria of the filter, to zero into 1 area, instead the Smart Filter will auto generate the filter fields.
A typical use case for this U.I. component is within SAP’s warehouse management systems, where users need to filter into very specific items without the need of manually inputing each category of a filter, thus reducing time and user frustration while enhancing performance.
Example of the Smart Filter U.I. component in isolation.
Smart Filter with a SAP listed report.
The Calendar Picker
The calendar picker is a visual component allowing users to select a date within an application. Users can choose a single date, multiple days, entire weeks, or a date range within a dialog box within an application to select a time period. This component has a variety of use cases within SAP’s applications and is the most used U.I. component found in the SAP Fiori Design System.
Example of the calendar picker.
Wizard Floor Plan
The wizard floor plan allows users to complete a long or unfamiliar task by dividing it into sections and guiding the user through it. The wizard consists of the walkthrough screen, where the form sections are revealed in sequence after each one is completed, and the summary page, where the form is displayed in read-only mode for assessment and final submission.
Example of wizard floor plan.
The Work List Report
Example of list report.
Want to learn more about this case study or others projects?
For details on my design process or interested in collaborating together, feel free to reach out.