Crosscap GIC:
Designed in 2014
View Prototype (Use Firefox)
An Abbreviated Description:

As marketing planning, management, and analytic software, content management is a very important piece of the puzzle in creating a functional application for CrossCap's user base. Marketers need to add goods for sale, manipulate them, offer them at different prices and deals, connect them with calendar events, link them together based on past analytical data, and so forth. Add to that the number of different goods sold by huge retailers that compose our user base (Walmart, Target, etc.), and the design challenge becomes readily apparent.

In order to tackle this problem, I focused on leading our team towards a robust, inclusive design solution that is now widely extensible horizontally throughout the market. Rather than structuring the design based on the needs of a certain retailer, therefore, I structured this towards a view towards the bigger problem itself: how every marketer thinks about creating campaigns, what information they need when finding digital assets and structuring them into offers. As a result, we now have a design framework that works for our current marketing clients, and any in the future.

Process used in the creation of Crosscap GIC:

As the first project I was positioned to act as a solutions architect for in my role at CrossCap, this content management tool posed a great challenge, and a great opportunity to create a stunning, intuitive User Experience. First, I was tasked with auditing the existing system for creating and managing aspects, incorporating user research into a new path forward.

Whereas before one would have to create assets and search for them in different sections of our application, our research indicated that oftentimes users would be interested in the characteristics of another already-created asset while in the process of creating a new one. Hence, we concluded that the search functionality should lie in the same part of the application as creation. Users can, therefore, partially fill out the form to create an asset, then if curious about the attributes of another, search and find the asset in question in order to finish the creation of a new one with the appropriate supporting information. So, whereas users might have had multiple browser windows open in order to make informed decisions in days prior, they can now perform all of this functionality within a consolidated user experience.

When I arrived, this is what the project looked like:

As you can see, the product was under-designed, first of all, from a visual design perspective. Lacking a clear hierarchy of information, it becomes difficult for the user to find the information that they needed. Further, however, the information architecture was under-considered, forcing users to look in two separate places for the creation and searching for media objects; ultimately resulting in a complex workflow that lacked an intuitive user flow. Creating an object took three steps: clicking the gear icon (fig. 1) took you to the global settings page, from which one had to find and click the "add item" link (fig. 2). Afterwards, the user was greeted with the over-complicated "add item" process (fig. 3):

The search process lived in a separate portal: clicking the "Catalog" button (fig. 4) took one to the search page, after which they entered a variety of search criteria (fig. 5) and submitted their search:

The first problem uncovered by guerilla user testing, therefore, was the disjointed nature of the creation and search process: the separation of the two pieces of functionality was confusing, leading for the lack of a unified user flow. Secondly, the amount of search fields was cumbersome and disparaging for the user trying to search by a single field.

To solve these issues, we unified the search and create portals in a single page (fig. 6). Since the search represented the highest use case of the module itself (70-80%), we gave this the highest place in the information hierarchy. The creation is hidden behind a flyout menu (fig. 7) that opens either when a file is dragged into the browser window or upon clicking the cloud upload "Create" button (fig. 8):

After addressing the two main issues with the information architecture, we moved on to accommodating the rest of the potential use cases within the design framework created earlier. Given the wide variety of functions that different marketers would need to perform in order to construct campaigns (fig. 9 and 10), we had to delicately construct the information hierarchy to present contextually relevant options. Some of the initial sketches are shown in fig. 11, as well:

Having a basic structure in place and an understanding of all potential use cases, we were then able to start prototyping, iterating upon the original ideas as we tested users and interfaced with Product Managers. The resulting prototype linked above is a high-fidelity representation of the final product, allowing us to fully communicate the visual, interface, experience, and interaction design to stakeholders, developers, and users, and put a functional product in front of customers much earlier in the process.