The drastic change from colorful to “color less”

A case study and discussion of how the use of color aligned visual design with the impact of a small business consultant

Jarell Zablan
6 min readJun 28, 2021

Coco Canary Consulting is a firm that specializes in evaluating the programs and outcomes of impact-driven organizations. The sole proprietor of Coco Canary is heavily involved in driving positive change in her community. She leverages racial equity and social justice and provides resources for businesses and entities to be more socially conscious in their delivery and impact of businesses.

The Problem

Being a small proprietor, there is a need to have a website that accurately expresses her motives, values, and services effectively. By benefitting from pro bono design, Coco Canary Consulting can attract more attention, benefit from additional consultations, and have a visual design that is impacting and sets her apart from competitors.

The Objective

Coco Canary Consulting is in need of a landing page re-design. The client had expressed that she is open to a new color scheme, but does have a current logo that should be incorporated within the style of the re-design. My goal, as her visual designer, is to create a refreshing page that communicates her services and emphasizes her approach to social justice and inspiring change.

Brand Development

Because the client was not present during the development of her landing page, I began by assessing her current use of imagery and tonality which were noticeable in her current design.

A selection of the moodboard developed for Coco Canary

Moodboard: I developed a moodboard of over twenty different images that represented the various values, tones, and voice of her brand. This was a springboard to identify how I could continue to continue to portray such in her redesign.

Brand Tones: Based on her current site and moodboard, I identified that Coco Canary was a brand that was bold, inspirational, and fearless. Her business is one that breaks traditional consulting barriers, addresses change in areas that other competitors typically do not address, and is not afraid to stand up to clients or other external agencies. These tones allowed for a focus in the initial design and final iteration.

Visual design guidelines produced based on brand tones and moodboard.

Typography: Roboto with a black weight was chosen based on its ability to hold a heavy and bold weight while still being easily read. This typography relays Coco Canary’s bold and outspoken traits while firmly remaining professional and accessible. Other similar fonts that were explored included Poppins Bold, but its more whimsical and casual appearance did not fortify the strong messages of social and political issues that were addressed on Coco Canary’s current landing page.

Because Roboto was such a strong font in Black weight, I ultimately decided to stick with this single font in order to not let website visitors to be overwhelmed with various typography in various weights. The typography of the redesigned site is the same font, Roboto Black, in various font sizes. The goal was to utilize fonts to create impact, relay the bold, inspirational, and fearless aspects of the company.

Colors: The owner of Coco Canary Consulting was clear in letting me know that she was open to a new color scheme. However, her company logo did use a purple tone, so I introduced a new color palette that incorporated the purple to hold onto the original branding. The sunset-inspired color palette was introduced to bring in a sense of wisdom and sensitivity as the owner is adamant about cultural sensitivity and current, and possibly volatile, social issues. However, as discussed below, this choice of coloring was not ideal for various reasons and and ultimate decision was made to ensure the proper impact was conveyed.

Initial Design

The initial landing page was designed and was displayed in a gallery-style feedback session where I was able to receive helpful feedback, from my team, which I heavily relied on to iterate and create a much more effective design. The most valuable feedback received included:

First iteration of Coco Canary Consulting’s Landing Page

Choice of color tones: The pink and purple hues over the images utilized provided a “dreamy” brand tone to the landing page which may not legitimize Coco Canary Consulting’s approach to business or social issues.

Coco Canary Branding absent: The logo appears only in the small navbar. I needed to figure out how to incorporate the brand identity in the hero section of the landing page.

More content needed: The second and third panels of the landing page needed more content as they would be the main information sinks for viewers to learn about what Coco Canary Consulting does and how it approaches social justice work.

Leveraging feedback and enhancing visual design

It was clear to me that my usage of colors was not touching on my main branding tones that I had intentionally set for myself: bold, inspirational, and fearless. I began by turning removing the saturation from the entire mock-up to see how color could be utilized strategically to enhance Coco Canary Consulting’s branding and experience. I created a new color scheme that would encompass my original intentions and captured Coco Canary’s ability to impact its clientele.

Change in Branding Color Scheme developed after feedback.

Based on these changes and the rest of the feedback, I decided to utilize a black, white, and gray design and utilized purple and yellow to codify action words or buttons throughout the site. It is my belief that this iteration proved to be much more tethered to the branding tones provided at the start of the project. Here are the additions and revisions that I made:

Final design for Coco Canary Consulting’s landing page

Black and white scheme: Though black and white may provide a colder tone to the site, I ensured to utilize certain levels of exposure, shadowing, and contrast to bring an uplifting and hopeful look to the images.

Selective color usage: The black and white layout allowed for more emphasis on the few times I did utilize color on her site. Yellow was indicated on action words throughout the site and then on the creator’s name to emphasize that she is a person of action and “getting the job done”. The use of purple indicated intended hot spots on the website and to spur conversion from visit to consultation scheduled.

Content added: I provided more insight as to the services and offerings that Coco Canary Consulting has available to its clients.

By incorporating the helpful feedback from the design gallery, I was able to really pinpoint my goal as a designer and to remain attached to the client’s purpose and goals as a business owner. It was an absolute pleasure designing for a client who is so committed to spurring positive change at the business level and not many competitor consultants approach business in this fashion.

Wrap Up and Thoughts

Coco Canary Consulting provided a unique challenge in that this type of business does not truly exist in any other regard. Without being able to engage with this client on a personal level, it was an important task to understand who she was through her work and to let that lead my visual design. This project was extremely important in understanding the importance of gathering feedback to incorporate in the iterative process. By prioritizing concerns and questions as well as the brand experience that the client aims to provide, one can truly make adjustments to their design that can have impactful outcomes on the final result. It was an absolute pleasure working through this process for this small business owner!

--

--

Jarell Zablan
0 Followers

UX Designer with a more-than-passionate love for Videogames. Please feel free to connect with me: https://www.linkedin.com/in/jarellz/