These slides provide an overview of various iterations of the IBM Support site that I worked on starting in January of 2016.  This is what IBM Support looked like when it was built with the V-17 IBM web design patterns.  This is two iterations before my designs.

This is what the IBM Support website looked like when I started on the project.  The first thing I did was a usability test to get user feedback on how this design compared to the V-17 version.

The following slides are my initial conceptual wire-frame exploration of what the new IBM Support site could become.  This first wire-frame takes some cues from the IBM Marketplace site that list top product categories to help the user narrow down the support content they need.  It also has three links in the header for different user groups who have very different support needs.  The wire-frame still has the original Support Destinations, but they have been moved further down the page.

IBM has multiple different sites that align with the different Support Destination categories.  This design makes those different sites visible at the top level to make it clear to the user what sites are available to them and saves them a click.

This is a wire-frame of what the support cases table could look like.  During the time I worked on IBM Support the term for the object that contained the client's tech support request transitioned through various names.  Initially it was "Service Request."  During user reviews the word "Tickets" was suggested.  During the transition to Salesforce the term changed to "Cases" because that was the terminology used in Salesforce.

This design explores what it would be like to move away from using a table to organize the cases.  The color of the cards indicates the severity level of the case.  There is an icon to switch from the cards to a table view.  Because different product categories have different information that needs to be collected when requesting support, the top row has a button for each of the product categories that the user has associated with their profile.  While users initially indicated that they preferred seeing their cases in a table view, this concept came back with the Case Prioritization designs.  Once users became used to viewing their cases in a card format they appreciated being able to read the case information in a more condensed form.

This is a table view of the users products.  The table has a count for how many notifications and tickets each product has and the color square around the count indicates the severity level.

This design is where the "Unified Navigation" header first appeared.  The change to the header was changed to be more in line with the V-18 Design patterns.

This design explores using a thin header that is more like those used in Bootstrap websites.  This design lists the products the user manages on the left.  Clicking a product tile switches the main section to show all the support information related to that product.  At the top there is information about the product model / serial number, alerts, and new downloads that should be installed.  Below the top row is a section that contains the active Service Requests.  Each Service Request row can be expanded to show all the details about that Service Request.  The Service Request sections are viewed by clicking on the icons on the left side below the number.  This design was trying to deliver a single page application experience.

This design explored what a client account page might look like.  This page has a chart that shows the account owner how many supports requests their employees have created over the past year.  It has a card for each IBM product associated with the account which expands when clicked to show a summary of the active cases associated with that product.  At the bottom of the page are all of the people associated with the account that can request support for the accounts IBM products.

Many product names are similar looking combinations of letters and numbers.  This design explores using images of the product to make it more recognizable. Below the image is the name of the product, a count for how many alerts, tickets and messages are associated with the product.  Clicking the gray bar would cause it to slide up to reveal more information about the product.

IBM developed a new V-18 UI library to help developers build company webpages.  I was able to use Adobe Dreamweaver and the code snippets from the V-18 design pattern pages to quickly build interactive HTML-5 webpages to illustrate my IBM Support design ideas.

This is the first iteration of the IBM Support prototype that I built.  I brought back the gears graphic from the V-17 support site to add some visual interest and continuity between the designs.  The basic layout and information architecture shown in this design with the title, description and communications history on the right side and the product details, attachments, and people on the right side was well received and continues in the currently deployed IBM Support designs.

This is the second version of the site.  The basic structure of this webpage formed the basis for the current IBM Support Community Case Details page design.

As mentioned previously, one of the problems that the various IBM Support sites had was that they lacked a consistent navigation pattern.  Using the V-18 navigation pattern I created a "Unified Navigation" pattern that was subsequently implemented on the other IBM Support sites.

One of the IBM Support Stake Holders mentioned that it would be great if the case entries in the cases table had a visual indicator of the case status and progress toward resolution.  I worked through a few iterations and finally arrived at a compact progress indicator using a set of html divs.