Nectar

Nectar is a platform on which advertisers and publishers make a direct deal to buy advertising spaces. There are two distinct user groups. One is a publisher who provides advertising spaces for purchase, and the other group is agencies or ad ops who run the ad campaigns.

Nectar’s current design was handed off by a design agency, and has since been without a designer. There were a lot of usability problems, minor and major, to be fixed when I came onboard the team as in-house product designer.

The redesign project came about from the need to make Nectar responsive. The challenge was to make the entire site responsive by breaking up the project feature by feature. Therefore, redesign needed to respect the existing structure and be able to launch one feature at a time.

Discovery

User interviews were conducted with Nectar’s users to discover how they currently use the product, and what their pain points were. I also wanted to find out what the users needed from the mobile version of Nectar.

Problems with overall systems were as follows:

Users rarely accessed Nectar on mobile since they know that it’s not responsive. When they did access it, it was to track the campaign performances. Then they would have to switch to desktop in ordere to make the adjustments to their campaigns.

Explore

Through sketches and lo-fi wireframes, various ideas were explored. The concept was further refined through hi-fi versions.

Campaigns

Current campaign page shows campaigns in card format and there is no indication of performances or health of the campaigns.

The new design switched to a tabular format that showed the overall progress of the campaigns. There is quick visual indicators at a glance of campaign health and what exactly needed their attention. The goal was to eliminate the users' needs to use different products for sourcing the performance metrics.

Style Guide

Ultimately, I also wanted to review current UI's and build a style guide that would make the platform consistent.

Initially the hi-fi visual explorations used the pink brand colour. However mid-way through, I decided to shift away from the pink. Interviews and guerilla user testing revealed that many users called the brand pink “red”, often associated with “dangerous” actions. Since I wanted to reserve red and green colours for reinforcing positive and negative actions, blue-green palette was chosen to complement the brand colours.

Campaign Delivery

A campaign is organized into different lines and flights. When a line flight starts to deliver ads, performance metrics are tracked under “Delivery” tab inside each flight. Users have to switch between “Delivery” and “Allocations” tabs and do manual calculations to make impression delivery adjustments in the flight.

  1. The navigation system moved to the page title area, where breadcrumb and dropdown menu will be used to navigate inside a campaign.
  2. The line criteria also moved to the header area, below the navigation system. Users did not always need this to be exposed and edited. It now displayed the most relevant information (budget and dates) for the user to carry out their tasks.
  3. The “Delivery” and “Allocations” tabs are combined into a single page. Day to day performance graphs keep track of the most important campaign KPI’s (impression delivery and clickthrough rates - CTR). Users make adjustments depending on how well these campaign KPI’s are performing.
  4. There is now a visual indicator of overall health of allocation deliveries.
  5. Allocations are now displayed in tabular format for quicker scanning of delivery progress. The current layout can only displays one or two allocations at a time and it can be labour intensive to scroll and compare them.
  6. Making allocation adjustments has become a function of its own.

Simplify

In current state, the line criteria is a single long column. There is no hierarchy and not all fields are mandatory. The dependency between some fields were not evident.

The criteria was broken down into what purpose they serve.

Some of the fields were changed from dropdown to checkboxes or radio since the choices are only 2-4 items. Users will immediately see the available choices.

Ad sizes were confusing prior to redesign. You needed to choose ad type first, and then ad sizes would populate. If you chose more than one ad type, you couldn't know which ad size goes with which ad type. This was changed to choosing ad size for each type.

Only two fields are mandatory for targeting. The other optional targetings are hidden away until it's needed by the user

Mobile

As the resesign progressed, mobile versions were also explored.