Designed and built by Me!

Colors of America

The struggles for Americans

Background
The idea of Colors of America and Be came to me when I took a visit to Alabama for Christmas. I saw the past racial divide of Montgomery, with the First House of the Confederacy, Dexter Avenue Baptist Church, and the Rosa Parks Museum. Viewing the direct impact of the marches and peaceful protest on the racial equality movement showed me how hard we African Americans have fought for our rights and the right to be treated equally.

Hero section crazy eights.
Crazy eights.
Sketch of a card like system.

I returned from the trip with a website idea highlighting the fight and struggles of minorities, ways to support minorities, and ways to organize peaceful marches and protests. The idea simmered in the back of my mind as I went back to work.

Then the Women’s March on January 21st 2017 happened. On January 23rd I asked my co-workers whether they attended the Women’s March. About ten said no, and six didn’t know it was going on. Those who answered no said they did not want to travel the hour to Denver from Colorado Springs. This lead to my follow up question of “Didn’t you know of the march in Colorado Springs?” All replied no, they didn’t know.

A look at the final verison.

The Challenge
Build a website that highlights the stories of minority groups, ways to support them, and organize peaceful marches and protest.

Research
After months of iteration, sketching, and talking with users (co-workers and friends) I quickly realized I needed two different applications. The reason is because a majority of users believed the site was too cluttered and confusing. There were also two major camps developing: those who cared to learn more the minority group’s struggle and those who just want to organize protests. Thus Be was born, which kept Colors of America main purpose clear.

The purpose of Be.
What makes it different.
Be's login and onboarding.
Colors of AmericaBe

Now with Be in the mix, I began working on ways to incorporate within Colors of America (Changing the tagline and how Support works)

Colors of America Design
My number one goal for Be and Colors of America is for them to be easy to navigate and very very simple to use. With Colors of America, it takes a maximum of two clicks to support any group. With Be, the majority of the UI will be text based using icons sparingly.

Hero Section
Detail Section

With both I’m using a dark gray background (#212121) with off white (#fafafa), and a calm yellow (#ffd564) elements. This gives a calming and sleek feeling so the user is never overwhelmed with the amount of content. The off white and calm yellow allows me to draw the user’s eyes to where I want them to look.

Tab Design
Initially there were no tabs, it was just a very long website. This lead to scrolling fatigue and having to make sure how I organized the groups. Which overall led to a bad user experience.I was skeptical towards making tabs, primarily because tabs seem to confuse users in some of my pass designs. Which would mean I designed them poorly and needed to implement it better.

One of the very first iteration.
Version once I switched to tabs.
Final tab version.

With these tabs I have three very different states: inactive, hovered, and active.

The different tab states (active, inactive, and hovered).
Inactive Hovered Active

As I tested this with users, (the) majority found it easy to differentiate between all three states. A few found the hover state confusing as they expected the content to change because of the hover state transition.

Detail Design
The detail section went through quite a bit of iteration, while its goal remained true: give each minority group its spotlight. Which meant I wanted to highlight key information, display a powerful image, and present a way to support them. As stated above I was planning on having the user scroll a very long page but quickly scrapped that experience. Displaying them in tab format allowed me to bring focus to each group.

First iteration.

As I tested this with users, (the) majority found it easy to differentiate between all three states. A few found the hover state confusing as they expected the content to change because of the hover state transition.

Detail section with tabs.

The next challenge was to lay out the content. I knew I wanted the imagery to play a big part and make it easy to support the group. At first I only displayed the image associated with the group on the right and had the group name, support button, and key moments to the left. The challenge I ran into with this design was how I was going to display the key moments and support information. Since I scrapped the long page scroll I settled with the image to the left and group name to the left, while I had the key information and support button to the right.

Final mockup of details.

Header and Footer Design
My design goal for the header and footer was to keep it simple. Each has powerful imagery in the background with text that fit the image’s theme.

Footer mockup.