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
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).
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 Hierarchies - Easily discernible 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).
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).
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.
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!
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!
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.
CALIFORNIA
1547 Palos Verdes Mall #294
Walnut Creek, CA 94597-2228
PHONE
(650) 259-8080
NEVADA
2248 Meridian Blvd., Suite H
Minden, NV 89423-8620
For general inquiries, please fill out the contact form:
