Coco Canary Consulting Landing Page Design — UX Case Study

Earlier this month, I partnered with Coco Canary Consulting, an evaluations firm that consults non-profits, foundations, and for-profit social impact businesses to help them improve their internal communications and audience impact.

Coco Canary Consulting (CCC) was looking for an updated landing page to increase customer retention and reflect their brand in a fresh way. The goal here was to provide a page that showcases brand unity, connects content visually, and highlights the customer journey through their services.

Project

My role: UX Research, Visual Design, Copy Design, Prototyping

Scope: Create a hi-fi landing page design for Coco Canary Consulting.

Time: Six Days

Tools: Figma, Adobe Illustrator

Process:

1. Research — UI and Content Audit.
2. Ideation — establishing core features and sketching.
3. Testing and Feedback — class critique and design iterations.
4. Prototyping — Figma design and style guide.

I dove into the project with a UI Audit of CCC’s original homepage. I wanted to make it a point to write down the “must haves” from their homepage and the overall structure of the organization, so I had a complete perspective of what it is they do.

UI Audit and Observations

As I went through the homepage and website I took note of certain elements and grouped them, so I could see patterns and connections in the design clearly. Below are a couple of screenshots from the homepage and the groups I pulled from the entire site.

From these screenshots, you can see a clear mission statement and three main pillars of business: Evaluation, Communication, and Development.

Scrolling down, the next section is extremely copy-heavy. I found this hard to digest; if I weren’t required to understand the background of the company for the project I would have skimmed over this and moved on pretty quickly. There’s not an established “F-pattern” visual hierarchy and the faint grey color failed to hold my attention. But without reading this section fully, the bulk of the firm’s practice, their core beliefs, and how they give back to local communities would have been lost on me.

Below I included part of my UI Audit, broken into different groups: Headings, Links, Navigation, Colors, and Buttons.

Illustrated above, you can see there’s inconsistency with most of the elements. Use of fonts and sizing seem unique to each page, copy is separated without real organization, and colors are not attached to specific action points. This makes for an overall messy and outdated feeling when browsing the site. Potential customers will be looking for a professional and organized style and buy into that feeling when wanting to partner with CCC. Additionally, there’s a lack of Call to Action elements, making it easy for users to leave the page without completing a necessary task, like signing up for services.

What I liked about CCC’s website was the use of unique images and personal anecdotes. When looking through the site, most page’s hero sections include photographs Molly (CCC Founder) has taken and showcases her in action working with clients. This made me feel that Molly was personally invested in her company and the work she does for clients, which would be a great takeaway to keep in the new landing page.

Content Takeaways

After completing my UI Audit, I broke down what I thought were must-haves for my landing page content. I decided what I should include was:

1. Three pillars of CCC with a summary of the firm’s role — Evaluation, Communication, and Development.
2. Call to Action for client retention.
3. CCC’s services and its benefits
4. Opportunity for users to connect or get in touch with someone from CCC.
5. Newsletter / Blog showcase.

Once I established what content was necessary to include on the landing page, I started to lay out how I would incorporate different elements in a creative, but practical way.

Regarding the CCC’s brand, I wanted to come up with a few Brand Affinity statements to reference throughout my design decisions, to make sure I was continuing CCC’s core brand experience in my prototype —

Coco Canary is inclusive and helpful, but never general.

Coco Canary is knowledgeable, but never condescending.

Coco Canary is inviting, but never pushy.

Sketching

I started from the top and worked my way down the landing page, (very) roughly sketching out some hero section options. Here, I designed with the idea of having a bracket-flow visual as a way to lead users down the page in a unique way. This also played into the idea of CCC being an evaluative and analytical firm, taking pride in “measuring” clients’ business impact “through easy-to-read infographics and reports.”

I also sketched some options including personal pictures showcasing Molly’s hands-on style in consulting to keep the personal tone intact.

Wireframing

After sketching, I moved into Figma to create my wireframes, establish initial components, structure, and to visualize my content flow idea using the brackets.

Side by side view of my main wireframe.

Full wireframe view.

Testing Feedback

As a group, my class completed a gallery-style viewing of everyone’s landing pages and did a group critique of each one. Here is some of the feedback I received on my wireframe:

1. Include a global navigation bar at the top so users have more control and understanding of where they are on the site.
2. Make the hero images faded out until you hover over them, that way the images are clearer and you can fully see each one.
3. First images are too large, condense with some sort of information or Call to Action.
4. Positive feedback around my bracket-flow design.
5. Give more room to the “Meet Molly” and “Meet our Clients” sections.
6. Create consistent CTA buttons with section headers (i.e. Client section should have “Learn More” instead of “See our Work.”
7. Keep text sizes consistent, could be larger.

From there, I took note of the positives and negatives from our group critique and moved back to Figma to add color, style, and other changes into my prototype.

After a few iterations in Figma and quick user testing for feedback, the prototype I landed on is illustrated below —

Style Guide

My Design Decisions

I re-designed the hero section to both highlight the consultancy’s personable feel with photos and added a summary for users to immediately understand what service the business provides.

I kept my bracket-flow design to aid in the user’s journey through different information, but cleaned up title spacing and reorganized the order of certain sections. My second CTA is worded more informally as an approachable way to get prospective client information.

It was clear to me early on that CCC was deeply invested in the organizations and businesses they partnered with. Molly, the founder, highlights her personal resume, character traits, and beliefs in the firm’s About section. The tone in the site’s writing was conversational, yet professional. Friendly and approachable, but committed. I wanted to keep these feelings in my new design as well. Highlighted by my Meet Molly and What We Care About Sections, I made sure that users would immediately see what was at the core of the consultancy. Prioritizing these sections earlier on in the page, I felt it would successfully play into “people buying into people.”

I wanted to remain consistent in the color palette of CCC’s current website and logo. I created a monochromatic look with an addition of yellow for CTA buttons, attracting more attention to them throughout the page.

After user testing this final prototype a bit more, if I were to continue iterating, I would build out:

1. Write more personal and better-flowing “Meet Molly” copy.
2. Add a section for CCC blog.
3. Create a space for direct contact between users and CCC, through an email box directly on the page, or through instant messaging on the side with a consultant.