Adding Visual Delight to Coco Canary Consulting through a content-first approach — A UI Case Study

Image of Phone by Rodion Kutsaev sourced through Unsplash

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.

Content Audit

Giphy of Coco Canary Consulting’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!

Branding

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?

Brand Traits

Authentic | Genuine | Inclusive | Progressive | Small Business | Approachable | Not corporate

Goldilocks Statements

Caring but not Overbearing.

Progressive but not intolerant.

Authentic but not Eclectic.

Formal but not stiff.

UI Audit

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.

Typography: Headings

CCC’s varied headings.

Visual Identity: Color

CCC’s current website colors.

Media: Images

CCC’s current images.

Layout: Lists

Key Issues

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 about section right under the hero section on CCC’s site with annotations.

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’.

How I rearranged CCC content to improve content flow.

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.

  1. Under Section-Heading is Evaluation | Communication | Development.
  2. Paragraph Descriptions of Evaluation | Communication | Development.
  3. Images for Evaluation | Communication | Development.
  4. Bulleted pointed list of what Evaluation | Communication | Development entails.
Annotated service section.

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.
Screenshots of various type and copy from the CCC site.

Redesign

Redesign overview from sketch to hi-fi mockup.

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.

Grayscale image of paper sketches.

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.

Mid-fidelity wireframe with feedback annotations.

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.

Design Styles

Next Steps

  • Conduct visual design testing to (in)validate that the design represents the brand personality I came up with.
  • Iterate
  • Test again

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store