Cisco: Customer SUpport Portal
Project Overview
Problem to Solve
The Cisco customer support portal was difficult for users to get the help they required and generated a lot of extra work for the customer service reps who handled the support cases.
A user had to sift through nearly 100 case type options, select one and then send it off to customer service who would then create a case. Unfortunately, the user never really knew where their stood in the resolution process and would have to wait until a case was to see the outcome. This placed the entire burden on the customer service team and created tension for the users. Cisco wanted to make the portal as self-sufficient as possible.
Process
Discovery
I learned as much as I could about the portal, the navigation and user use cases. I spent a lot of time with the product owner who had been on the portal for almost 10 years.
Design: Pencil Sketches
I worked to create user flows, I then took the flows and created a series of pencil sketches to create a rough idea what the step by step processes would like. The entire team was spread around the world (London, Amsterdam, India, Chicago, Texas and California) therefore I had to take photos with my phone and convert them into a pdf. Included interaction notes to explain what the different page elements would be. I did a couple of rounds of revisions to address development concerns.
Design: Wireframes
My wireframes were initially based on the technical support page, it had a very different layout than what the final project looked like. Upon wireframe completion I had learned Cisco had a new “UI kit” or style guide I needed to follow. I used the same user flows I created in the wireframes and pencil sketches while updating the look and feel to create the final visuals, these were based on the Cisco style guide.
Design: Visual Design
Upon wireframe completion I had learned Cisco had a new “UI kit” or style guide I needed to follow. I used the same user flows I created in the wireframes and pencil sketches while updating the look and feel to create the final visuals, these were based on the Cisco style guide.
I then proceeded to take the visuals and put them into InVision to create a basic prototype. This assisted the development and product teams when it came to the their overall understanding of the direction we wanted to take the project. Unfortunately, InVision has gone out of business and I was not able to convert the prototype to Figma.
The development team I was working with was working in a new platform called Pega, for most of them this was their first exposure to the system. That unfortunately created some issues along the way. There were multiple unforeseen technical difficulties therefore I had to consistently adapt the user flows to address the limitations of the system.
Also, this was the first project the dev team was building in Cisco’s new style guide so I had to create a manual to show how each element was to be used.
Results
I converted the navigation to search based and created a site map style landing page so the user could go there if they wanted to see all their options. I also added quick links below the search bar to save the users time.
Lastly, the designs were a total departure from what users had previously seen, therefore at the start of the prototype we included a step by step tutorial. The tutorial in the prototype was my first pass at it. The final copy was still being written at the time I had phased off the project.
Business Impact
This new navigation improved customer self sufficiency and freed up several customer support people to help other customers with more complex issues.
Client
Cisco
Services
- Information Architecture
- Wireframes
- User Experience Design
- User Interface Design
- Visual Design
Tools
- Sketch
Design Elements
Outcomes
Final Designs
Basic Table Page
This is the base page for the Customer Service Support portal. The page assumes the user is logged in and has existing cases.
The search bar is where a user can search for the case type they need help with. “My Dashboard” functions as a filter to display cases by status. Lastly, the table displays active cases.
Search for a Case Type
When a user searches for support assistance they will see a predictive set of results based upon their search. User then clicks the result that best represents their needs and it begins the case creation process.
No Results
If a search doesn’t generate any results the user will be presented with multiple options.
View All
If a user knows the case type they need help with they can click a case type from the menu. The “View All” button shows a list of all case types and sub types.
Quick View
If a user has a live case they can expand the the table row to get a quick view of the case. This view supplies a few details, such as who made the case, the case creation date and where the case is in the process. Also, a user can escalate or update a case from this view. The “Expanded View” takes the user to a detailed view of the case, a user can also click the case number in the row to get to the detailed view as well.
Case Details
This is the most detailed view of a case. A user can see the full history of a case. The user can also update, escalate or address a case that requires additional attention.
