Watson Advertising


The Problem

The development team at Watson Advertising, an IBM company had developed a tool to allow companies to run queries on customer segments for enhanced targeted advertising. The tool, being quite complex and having been developed without input from designers, was quite confusing to use. The user was not given any indication of their progress throughout their task, whether they were building their query correctly or not, or whether a query had been successfully created.

Watson Advertising


The Problem

The development team at Watson Advertising, an IBM company, had developed a tool to allow companies to run queries on customer segments for enhanced targeted advertising. The tool, being quite complex and having been developed without input from designers, was quite confusing to use. The user was not given any indication of their progress throughout their task, whether they were building their query correctly or not, or whether a query had been successfully created.

The Solution

The solution was to redesign the existing application to address issues within the UI that created confusion for the user such as the position of UI elements and lack of user feedback. The solution would be provided as an interactive prototype made in Adobe XD along with a design document for the development team to follow.

The Process

The process began with sketching possible concepts for the app redesign. The main intention at this point was to define a workflow for the app that was intuitive and easily understandable and that would guide the user through the process. Different considerations were made, such as, should the app have a vertical or horizontal workflow? How should the app let the user know where they are in the process? How can screen space be best allocated? 

The app began to take shape with the inclusion of 5 key elements. These were; 

  • Horizontal workflow
  • Progress Bar
  • A section containing an overview of the current query
  • A section containing past queries
  • All elements contained on one screen

It was key to simplifying the app that all elements were contained on one screen without the need to navigate off the main screen. The user would be navigated through by simple actions such as a Next button changing from deactive to active after successful submission of a requirement. After such a submission, that variable would be added to the query summary on the right-hand side of the screen. Upon all requirements of a valid query being entered a submit button would become active below the query summary. After submission, this query would then be added to a list of past queries at the bottom of the screen. In order to not overcrowd the screen with information, the query summary would contain dropdowns which could be expanded to view further information according to the user's needs. Similarly, the past query viewer would contain a summary of each query that when clicked on would present a modal that contains full information of the query.

The interactive prototype was shared with the product owners and development team in IBM New York where it was met with good feedback and has since been moved into development.

Challenges and Reflections

The main challenge of this project was how to simplify what was a very cluttered and confusing application while keeping all elements contained on one screen. It was particularly challenging to find a way to handle sections of the query builder which included subsections. Deciding how to best utilise screen space was another issue. It was clear that the query builder had to occupy most space that the screen allowed but the query  summary and past query viewers also needed to be afforded a level of importance. Allowing these sections to be minimised by the user effectively gave the user greater control over their experience with the application and provided a more satisfying user experience.