top of page
1.png

Color Reference & Accessibility tool

Chatham Financial Intern Project

During my internship at Chatham Financial as a User Interface Design Intern,

my main summer project was to redesign the technology team's current color reference and develop an accessibility tool that would check color contrast.

ezgif.com-gif-maker (1).gif

Going exploring

My first step was to see what the current page looked like. I explored the current page without any information about it other than that it was used by developers to reference color codes.

Asking some
questions

The next stage was to figure out very specifically what the page was being used for and how it was navigated. I split up my findings into "uses", "likes", "pain points", and "suggested changes and additions". Each dot represents a response that mentioned that piece of feedback.

UserResearch.png
2.png

What's your favorite color?

I then asked users to sort which colors they used the most in their work. The results showed a lot of repeating patterns.

Bringing the responses to life

Based on the information collected, I had a solid foundation to start creating a few different ideas for cards and containers. In this stage it was important to keep in mind how the different containers would exist alongside one another, and how each would transform and respond if the page dimensions were changed.

3.png
4.5.png
5.png

Getting feedback
from the team

After showing the design to the team, I got a great idea of what was needed to move forward in the process. The areas to improve were the breathability and tightness of the design, and what was working was the hierarchy of the information.

Final Container & Card Design

Card Interaction.gif

Final Design

6.png

Container Before & After

Mapping color search
scenarios

Search scenario 1.png
Search scenario 2.png
Search scenario 3.png

Color Accessibility Checker

7.png
bottom of page