One of my first projects at Civic Champs was to redesign the Champions Table, which was an organization's table of active volunteers.

I assessed numerous problems with the original design (shown above):

• The page was not responsive, and required a horizontal scroll for any monitor with a resolution lower than 1800 pixels.

• Columns width was equal for each column, regardless of average field length or informational importance. This even included the column that housed the row checkbox!

• The table displayed the same columns for each customer, regardless of if they were relevant to the organization. For example, not all customers tracked donations with Civic Champs.

• The table did not show what Groups a volunteer was a member of (an important categorizing feature for volunteer coordinators)

• The Search field and Add button were not in intuitive locations.

Step 1: Define the Table Pattern

Civic Champs did not have any sort of design system or consistency across pages, with a high amount of variation across each table. My first step was to define a pattern-level table layout that could accommodate all tables across the website.

Each type of column element was defined as an asset in Figma (standard text, glyph, numerical, etc.), and then used to build column assets, table assets, and ultimately a generic page.

Universal table functionality was also considered, resulting in reusable functionality such as filtering system, column customization, table search, etc.

The Champions table redesign accomplished the following improvements:

• Variable column width, so that columns don't take up more space than they need

• Responsive design to accommodate useability all the way down to mobile browsers

• Customizable columns so orgs can better promote important information (or hide irrelevant columns)

• Consolidated contact information to glyphs, so coordinators could more easily see if a volunteer had a phone number or email on file at a glance

• New Groups column to more easily sort and filter for certain volunteers

The table customization was built off of the principle of strong defaults for the general public, but allowing for power users to better customize their experience. All columns from the original layout were maintained (First and Last name columns as separate, for example), so no existing user was forced into an unfamiliar table. This feature also allowed users with smaller monitors to readjust the column order, so their most high priority information could appear furthest left, in the case of their table having a horizontal scroll.

Original vs Redesign at 1024x768

The only responsive element Civic Champs originally had was to hide the left nav altogether at smaller resolutions, which made site navigation impossible. The added touch of redesigning a condensed left nav transformed the product from being functionally unusable with a smaller monitor to zero loss of functionality.