Client — Coco Canary Consulting
Sector — Consulting
My role — UI Designer responsible for content audit, UI audit, branding, and UI redesign.
Project Time — one-week sprint
Coco Canary Consulting, or CCC, is an evaluation and communications firm whose mission is to uplift businesses of marginalized persons in St. Paul, Minnesota.
My goal for this one-week sprint was to improve the overall flow and visual design of CCC’s homepage.
While conducting a content audit for CCC’s site, I kept the following questions in mind.
‣ What is the value for the business and user? Why?
- The Content on CCC is to advertise Molly’s (founder and CEO) business, which is an evaluation and communication firm whose client focus is those from marginalized communities/backgrounds.
- CCC needs to inform potential clients of what they do and convince clients to hire them.
- Users on the CCC homepage need to know quickly what CCC is, what CCC does, and how it will benefit them.
‣ How, when, and why is the content discovered?
- Everything on the site is static. There are no interactions/dynamic nothing.
- Content is discoverable upon scrolling.
‣ What does the user do next?
- Learn More about Services
- Subscribe to the CCC newsletter.
- Get in Touch.
- There’s is no large or noticeable call to action to work with Molly on the Homepage!
To get to the heart of the Coco Canary Consulting identity, I conducted a few branding exercises.
Who is CCC?
Of the 12 Master Archetypes, Coco Canary Consulting is the Hero, the protagonist who rises to meet a challenge and saves the day.
What is CCC’s personality?
Authentic | Genuine | Inclusive | Progressive | Small Business | Approachable | Not corporate
Caring but not Overbearing.
Progressive but not intolerant.
Authentic but not Eclectic.
Formal but not stiff.
By now I really want to start designing, but I conducted a UI Audit where I am taking screenshots of current content and making note of styles. In this exercise, I’m not focused on identifying problems or coming up with solutions. I am simply collecting and categorizing content.
Visual Identity: Color
Two key issues I wanted to address were the overall flow of the site and the type of treatment.
Content Flow Issues
At a glance, it is difficult to know what Coco Canary is about. The site is in need of chunking and content rearrangement.
This is because:
- Their sentences are long and wordy.
- A lot of different information is grouped together.
- They don't easily express what they do right at the beginning of the site.
The image above shows the first section right below the hero section. What users should be able to understand from looking at this quickly is what CCC does and what value they have to offer. Instead, this section tells some of what CCC does, then moves into what they care about, states that they donate, explains how what they care about relates to what they do, gives information about their inspiration, and declares their location.
I would rearrange this content throughout the site so that Users know what CCC does and what value it can provide to the user before they speak to ‘How what they care about relates to what they do’.
Another example of a section in need of chunking and rearrangement is the ‘Services’. This service triad, Evaluation | Communication | Development, appears four times in four different and inconsistent ways.
- Under Section-Heading is Evaluation | Communication | Development.
- Paragraph Descriptions of Evaluation | Communication | Development.
- Images for Evaluation | Communication | Development.
- Bulleted pointed list of what Evaluation | Communication | Development entails.
Type Treatments Issues
At the moment CCC’s body paragraphs are not reader-friendly.
This is because:
- They exceed the recommended 40–70 character length for any given line of text.
- They lack effective bolding and use of headers and subheaders.
And finally, my favorite part of the process, the redesign.
I started by sketching on paper. Because this is a content-first approach to re-design the site, I wrote out headers instead of using squiggles to symbolize text. Squiggles wouldn’t be very helpful to me in these sketches figuring out what content should go where and how best to format it.
Once I settled on a sketch I liked, I transferred my paper sketch onto Figma and created a mid-fidelity wireframe.
I presented my wireframe to 30 different UX Designers in my workplace inner-circle in Miro and consolidate their feedback into the red annotations below.
Overall, the positive feedback I got was that the layout and flow of the content were good.
Some of the main things I needed to work on were:
- Adding critical Call-to-Action buttons
- Presenting BIPOC people on the site. Especially if the site is supposed to help the BIPOC businesses.
- Further chunk the ‘We Care’ section and tell a story with it!
Taking in all this feedback. I iterated on my design and added visual styles to create a high-fidelity mock-up.
- Conduct visual design testing to (in)validate that the design represents the brand personality I came up with.
- Test again