Objective
Background
Cisco Commerce Workspace (CCW) is a full lifecycle, sales enablement, centralized CPQ application crucial to purchasing Cisco products, solutions & services. The application is utilized by more than 300,000 users around the globe – allowing account managers and distributors to configure estimates, create deals and quotes, and place orders on behalf of end clients. Clients range from small businesses and startups to large multinational corporations. Orders encompass Cisco’s entire catalogue and could be anything from licensing and configuring Webex for corporate departments to building out entire data centers.
The Cisco Commerce team was receiving feedback, across their customer groups, that the application interface was outdated and clumsy to use during both the pre and post sales phases. Customers were growing increasing frustrated and seeking workarounds through third party systems / vendors that took clients out of the Cisco ecosystem. This risked retention and was ultimately costing Cisco millions of dollars annually in sales.
Cisco sought an agency partner who could help streamline the Commerce interface. The goal was to create a more intuitive and seamless experience for the existing application. The Cisco team also wanted an updated and modern UI design and asked for an exploration.
Solution
Concept design and evaluation for CCW’s pre-purchase order flow.
Responsive web application optimized for both desktop and tablet.
Role
Lead UX Designer
Project Deliverables
• Stakeholder workshops
• Ethnographic research
• Personas and journeys
• Comparative analysis
• Content audit
• Feature priority & requirements
• Medium fidelity prototypes
• Concept evaluation
• Visual design
Project kickoff
Cisco’s engagement with our team began as a series of walkthroughs of the current state application. These gave us a very high level overview of how the application worked, as well as inform us where the potential friction points may lie. Additionally, the Commerce team gave us an overview of user roles within the system and a spreadsheet of all the customer and user feedback they had been capturing over a period of years.
Overarching Pain Points:
Inefficient workflow processes
Disjointed systems and duplicative workflows
Inability to find key features & details
Information overload
Current CCW: Bill of materials shown
“I need access to my most important information quickly. It’s frustrating to go around in circles and I don’t know what some of this means.”
Current state order journeys
During analysis, our team performed a series of journey mapping and persona synthesis exercises with Cisco to better understand use cases, as well as the overarching lifecycle of an order through the CCW system. More than 20 unique roles were identified across the entire platform.
We focused on 6 major end to end journeys, from order initiation to procurement and subscription management. These journeys were mapped through a series of workshops with our stakeholder team. This allowed us to get a better understanding of how the order process worked and what each role performed through the various stages. We also captured early data on system pain points during the order process – these were examples of feedback the CCW team had been receiving from their dedicated users.
Above: examples of whiteboard exercises with our stakeholders
High level order flow process
Defining core user journeys
Zeroing in on the pre-purchase journey, we identified two key user groups: Account Managers and Sales Engineers. Account Managers would initiate project estimates and coordinate with Sales Engineers to craft the bill of materials (basically the enterprise version of a shopping list or cart pre checkout). Account Managers are responsible for sales generation, customer intake and coordination. Sales engineers typically have solution architect expertise and are able to build out proposals that could be complex in nature (like a new data center) with hundreds of SKUs.
Both Account Managers and Sales Engineers could be Cisco employees, or employed by Cisco customers or third party distributors. Typically, Partner AMs would coordinate with Cisco AMs to initiate a new order.
To understand these user groups in greater detail, Cisco provided foundational research that had already been conducted by Cisco and third party agencies. Upon review of these materials, we discovered recordings that included real time user walkthroughs of core workflows with real-time feedback.
Alignment
Through synthesis, we brought together areas we felt were opportunities to streamline and improve workflows and information architecture. We then held an alignment workshop with our Cisco stakeholders to align on overarching vision, goals and core opportunities for our design exploration.
Goals & shared vision
Streamlining the pre-purchase experience:
Improve the Information Architecture
Refine core user journeys within each module to reduce friction
Inform a scalable content strategy to address notifications, messaging and error states
Creation of a responsive experience
Produce a scalable design system that can evolve across system modules
Unify the experience through a modern and intuitive UI system
Quick note
Although we were tasked with streamlining and improving the user experience, we were asked to approach the redesign from the point of view of the current users. Cisco was not looking to disrupt entire teams within the CCW ecosystem, but to enhance their experience and to reduce friction points.
Design Process
Platform audit
Because each user role had a different feature permissions within CCW, we relied on our product partners to give our team in-depth walkthroughs. Our team performed an audit of the order creation process, capturing functionality and various third party system intersections with workflows. These ran parallel to what we were able to capture through previous analysis and helped us fill in gaps around existing product functionality and features. We also performed an audit of the labels, errors, and notifications to evaluate current content hierarchy. We made note that each module presented a different entry point into the order placement flow and this was heavily dependent on user role.
Information architecture
Our team worked with our stakeholders to reorder areas of the platform that could be organized into a more efficient global navigation. We also made sure to take into account user groups at each process stage. Updates include:
Replaced “Home” with “Smartview”, an insights and order management overview tailored by user role
Created a “Manage” module to consolidate subscriptions and software, both contract renewal workflows
Added product search capabilities to Catalog for easier solution sourcing
Created guided solutions to the Estimate Configure tool
Workspace framework
With a focus on streamlining the workflows, we also explored ways to simplify the platform workspace through a core data entry hierarchy. Above illustrates the architecture framework which allows for greater consistency across each process step. Repeatable patterns such as financial summary placement, a customized rail right with task summary, and clearly defined next steps and CTAs help ground key user groups by prioritizing the most important actionable information.
Concept Highlights
Smartview dashboard
Replaces an existing homepage to provide personalized, at-a-glance insights tailored to user role. Shown is a Smartview architected for Account Managers and provides key sales analytics, order metrics and customer data. Customer data expands to provide a snapshot across sales activity, partner information and latest orders with actionable next steps.
Estimates smart suggestions
Highlights a key user insight, to provide previous templates based on similar estimate technology and end client solutions. During the estimate creation process, core criteria captured generates tailored recommendations based on recent or favorited templates. In addition, related product promos and new products are surfaced to help drive adoption and integration between Catalog and Estimates modules. This state replaces the current blank bill of materials screen end users see when they start new estimates.
Revised data entry architecture
Redesigned to simplify content and support less cognitive load. Highlights crucial details within large data sets like the bill of materials. Easier access to core features and functionality. Added customization to personalize experience across varying roles. Inline notifications surfaced to specific product details with contextual upgrades, options and links to configure solutions and billing. Collapsable right rail provides supplemental information and smart product recommendations.
Unified product search
Overhauled to search across all product types by incorporating current disparate product search experiences into one centralized search engine. Assistive suggestions by recently purchased, added or saved. Multiple items can be added to an order at one time for efficiency. Includes editable attributes such as quantity and import method. Added ability to search prior estimates and deals to add previously configured SKUs or import partial estimates to a bill of materials.
Smarter upsells
Encourages available product upgrades through line level notifications. Ability to convert at a single product level as well as in bulk. Comparison charts highlight differences in price models. Offers an easy to understand solution to choose cost effective solutions.
Evaluation overview
To evaluate our concepts, we built two versions of the redesigned platform, tailoring to the roles of account manager (Cisco & partner) and sales engineer. Testing participants interacted with a medium fidelity prototype, according to their role.
In each 60 minute session, we conducted a semi-structured walkthrough of the experience and observed the participants’ interpretations in real time.
Initial evaluation results proved positive, all test subjects reported the new CCW designs to be a better experience than the current product. The right illustrates a general overview of participants’ reaction across roles.
“On the whole, the placement and the layout are well done. It’s easier to find exactly what you’re looking for. I have everything I need right there.”
Concept refinement
Post evaluation, our team iterated on the concept design based on test subject feedback. One of the major call-outs by end users was the confusion over some of our revised terminology. Highlighting this, we tested the use of “Proposals” to replace “Estimates” as a module naming convention. End users, across varying roles, did not understand this revision.
Our art director thoughtfully applied an exploratory brand scheme and refined interaction design to bring our concept to life. In addition, we included robust interactions within the bill of materials data table including advanced filtering, order group creation, column customization, and drag / drop line reorganization as shown below.
