Shot of Corridor in Working Data Center

NETAPP

V1 Release of Oracle Cloud CPQ based application (Oracle JET UI) to replace legacy quoting app.

 

CPQ (Configure, Price, Quote) is a cloud commerce solution serving both Internal (Sales) and External (Partners) users, enabling ~$6 billion in annual revenues.

BACKGROUND

MVP Release of Cloud-based Inventory app for Restaurant sector

​​HotSchedules Cloud-based Inventory app provided Real-Time Data for On-Hand Inventory, Waste & Costs, Vendor Management, etc. Customers of this app were regional and large restaurant chains. End users primarily Restaurant Managers. App also included a component for Regional Managers.

HotSchedules derived its name from their original Scheduling app for Restaurant Workers. Since then, HotSchedules has strategically grown with the acquisition of various startups that had other enterprise apps serving the Restaurant sector. Thus, HotSchedules strategic goal being to offer a seamless end-to-end suite of enterprise apps for the Restaurant sector, from scheduling workers to regional managers, etc.

MVP Release was subsequently restricted Desktop/Tablet only, due to the complexity of the tables and features. Afterwards, certain features/tasks would be available on Mobile, that were conducive to a small mobile screen (i.e., Receiving Orders).

HIGH LEVEL TIMELINE
Condensed timeframe of just 4-months.
MAKE OF THE TEAM
Hands-on UX Design Manager, plus two UX Design consultants.
KEY GOAL
MVP Release of Inventory app for Restaurant sector.
MVP Release of Cloud-based Inventory app for Restaurant sector

​​HotSchedules Cloud-based Inventory app provided Real-Time Data for On-Hand Inventory, Waste & Costs, Vendor Management, etc. Customers of this app were regional and large restaurant chains. End users primarily Restaurant Managers. App also included a component for Regional Managers.

HotSchedules derived its name from their original Scheduling app for Restaurant Workers. Since then, HotSchedules has strategically grown with the acquisition of various startups that had other enterprise apps serving the Restaurant sector. Thus, HotSchedules strategic goal being to offer a seamless end-to-end suite of enterprise apps for the Restaurant sector, from scheduling workers to regional managers, etc.

MVP Release was subsequently restricted Desktop/Tablet only, due to the complexity of the tables and features. Afterwards, certain features/tasks would be available on Mobile, that were conducive to a small mobile screen (i.e., Receiving Orders).

HIGH LEVEL TIMELINE
Condensed timeframe of just 4-months.
MAKE OF THE TEAM
Hands-on UX Design Manager, plus two UX Design consultants.
KEY GOAL
MVP Release of Inventory app for Restaurant sector.

BACKGROUND

V1 Release of CPQ (Configure, Price, Quote) cloud commerce solution

​​NetApp offers hybrid cloud data services for management of applications and data across cloud and on-premises environments.

 

The existing quoting tool QuoteEdge had been in existence roughly a decade. Problems included:

  • Cumbersome user interface

  • Built with older technologies

  • High-degree of customization that hindered upgrades

 

The new CPQ application (based on Oracle Cloud CPQ + Oracle JET UI) offered:

  • Latest technology

  • Greater agility of more frequent upgrades

  • Improved performance

 

Goal was to have CPQ replace the legacy QuoteEdge tool, with releases rolled-out in phases: initially Configure, followed by Pricing, and then Quoting.

 

The CPQ app (like the legacy app) is used by both Internal users (NetApp Field, Sales) and External users (Partners, Resellers, Distributors), enabling ~$6 billion in annual revenues.

CPQ facilitates: Fulfillment, Compliance, Promotions, Deal Analysis, Renewals, Invoicing, Sales Forecasting, Service Entitlement, Revenue Recognition, and Financial Reporting.

This high-visibility CPQ endeavor comprised an expansive team, from NetApp employees (including Product, Engineering, UX, Executive Management, etc.), to outside consulting firm Pierce-Washington, plus highly-experienced consultants (like myself).

HIGH LEVEL TIMELINE
10-months on Configure. (Funding put on-hold for Price & Quote due to COVID-19.)
MAKE OF THE TEAM
Staff UX Designer plus myself on CPQ, with assist from UX Program Manager.
KEY GOAL
V1 Release of Configure (followed by subsequent releases of Price & Quote).
Shot of Corridor in Large Data Center Fu

MY ROLE

UX Design Lead Consultant on 3-Person Team

I was a Lead UX Designer Consultant on a 3-person team (Staff UX Design Lead & Researcher + myself + assist from UX Program Manager) for V1 release of Configure of CPQ.

 

Our UX Team were in Sunnyvale HQ, whereas Engineering were local & offshore, and Executive Management was out-of-state (with bi-weekly travel to HQ). Thus, we had plenty of phone & video conferences, plus the chance to meet our colleagues when they came into town. Remote flexibility (2 days onsite, 3 days remote) was wonderful!


