MASS Exchange

MASS Exchange

Date: spring 2015 – fall 2015
Categories: product design, interaction design, visual communications design, front-end web development
Tools: Adobe Illustrator, HTML, CSS, JavaScript, jQuery, node.js, D3.js

MASS Exchange is a programmatic futures exchange for advertising, and has taken the Wall Street futures exchange model and adapted it for trading advertising.

MASS Exchange uniquely enables linear, addressable, and audience targeted inventory on a unified media management platform. As a result, sellers can more efficiently respond to demand across linear TV spots, audience targeted TV spots, and addressable TV impressions.

It provides an efficient way to bid on and negotiate to buy television advertising sold as linear TV, audience targeted TV, or addressable TV impressions.

Buyers can search the market by network, day-part, day, hour, show, pod and audience. And with the ability to bid on qualified inventory at a more granular level, buyers are able to target the spots that best meet their campaign objectives.

I worked as the product designer for MX, collaborating with the creative director to execute the UI/UX and visual design for its interface. My tasks included designing the UI in Adobe Illustrator, based on UX wireframes provided to me, and rapidly prototyping them in HTML and CSS. The prototypes were then passed on to a development team.

I started with Balsamiq wireframes provided to me by the creative director:

Ariel Cotton UI UX Design Mass Exchange New York Wireframing Futures Trading

Using these and the identity colors chosen by the creative director, I designed the application’s user interface. I began with the dashboard, which went through about 10 iterations:

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

Eventually we decided on Baskerville for the headings. We felt that a serif typeface conveyed stability, and a sense of establishment. The creative director remarked that one rarely comes across a bank with a sans-serif typeface.

I implemented our designs into HTML and CSS prototypes, starting with the dashboard, one for the advertiser side and one for the publisher side:

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

There were more than 20 screens that needed to be designed for the publisher side and advertiser side. We established visual identity guidelines and stuck to them rigorously.

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

I let the creative director’s wireframes dictate the flow from one screen to the next, and used visual cues such as colors and content placement to make the flow as intuitive as possible.

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading

Ariel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures TradingAriel Cotton UI UX Design Mass Exchange New York Interface Visual Design Futures Trading



Top