3. The link and button colors used did not pass WCAG contrast guidelines

  • The color of the buttons and campaign names posed an accessibility issue.

We also needed to account for introducing additional campaign statuses as a part of this work.


Discovery

The goal of this project was to make it easier for users to view their campaigns on the index page by improving readability, usability, and accessibility of the content on the page.

When a user authenticated into the application, they were taken to the index page where they had a list view of all of their campaigns. This page was important to our users as it was the entry point at which they could evaluate campaign data, so solving the usability issues with this page would have a large impact in decreasing user frustration and improving user sentiment.

Goals

How might we make it easier for users to use the table to view their campaigns?

The Challenge

Choozle is a SaaS company that enables businesses to run programmatic campaigns using its platform. The product integrates with demand-side platforms (DSPs) such as The Trade Desk and Amazon Ads in order to distill their vast advertising offerings into a curated and simplified experience for maximum campaign performance.

Our product team received feedback from users that the page that contained the campaigns list could be improved.

During Winter 2022-2023, I was the sole product designer responsible for the end-to-end design process from conception to final deliverables. My role included the following responsibilities: conducting interviews, user research, competitive analysis, wireframing, information architecture, prototyping, visual design, usability testing, design QA prior to release, and design iteration. I worked cross-functionally with a product manager and our front-end engineering team to bring the project to life.

Overview

Campaign Index

Design

Many enhancements to this project have been released as quality of life improvements since this case study was published, including:

  • Adding icons to all campaign statuses for consistency
  • Moving to fully rounded corners within the application (in this instance, updating the pacing button to have a radius to match)
  • Right-aligning numerical values within the data grid
  • Moving to sentence case buttons and headings throughout the application (in this instance, in the column titles)

Future Improvements

^ BACK TO TOP 

Value proposition

The new campaign index page will make it easy for users to view campaign data so that they have a pleasant experience with Choozle.

2. The table truncated campaign names without a way for users to see the full text (no resizable columns)
I worked with our engineers to determine what data table solutions we could use that would solve our user pain points and be compatible with our infrastructure. We landed on the Data Grid by Material UI. 

Here is how I solved for each of our user pain points:
Problem: The link and button colors used did not pass WCAG contrast guidelines

  • Solution: After advocating for our users and gathering approval from executive leadership, the board, and our brand designer, I updated the button colors to a darker green within our design system that passed WCAG standards in efforts to move our application toward having an accessible interface.

As part of this work, I also changed the buttons from title case to sentence case and implemented a button radius to help modernize the platform and give it a contemporary feel, increasing user trust in our company.
Our product team reviewed feedback submitted via the platform to discover the challenges our users face when using the campaign index page. As the sole product designer on the team, I also conducted a usability audit on the page to see how it could be improved.

Our research uncovered a few main pain points:
 
1. The table scroll was hard to use

  • The table scroll was a page scroll. The default number of rows expanded the height of the table very far down the page, and the pagination was at the bottom of the table, making it very cumbersome for users to actually get to the bottom of the table in order to scroll to the right. 


Problem: The table scroll was hard to use.

  • Solution: As a part of the move to the data grid, we also changed the page structure so that the table footer position would always be easily accessible to the user on the page. We contained the table scroll within the table so that the table controls and overall page was easier to use.
Problem: The table truncated campaign names without a way for users to see the full text (no resizable columns)

  • Solution: We took advantage of the resizable column widths that were a default feature of the data grid to give users control over the display of the content, and used ellipsis to indicate to users when their content was truncated.