I sometimes joked that my UX colleague and I were sort of "The Odd Couple" but that's precisely what made us a great team! He'd been there a few years; I was new to NetApp. He was younger; I was more seasoned. He might plow through a concept, but knew I had a keen eye for detail & refinements. Together, we made a great team!

Our work was primarily UX Design (wireframes) though we conducted UX Research with various end-users to get validation & insights on our work-in-progress designs.

UX STRATEGY

Design Exploration

Design Exploration:
  • Blue Sky Concepts
  • UX Research & Testing
  • Practicalities within Modular Platform

During the initial sprint of Configure, we also had the heavy-lifting task of coming up with a new UX Design that met the following requirements:

  • Clean, simple and modern

  • Intuitive, ease-of-use with users

  • Addressed current use cases of the enterprise app

  • Ability to expand with increasingly complex use cases in the future

  • Worked within the constraints of the modular platform

 

Fortunately, Marketing lent a helping hand by having some of their Visual Designers come up with three "blue sky" design concepts. ("Blue sky" meaning unencumbered by any restrictions.) These "blue sky" design concepts were very colorful, creative and artistic--and provided inspiration of some design elements we might actually incorporate.

 

We then conducted Usability Testing of these "blue sky" design concepts with actual end users to gauge their feedback.


Based upon...

  • Results of our Usability Testing

  • Consciousness of business requirements of the User Stories

  • Mindful of constraints within the modular Oracle JET UI platform

We arrived at the framework of a new UX Design for CPQ--now and going forward.

STREAMLINED UX DESIGN

 

Simple, clean, flat design.

Sparse use of color (blue)

 

Action Buttons - Header, upper right. Secondary buttons include: Save As Draft and Save as Template options.

 

Section Tabs - Improved UX and Performance (vs. one long scrolling page, as is the case with the Legacy app)


Nested Hierachies - Easily discernable sections and sub-sections

Read Only Data - Disabled input fields indicated with light gray shading.

Help & Info icons - Links and callouts, respectively.

 

Oracle JET UI - UX Design needed to be compatible within JET framework. Also, minimizing unnecessary "customization" whenever possible (time & cost constraints).

2 Node-Hardware.png
CPQ2.jpg

UX STRATEGY

 

Design Evolution

Evolution of the UX Design

As is often the case when designing for Enterprise applications of ever-increasing complexity--the UX Design WILL EVOLVE!

Software Bundles

 

Sometimes small enhancements can have a big impact, including:

  • A pre-selected, faded checkbox to indicate the Core Bundle is already included

  • Much-needed bullet points to help the user distinguish the features of such bundle

    • Versus wondering where one feature wraparound line ends and another feature begins?

  • Alternate shaded rows help keep a user on-track

SOFTWARE BUNDLES

 

Issue: How to best convey specific features  contained within various Software Bundle packages (without the screen looking like "data overload").

 

Solution: Display bundled software packages in grouped formats.

