IBM Skills Gateway

Reimagining learning IBM products and services

Live link to project: ibm.com/services/learning/
Roles: Research, Visual|Read time: 3 mins

IBM Skills Gateway homepage with navigation, search bar, categories for Analytics, Cloud, Commerce, Systems, Mobile, Security, Watson, and sections for Getting Started and Our Services.
Where you go to learn IBM's complex suite of products and services.

The goal

IBM approached us with a goal to parse all the training for their large and diverse portfolio of products and services into one new hub. Our goal was to make the experience easier for the user to be able to quickly and efficiently register for a course, gain knowledge on a specific subject, and acquire new skills online and onsite for their job roles.

Understanding pain points and opportunities

We started by conducting discovery sessions with two main types of users: IBMers who were trying to master their skill sets and clients who had previously purchased a product and needed to go through the training process. With the data from the interviews, we confirmed that the current experience was confusing, uninspiring, and outdated.

We began brainstorming opportunities for improvement and started looking into areas where we could introduce new aspects.

In the previous design, users would see a page with exposed filters, no guidance, and no context of the value proposition. Given the importance of what the site was set out to accomplish, we needed to break away from a simple search site, to something completely new and refreshing.

IBM authorized worldwide training webpage with navigation tabs, search tools for training courses, country selection dropdown, and links to learning resources like developerWorks and IBM training paths.
What the previous experience looked like.

The roadblocks along the way

IBM has a huge problem when it comes to redesign due to their massive catalogue of content. Implementation is not easy when you are dealing with updating thousands of pages. Thus IBM "standards" was created. They are similar to style guides, but lack a key component of a successful style guide and that's the ability to be a living breathing resource. A huge side goal was to work with a team that could update the existing style guide to fit the experience the users needed.

IBM Digital Design page with navigation menu and Get started section showing options to build a new page or maintain and update an existing page.
Brining back art and color to smart watches.

The iconography need to display other types of information, such as categories and education types, which did not exist in their previous icon set. So visually we needed to be flexible as well.

Row of 18 simple dark blue icons including user with checkmark, quote marks, bookmark, calculator, group of people, laptop, megaphone, video camera, crossed circle, calendar with 2, shopping basket, clock, cloud, chat bubbles, location pin, smartphone, credit card, and globe with a cross.
The existing icon set.

Finally we needed to be both online and in-person classroom curators. Generally, there are only two types of learning websites. One, where users enroll in in-person classes (e.g. Coursera), or the other, where users practice self-paced online learning (e.g. Lynda). Rarely are these two types of learning websites mixed into one experience. In fact, during our competitive analysis research, with the exception of university websites, we could not find any websites that accommodated both kinds of learning.

Comparison of two online learning platforms' homepages: Lynda.com offers 4000+ courses with a free 10-day trial, and CourseHorse promotes local classes in New York including a French course with $10 for the first class.
Left: Lynda (online classes). Right: Coursehorse (on-site classes)

Building an intuitive and immersive experience

Learning a new product can be simple when given the  tools to succeed. With this in mind, we began approaching the redesign.

We created a beautiful, more streamlined learning experience by introducing new key features such as:

  1. Cards to quickly see more information without the user navigating through various pages.
  2. Guided paths, so the user did not feel overwhelmed upon landing on any page within the site.
  3. Introduced learning journeys: a curated collection of learning content, both formal and informal, that can be used to acquire skills for a specific role or technology area.
  4. Badges and a dashboard to keep up-to-date with your latest learning process and reward completion.
  5. Color coating IBM’s main 7 business units to be able to understand what offerings your learning content fell under. It also made it easier to find what you course you were looking for.
  6. Icons that displayed relevant information such as whether the learning the user was interested in was taking place in-person or online.
A collection of 57 minimalistic black outline icons on a black background, including a graph on a stand, cloud, clipboard, smartphone, computer monitor, globe, speech bubble, pencil, face grid, play button, server rack, grid blocks, light bulb, layers, group of people, sliders, calendar, map, badge, newspaper, magnifying glass, target, arrow, stairs, location pin, list, flag, graduation cap, ruler and pencil, box, certificate, briefcase, connection chain, headset, suitcase, thumbs up, and refresh symbol.
New training icon set.

The designed used a mix of visceral colors, playful icon sets, and lightness to make learning more engaging.

The impact

When it debuted in June of 2016, users both locally and globally were ecstatic with the results. The people who manage the “IBM.com” homepage reached out to the team to feature us under the “Service Tab” section, as a new initiative to promote the learning of their products and services. With one click from IBM.com, you are able to access training.

With a new revitalized digital learning environment, we empowered IBMers and their customers to continue to thrive and grow when acquiring new skills.