Evaluation and communication with a racial equity lens–A UI Case study
Background
This past week I was tasked with redesigning the landing page for Coco Canary Consulting. Upon my initial review of the website, I was immediately attracted and inspired by the emphasis on racial equality Coco Canary implemented into their business practices.
Although Coco Canary had a very captivating and unique business model, their landing page did little to clearly inform the reader of the services they provide. My goal for this project was to highlight the emphasis of racial equity and how this related to their business.
Content Audit
Before I began designing, I conducted a content audit to asses the company’s purpose and the value they provide for the user.
What message are they trying to convey?
About half of Coco Canary’s landing page is dedicated to emphasizing their dedication to social justice. It was clear that this is a huge part of their company values. I wanted to make sure to keep this idea in the forefront while keeping it concise and clear.
What services do they provide?
The second half of the landing page is dedicated to an extensive explanation of the services Coco Canary offer. Although much of the information provided was valuable and informative, some of the content was a bit redundant and convoluted. I believed that highlighting they key information would go a long way in helping the user quickly understand the value of the company.
What is their call to action?
The only call to action was located at the very bottom of the page. In terms of hierarchy, I wanted to make sure the call to action was higher up to increase user interaction.
After my evaluation, I came up with a list of things that I believed needed to be redeveloped in order to achieve the project goals.
- Organize information in an natural flowing way
- Highlight their company values
- Highlight the call to action
- Reprioritize information on the landing page
- Rephrase the copy in a succinct and clear way
- Redesign the interface to evoke cultural acceptance
Editing
Before jumping into the visual design elements, I needed to make sure I worked out the copy to ensure that I was designing around the content and not trying to fit the content into the design.
Header
There were several important elements of the first few paragraphs of their landing page that I wanted to highlight. The challenge was taking this information and condensing it into one sentence that could be used as the header.
This eventually became my iteration of the companies words. I wanted to make sure I was not completely rewriting their text or changing their message but rather highlighting the important information so the viewer clearly understands the company values.
Company Values
This area of the company website was extremely important because it explained what makes their company different. It was clear that Coco Canary valued inclusion and racial equity.
Although their content clearly explained the ways in which the lack of inclusion and racial equity could negatively affect business performance, I wanted to turn this information around into a more positive outlook.
Services
Evaluation, communication and development were the three main services that Coco Canary provided. This information was shown multiple times throughout the landing page so my goal was to centralize this information in a way that was digestible for the user.
Firstly, I wanted the user to understand that these were services that the company provided without explicitly saying, “services provided”. I also took information about their services that were placed around the page and condensed it into a few sentences.
Sketching & Ideation
Now that I had the copy fully laid out, I started thinking of how the design would relate to the content. Racial equity and inclusion were so important to the company values so I knew early on that this would be a consistent theme throughout the design.
I wanted to have the imagery of people of different races as well as a puzzle with the idea of different shapes and sizes working together.
This specific style of imagery proved to be extremely difficult to convey through photography so I decided to illustrate this content within Figma.
In terms of color choice, I decided to use a coral red and a grayish blue. These cool and warm colors added some contrast and welcoming identity that the company could be associated with. I intentionally used this same color choice for the icon design and tried to keep the style of the icons and weight of lines consistent throughout the design.
With the content and visuals in mind, I began designing the overall layout of the landing page. I really wanted to make sure that the page lead the viewer down the page in an intuitive way.
Landing page design
Using gradient-filled organic shapes, I created motion throughout the page aimed at helping guide the user down the page. I included a CTA at the very top of the page to allow users to gain more knowledge of the company. I also wanted to highlight the various companies that Coco is working with so that potential clients know what kind of businesses they associate with.
Final Thoughts
Coco Canary Consulting is such a unique and socially aware company that I was excited to attempt a redesign for. Having such great content already made the design process that much easier. My only goal was to prioritize the already strong content and polish the layout to reflect their values.