Core Bundle is part of the package. However, the word "(included)" seemed to get lost in the shuffle. Adding the faded checkbox better conveyed included, as it was pre-selected (and user couldn't un-select). Pale gray shaded background was added to reinforce the difference between the base Core Bundle and the optional add-on bundles.

Add-On Bundles are distinguished with box outline, bundle title + checkbox, and list of bundle features. Given the lengthy lists and/or wrap-around labels, the use of tiny bullet-points allows the user to scan & focus.

 

Other Software: When more than one was featured, even-numbered rows would have pale-gray shading (easier for users to focus).

2 Node-Software.png

DESIGN PROCESS

Constraints of a Modular Platform

Reduce unnecessary customizations

Design Process
  • Collaboration with Product stakeholders
  • Visual Design elements via Components
  • Constraints of a Modular Platform
  • Reduce unnecessary customization

Collaborated with Product stakeholders on Business Requirements with subsequent reviews on wireframes for final approvals.


Visual Design (via UI Style Guide components) was baked-into the wireframes, as they were built. There were no separate visual design comps--the wireframes & visuals were one and the same.

The Software Developers were known as Modelers, as they were using components within Oracle JET UI. With the "grid" JET UI layout, sometimes the end result differed from the wireframes. This required re-calibration of the UX Design (i.e., having labels appear above the input instead of adjacent to with uneven white space issues) in order to work within the constraints of the modular platform. Oftentimes, these solutions were win-win--improved UX plus easier for the Modelers to build.

Another goal of CPQ was to reduce the amount of "customization" as this proved both costly and time-consuming whenever updating the legacy app.

Stand with server hardware and lighting

UX DESIGN

EVOLUTION 

Before & After

New CPQ

vs

Legacy QuoteEdge

UX Design Evolution
  • Before & After
  • New CPQ vs legacy QuoteEdge

​They say a picture is worth a thousand words. To show the immense progress with the new CPQ app, I thought I'd offer an "apples-to-apples" comparison of the same Services page in CPQ vs QuoteEdge.

 

Professional Services

In CPQ "After" (above; I'm reversing the order)

  • Nested hierarchies are clear

    • SupportEdge Services and Additional Services are subsets of Services

  • Within the service subsets, those sub-sections become clear with titles above the table-like groupings of input fields.

In legacy QuoteEdge "Before" (below)

  • Nested hierarchies aren't explicitly clear

  • Table structure of SupportEdge Services has ambiguity in some of the rows/columns

  • Additional Services is list of input fields, without clear distinctions or relations

PROFESSIONAL SERVICES

 

To better illustrate the incredible progress made on CPQ, I'm showing a glimpse of the "Before" (Legacy QuoteEdge) and "After" (CPQ) comparison of the Services module.

In the CPQ "After" example (above), it still has the same core functionality--yet it's clean and intuitive!

In the Legacy "Before" example (below), while it may be functional, it's not the most intuitive. So much data, it's overwhelming! What does it all mean?

Note in particular, the two sub-modules of SupportEdge Services and Additional Services.

CPQ "After"

For SupportEdge Services, all the inputs were encased inside a streamlined, single-row table-like structure (vs. the bulky comparison chart in Legacy)

For Additional Services, the input fields were organized into related/dependent groupings, encased in streamlined table-like structures, with title labels for each table grouping.

QuoteEdge Legacy "Before"

In Legacy, the user is looking at vast arrays of various inputs--and wondering what it all means? The hierarchy levels become less clear--especially with respect to subsets of information.

 

Conversely, in CPQ, the user can easily scan and know at-a-glance what the 4 tables mean (based on their titles), then dive-in further within such tables.

 

The perfect balance of ease-of-use without undermining complex functionality. Win-win!

Professional Services
Services "Before" (Legacy app)
Blue binary code background. computer da

UX STRATEGY

Two sets of

"And/Or"

modules

A case of AND/OR...and then some

Complex design solutions are often an evolving process. Usually starts relatively simple--then evolves further when encountering ever-increasing complexities. Such was the case with "And/Or".


In order to recognize a user's Existing System, user could enter serial number and/or describe manually. In order to make this crystal clear (and without fine print text that could easily be overlooked), I'd suggested the "AND/OR" inside a circle with horizontal line extending the width. Easy, intuitive, at-a-glance!

However, in the instance of TWO sets of And/Or modules, the lines started to blur. HOW to make this clear? This inspired me to create the "+" (similar circle & horizontal line format) except here the circle is smaller, and it's in gray (not blue).

This makes it crystal clear:

*  And/Or for Storage

    plus

*  And/Or for Licenses.

AND/OR + AND/OR

 

Issue: How to best convey "AND/OR" gathering of information on Existing Systems, without ambiguity.

 

Solution: Display "AND/OR" inside a blue outline circle with horizontal line span.

 

Existing System: Controller & Storage to be Upgraded

The user could enter a serial number, OR describe the system manually, OR both! This is made crystal clear through the use of the "AND/OR" circle/line between the two sub-modules.

 

Existing Licenses

Same "AND/OR" structure as outlined (above) in Existing System.

Issue: How to convey two (or more) sets of "AND/OR"?

 

Solution: Separate with a plus symbol (+) inside a circle with horizontal line span (smaller stature and in gray instead of blue).
 

​​Existing System + Existing License:

Both above sets of "AND/OR" are separated by the gray "+" circle/line between the two primary modules.

Easy, intuitive, at-a-glance!

Controller Upgrade Existing.png
Beautifully decorated catering banquet t

FINAL THOUGHTS

Wrap-up

Taking into account the business complexities, colleagues scattered across time zones, UX re-calibrations required, (and COVID-19) we did complete the V1 Configure portion (of CPQ) on-time for late-June 2020 release. Unfortunately (due to COVID-19) funding for the Price & Quote portions were put on-hold to be restored at a future unspecified date.

The heavy lifting in establishing the overall UX framework was successfully accomplished in the V1 Configure release.


Outstanding group of seasoned professionals to work with! Remote Mon/Wed/Fri was a wonderful perk (given the congested evening commute). Thoroughly enjoyed Tue/Thur onsite, plus the camaraderie with my colleagues at lunch hour.

Pre-COVID, NetApp had some very nice onsite socializing events, too--from celebrating successful product launches, to pre-holiday celebrations! NetApp definitely knew how to put out a nice spread, from drinks to appetizers and desserts!

 

CONTACT

Leopard Design, Inc.

MAILING ADDRESS

1547 Palos Verdes Mall #294

Walnut Creek, CA  94597-2228​

PHONE

(650) 259-8080

LinkedIn_white.png

For general inquiries, please fill out the contact form:

Thanks for submitting!