Coco Canary Consulting
Client
Coco Canary Consulting
Time Duration
1 Week
My Role
Lead and sole UI/UX designer
Project Details
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. They help clients meet these goals through three services: Evaluation, Communication, and Development. CCC works closely with their clients to provide them with thorough evaluations 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.
Original
Redesign
The Challenge: Growing the Impact
When CCC reached out in need of a landing page re-design, I was more than happy to take on the challenge. They were 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
1. Highlight calls to action in an appealing way
2. Organize content in a tasteful and easy to read layout
3. Make the site look more modern and aesthetically pleasing
The Process
1
Defining the Need
Heuristics Evaluation
Before I jumped into sketching new ideas for their 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. Tasteful and readable layout design
3. Professional, yet bold color palette and layout
Insights
|
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
2
Ideation
Sketches
After grouping the information into sections, I began to sketch out what order the information would be placed in and also the general layout of the page. My goals was to give it a more modern look while still sticking with a traditional landing page.
Low-Fidelity Wireframes
After I created a few sketches that I was pretty happy with, I uploaded them into Figma and started wireframing them out. I went through quite a few designs before finding a good balance of content, graphics, and white space. Here is how they turned out!
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.
Design Library
Colors
3
Peer Feedback
Thirty-Four 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 emphaisis/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.
4
Final Design Solution
High-Fidelity Redesign
5
Next Steps and Learnings
All in all, I was really pleased with how the landing page turned out and I was extremely grateful for all of the peer feedback I received to make this design even better. I also believe that this landing page helped solve CCC’s problem for a more modern, organized, user-friendly, and aesthetically pleasing interface.
Moving forward, I would like to design the other pages on the site to match the landing page, do user interviews and testing, and then finalize it for a launch!
Next Project:
Want to Connect?
Please feel free to reach out!