Coco Canary Consulting
Coco Canary Consulting (CCC) is a consulting service that specializes in fostering inclusion, standing up for social justice, and being a voice for anti-racism.
Project Brief
Time Duration
1 Week
Project Type
Social Justice Consulting Website Landing Page
My Role
Lead and sole UX/UI Designer
Original
Redesign
Growing the Impact for Social Justice
CCC works closely with their clients to provide them with thorough evaluations of how to implement social justice through extensive research, establish wanted goals and outcomes, and develop and coordinate grants for their organization.
This project focused on growing the CCC’s impact by redesigning the landing page of their site to increase the number of users who reached out to learn more and book a consulting session with them.
CCC was looking to capture a more compelling picture of their mission through a more modern, organized, user-friendly, and aesthetically pleasing interface.
They were open to a new color palette and copywriting, but wanted to keep their logo basically the same.
Goals
Highlight calls to action
Reorganize content in a natural flow
Give the site a fresh, professional and modern look
Steps
Defining the Need
1
Before I jumped into sketching new ideas for CCC’s landing page, I went ahead and read through their website to gain a better understanding of their mission. Then I conducted a heuristics evaluation that focused on the home page.
Overall, there were a few things to change in order to raise the evaluation of this landing page. The three things that I focused on were:
1. Strong calls to action
2. A tasteful and readable layout design
3. Professional yet bold color palette and layout
| Learnability | 3 | Too many paragraphs-not easy to skim, some information repeats, not a lot of break up in layout |
| Efficiency | 3 | Information is packed in there, but it is hard to scan, it needs a clear picture or graphic emphasizing inclusion or social justice |
| Memory | 3 | Not much differentiation of layout and text style, the headings need to be more prominent, the order of information could be changed to better highlight the important points |
| Error Management | 2 | There are error pop-ups, but only for one section missed at a time |
| Satisfaction | 2 | Layout is bland, too many paragraphs, needs a better call to action- but the mission is wonderful and the words do tell a story |
LEMErS Evaluation based on a scale of 1-5
Ideation
2
After grouping the home page’s information into sections, I began to sketch out what order to place the information in and also the general layout of the page. My goal was to give it a more modern look while still sticking to a traditional landing page format.
Low-Fidelity Wireframes
I uploaded my sketches into Figma and began to wireframe them out. It did take me a few iterations to balance the white space, placeholders, and text, but it eventually came together looking like this.
The Initial High-Fidelity Prototype
Next, I added the color! I created this style guide to keep everything consistent and organized throughout. I choose these colors, font, and button styles to keep everything looking professional, but to still add a bit of pop and modern style to it.
Peer Feedback
3
34 Opinions!
After the initial high-fidelity landing page was created, I began to collect feedback from 34 other UX designers. There were many suggestions and comments on almost every section of the landing page, but the main areas of change were found in the following:
- More contrast between color and words
- Break up the paragraphs into smaller chunks
- Reduce the amount of spacing between each section
- Add graphics for emphasis/summary
- Make the text BIGGER!
So, I set out on a journey to revise my original design to meet the needs of my “users” (peers). I applied each of these 5 areas of feedback to make a more polished, user-friendly, and more aesthetically pleasing design.
Design Solution
4
Hero
The home page states what they do with a call to action of, “Get a Free Consult Today!”
About
This section goes a little deeper into what they are and what they work towards.
Benefits of Work
This section plainly states the three benefits of their work while giving a brief introduction to each.
What We Offer
This portion breaks up the three key elements that CCC offers in a thorough, but not overwhelming type of way.
Partnerships
The partnerships help establish credibility and provide a reference to what areas they have served in before.
News
This section showcases the most recent newsletters written by the CCC letting you know what is happening to help fight for Social Justice.
Join Our Newsletter
This last section is calling you to sign up for monthly updates so that you can learn how to help change the world through social justice and equality!
Learnings and Next Steps
5
Learnings
I had such a wonderful time redesigning this website because of its inspiring messages and purpose. I learned that people want transparency and clarity when they land on a page. They want to know who and what the organization is all about without having to dig or read through paragraphs to learn their mission. I also learned that peer feedback is very helpful secondary to user research.
Molly O’Connor, the CEO of Coco Canary Consulting, gave me a shoutout in their March newsletter which I was thrilled about! (Full Newsletter)
Next Steps
- Wireframe the entire website
- Continue to run more usability tests
- Continue UI to create a high-fidelity prototype for all pages
- Launch and reiterate designs and features as necessary