Overview

The IBM Marketplace is a platform for potential and existing IBM customers to discover, browse and navigate to IBM and third party products to solve their business problems. One of the Marketplace page templates is called a product discovery page to allow IBM customers to browse and find products they are looking for.

My role

As the design lead on the team, I was responsible for the design, research and strategy for the IBM Marketplace. I worked with the product owner to understand business requirements and the other visual designer on brainstorming potential solutions and then created wireframes. I created and executed a user testing plan to incorporate user feedback into the designs and then worked closely with our developers to implement designs. I also continually tracked how these pages were performing against our primary KPIs which are click through rate, engagement rate, and finally, how our pages contribute to end of funnel conversion and revenue.

Project objective

Our pages are designed for users who come to the IBM homepage and click on Marketplace from the main navigation and then find a category of interest, such as Analytics. We were tasked to redesign these category, and sub-category navigation pages. We also worked closely with the design system team at IBM and incorporated existing patterns as well as worked with them to create new patterns as needed.

Sample user journey of old designs

I was paired up with a visual designer to redesign these pages to allow users to more quickly and easily find IBM products and services of interest to them. The current pages were essentially search results pages and were poorly received from both existing users as well as stakeholders due to its lack of thoughtful design that simply showed users a full list of all products.

Initial research and brainstorming

Competitive audit

I started by doing some competitive research on similar types of pages from our competitors, or companies with a large number of products and services. This helped me understand various ways of showing the breadth and depth of their product catalogs. I realized that many competitors solved this problem by either using navigation to show all the categories or by only showing navigation that users could drill down into.

I shared this with the visual designer and we compared what we liked and didn't like. I realized that what might be best would be a design that would let users see the categories somewhere at the top of the page but also allow them to drill down a little further without having to leave the page. I started brainstorming many different ways of that might allow for easy discovery without obscuring the important goal of finding products of interest:

Design

Wireframes

After discussing the different options, we realized that some of our options exposed too much of our internal taxonomy to the user before they were ready to jump in. We wanted to make sure that users could see what IBM had to offer without overwhelming them. So we decided on a design that described topics or categories of interest, while exposing the sub-categories below them. We also wanted to feature some products of interest for each category and sub-category in order to help give users some context as to what the categories meant. It also helped to expose products that could be of potential interest to users more quickly to the user. I created wireframes to demonstrate this.

Visual design

This page would work in tandem with an all products view that would help users see all products of interest to them by category. The two pages would be linked via tabs if a user wanted to toggle between the two. The all products page would also be linked from the leadspace area of the overview page. We decided the existing category page design would serve this purpose well. We also were working to update the designs based on an updated evolving internal design system.

Usability testing

After receiving great feedback from the team and our stakeholders on the designs, I then started planning the usability testing of these pages as a way to get quick feedback from targeted users before starting with development. I pulled together our testing plan which outlined our goals, target users and tasks. I decided that we could ask them to solve a business problem related to data security and management to see if they were able to navigate from our home page to a navigation page related to a sample category page that we could mock up. We wanted to see if users could eventually find a product that they thought could solve their business problem by navigating through our pages, which were in invision prototypes as we had not yet started on development.

We created an InVision prototype of the designs that aligned with the tasks we wanted users to accomplish. I then conducted 15 usability tests on usertesting.com and gathered primary findings and recommendations.

What we learned

Users were happy overall with the overview page designs and could easily find solutions to their business problems. However, users were overwhelmed by the large number of products on the all products pages where some categories, such as Analytics for instance, have about 500-600 products. Users mentioned that because they could only view 20 results at a time, they would have to click pagination icons many times to see all results. Users also mentioned wanting more ways to narrow down results. I also saw that users, after exploring the search results and not finding what they wanted, expressed that they would simply search for what they wanted. Because users were looking at prototypes, they were not able to use our live search, which actually would have taken them out of this page and searched all of ibm.com. What I realized was that users likely wanted to search a term that would show, or filter, results based on a desired search term.

Design updates

Based upon user feedback, which I shared with my team, we updated the designs accordingly. Even though our usability tests focused on the updated product discovery pages, we learned a lot about users’ perceptions on our products home page because we asked them to start their tasks there. When they were asked to find a data security or management solution from our products home page, users were distracted by the featured section at the top with three product tiles. When asked about what the main purpose of the page was, some users recited the product name in the top left section, when in fact, the primary purpose of the page was to allow users to discover and explore our offerings by navigating through our categories, which was stated below this section. We had received differing requirements from our stakeholders to bring up those featured products higher on the page. However, as the user testing showed, the primary purpose of the page gets lost when merchandising takes precedence. We are currently in the process of redesigning the Marketplace homepage to make it more visually clear what the primary purpose of the page is by moving the merchandising products in a less prominent location.

Outcome

The pages are now live and linked from our Marketplace, both in page and in our navigation. We are currently tracking them via our analytics tools in order to see how they are performing and how they compare to the old designs and are continually receiving feedback for them.

Previous designs saw an average of 33% click-through-rate. In the first few weeks since designs went live, the click-through-rate went up to 55%, which is a 77% improvement. We will continually track metrics as this is very early data, but proves promising.

I am currently working on onboarding our pages into a new tool, Amplitude, that I'm hoping will give more analytics around the full user journey where we can see not just click through rate from our page, but entry points as well as what users do once they leave our pages on the product pages.