Eco power. Wind turbines generating elec

PG&E

Successful V1 launches of Waive Deposit & Recurring Payments

+

Strategic UX improvements to Start/Stop/Transfer

=

Reduction in Customer Calls

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

Personalizing online Customer Experience (CX) led to ~96,000 fewer customer calls.
 
V1 Release of Waive Deposit
 
V1 Release of Recurring Payments
 
Strategic UX improvements to Start/Stop/Transfer

​​PG&E is the largest regulated public utility in the country, serving vast regions of Northern & Central California.

 

Anytime you can facilitate online business so that a user doesn't need to stop and call Customer Service--it saves the company money! This holds true for any company, not just PG&E. Plus, it's also a better experience for the end user to accomplish something efficiently online vs. having to call Customer Service (only to discover the call center is busy or closed).

​The high-visibility Waive Deposit endeavor comprised the newly-formed Agile team, from PG&E employees (including Product, Engineering, UX, Executive Management, etc.), 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.

STREAMLINED UX DESIGN

 

Collaborative evolving effort by design team.

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 noted with light gray shading.

Help & Info icons - Links and callouts, respectively.

 

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

MY ROLE

Lead UX Design 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 did conduct UX Research with various end-users to get validation & insights on our work-in-progress designs.

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 featued, even-numbered rows would have pale-gray shading (easier for users to focus).

DESIGN PROCESS

The Design Process

​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). 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.

PROFESSIONAL SERVICES

 

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

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

 

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

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

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 titles for each table.

 

In Legacy, the user is looking at a vast array of various inputs (and wondering what does it all mean?).

 

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!

DESIGN STRATEGY

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

Complex design solutions are often an evolving process. Usually starts relatively simple--then evolves further with greater 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 circle with horizontal line span.

 

In the instance of two (or more) sets of AND/OR:

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

Existing System (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 structure as outlined (above) in Existing System.

 

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 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 were a wonderful perk (given the congested evening commute). Thoroughly enjoyed Tue/Thur onsite, plus the camaraderie with my colleagues at lunch hour.

Some very nice onsite socializing events, too--from celebrating a successful product launch, to pre-holiday celebrations! NetApp definitely knows 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

SATELLITE OFFICE

1534 Plaza Lane #111

Burlingame, CA  94010-3204​

LinkedIn_white.png

For general inquiries, please fill out the contact form:

© 1998-2019 Leopard Design, Inc.  All Rights Reserved.

Celebrating over 20-years in business.