Counterpart International

Our Work Page

To complement the rest of Counterpart International's website relaunch, they needed a mechanism to allow visitors that didn't know much about Counterpart to learn about the organization and explore what it is that they do. We looked at all of their projects and realized that for a new visitor it was hard to understand their work and where they do it, while connecting it to the stories of the people they help.

 

So rather than using words to convey their message, we made an interactive search tool. This tool allows visitors to learn about Counterpart's areas of work and the connections between each sector while also viewing stories and impacts, putting the vital information all on one succinct page.

 

 

 

PROJECT ROLE

UX/UI Designer

 

CLIENT

Counterpart International

 

AGENCY

Insomniac Design

 

POSITION

Design Intern

TEAM

Alyssa Pine

Taylor Gersch

 

Interaction 1

Visitors are met with a welcome message as the bubbles flow onto the screen and pulse to show that they can be clicked.

Interaction 2

Next, users click whichever area of work sparks their interest. When they click the bubble colors with the corresponding brand color, stories and statistics populate on the right. The area of work that intersects with the first area clicked receives a larger outline for differentiation while the rest fade.

Interaction 3

As the user clicks a corresponding area of work, shown using the bubbles with the thick outline, the stories and impacts continue to filter to the right.

Interaction 4

Visitors can choose as many corresponding filters as they want and the stories will continue to filter to show how much work is happening within those intersections. The bubbles on the left continue to narrow in scope.

Interaction 5

When the user has clicked the number of filters they please, he or she can click on a story to learn more or clear their interactions and start again.

Check these out too!

© nicole riemer 2018
  • Grey Instagram Icon
  • Grey LinkedIn Icon
  • Grey Pinterest Icon