Coral Reef Alliance

Mobile Web Design, UI/UX, Interaction, Branding

For this project, completed for GRA 3803, I rebranded and redesigned the Coral Reef Alliance website. The goal of the Coral Reef Alliance is to fund projects that foster the health and growth of coral reefs around the world, and to educate the public on the importance of coral reefs. The goal was to create a fresh brand identity and site design that would emphasize the beauty and importance of coral reefs while encouraging the users to take action and support the cause.

Branding

The Coral Reef Alliance did not have distinct, consistent branding elements throughout it's site. To create a friendly brand image that would appeal to potential donors or users exploring the site to learn about coral reefs, I established new brand elements. For the color palette, I wanted to add a variation of colors other than blue to represent the diversity of life in a coral reef. In the mood board, I sampled potential color palettes inspired by different coral reef images.

I wanted to emphasize the beauty of coral reefs and make sure that the audience was able to see it as well, so I wanted to use the appropriate UI colors in order to prevent overwhelming the user with too many images.

Moodboard

mood board

Branding Guide

branding guide

Style Guide

Using elements from the branding guide, I created a style guide in order to help me organize elements for the website. I wanted to ensure that the primary colors were primarily emphasized through photography and styling such as header borders, and that secondary colors were used with buttons, because they provided more emphasis. Due to the geometric nature of the slab heading font, I aimed to keep the shapes and forms to be solid geometric shapes as well.

styling guide

Interactive Prototype and Visual Design

Utilizing the style guide and existing content, I created mobile and desktop screens as well as a mobile prototype for the website, which can all be viewed below.