Coco Canary Consulting — Website Redesign
In a week-long sprint, I had the opportunity to redesign a landing page for Coco Canary Consulting.
Coco Canary Consulting is an evaluating and communications firm founded by Molly O’Connor, doing their work through a racial equity lens. They focus on inspiring inclusion, supporting social justice, and promoting anti-racism culture in all the work they do.
Their current website featured a variety of assorted photos and a lot of text. While it is very informative, it can also be overwhelming. My goal was to simplify the page to increase engagement, while keeping important information easily accessible.
My first step was making a few rough sketches and wireframes of how I could simplify the page. From there, I moved into Figma and started to see how it would look with colors and text.
I created a new color palette using two blue/green colors with a red accent. I wanted to be intentional about using a meaningful color palette that also looked good. I found some colors and looked into what each color represents to make sure it was in line with CCC. Blue symbolizes trust, loyalty, and responsibility. Turquoise balances and stabilizes while symbolizing communication. Green symbolizes growth. And red symbolizes action and strength.
For the first draft, I kept a lot of Molly’s original information. I moved a few things around and cleaned some of it up.
After receiving feedback, I had plenty of changes to make. The initial font I had chosen was challenging to read in some areas, the logo color didn’t match the color palette, my call-to-actions were vague, the “Who We Are” section was very dense, the red at the bottom looked out of place. In addition to the technical feedback, I realized that it still looked a little sterile.
When I was starting to implement some changes to the design, I had two options:
- I could continue building on this idea to try and make it work
- I could start over and try to make something better
I initially chose the first option. I realized that while this is a business, that doesn’t mean it has to lack personality. I tried to take what I had and add some colorful blobs to it. It wasn’t working.
Then I tried the second option. I took the blobs and ran with them. After figuring out how to arrange the content on the page, it all started falling into place. I found a way to change the logo color and I made sure to include all three colors beginning at the top of the page and use them consistently throughout.
After mostly completing the landing page design with the blobs, I had the thought, “what about circles?” The next day, I swapped out all of the blobs with circles and felt that it really tied everything together. It added personality and fun while staying professional and it worked well with the existing circular logo.
I then made a few small adjustments after receiving some additional feedback. I changed the call-to-action in the global nav from “BOOK” to “BOOK NOW” to add clarity, I slightly rounded the corners on the buttons to make them less harsh, I changed the colors in the “BENEFITS” section, slightly changed the size of the selected option to make it stand out more, and changed the font in that section from bold to regular, and I cleaned up the footer.
Overall, this was a great opportunity to explore different design styles and learn Figma. Moving forward, I would explore different options for interactions and continue to incorporate this new style into the rest of the website.