CASE STUDY: GLOBAL CORAL REEF ALLIANCE WEBSITE REDESIGN Case Study by Kathleen Corgan

Size: px

Start display at page:

Download "CASE STUDY: GLOBAL CORAL REEF ALLIANCE WEBSITE REDESIGN Case Study by Kathleen Corgan"

Virgil Marshall
5 years ago
Views:

CASE STUDY: GLOBAL CORAL REEF ALLIANCE WEBSITE REDESIGN Case Study by Kathleen Corgan July 31, 2014 CLIENT Web Design I - ART 169A / Professor Deborah Krikun PROJECT TITLE Global Coral Reef Alliance

1 CASE STUDY: GLOBAL CORAL REEF ALLIANCE WEBSITE REDESIGN Case Study by Kathleen Corgan July 31, 2014 CLIENT Web Design I - ART 169A / Professor Deborah Krikun PROJECT TITLE Global Coral Reef Alliance Web Design DURATION Summer 2014 TEAM Kathleen Corgan DESCRIPTION The Global Coral Reef Alliance is a non- profit, all- volunteer group: scientists, divers, artists, and environmentalists, dedicated to the growth and preservation of coral reefs around the world. To accomplish their goals, GCRA relies on a unique method of coral reef restoration and regrowth called the Biorock Process, a mineral accretion technique stimulated by low voltage electrical currents applied to man- made reef structures that facilitate coral regrowth. Machinists, divers and artisans from myriad backgrounds have proffered their talents and

2 labor to create and install frameworks along threatened coral habitats that range from simple and utilitarian to beautiful and complex. Unlike other man- made structures that are simply submerged and left along coastlines with the hope of the germination of new ecosystems, the application of the Biorock Process is a proactive effort to restore a very much- underappreciated yet vital component of our earth s environmental sustainability. RESEARCH STRATEGY In addition to past research on the Global Coral Reef Alliance s existing web presence and lack of visual identity, I further explored the manner in which GCRA had recently updated its site s appearance and content structure. While they have, since my logo design project, taken the positive step of collecting and organizing their content on a Wordpress site, they still do not have a compelling visual persona and means of attracting interest from potential new volunteers, contributors or sponsors. In looking at the web designs of some of their better- funded peers (albeit still non- profit, e.g. Conservation International, Greenpeace) in the environmental sustainability category, I recognized a number of key elements that could create a more inviting and arresting site, hopefully encouraging the layperson s further exploration into GCRA s cause. In approaching the redesign for the site, my first task was to create and overall format, guided by the sitemap. I decided to base my wireframe on one long, scrolling page, to best accommodate the navigational needs of both desktop computers and mobile devices. I did go with a fixed width layout, but a future iteration will be converted to a liquid layout for maximum design aesthetic paired with versatile functionality. Next I had to decide on a color palette and chose the typography for the site. I knew I still wanted to use a sans serif font, one that offered thin, open weights to provide a clean look that would hold up as a white on a darker background. I chose Google Fonts Lato for its good variety of weights and clean style (I used 300 and 100 weight). This choice would also support my color palette of deep blues for the background color, warm red and pink coral shades to complement and use for the logo, and off- white for text, which I chose with the help of Adobe s Kuler palette creator. The biggest step in the redesign was separating the organization s functions and information into single page, full frame or full- width, photographic showcases, a design choice embraced by peer sites (e.g Africa Wildlife Fund). Again, later iterations may even display full frame video (eg. National Geographic Magazine Serengeti Lions), but I do want to consider server budget and bandwidth in regard to UX. In terms of organizing the site, I chose a Who, What, Where approach to define the different areas of viewer interest. I also added a map page which would have and active UX/UI interface showing the coral reef restoration locations using a remote rollover effect on a world map. Finally, I separated the Donate page in order to begin to allow a parallel flow of pages with imagery once I expand the site. With all the information contained within the original GCRA site, my idea is that additional pages can be mast- headed with more of their stunning, yet underutilized photography, with clean and simple text and infographics formatted into neat, easy to read two or three column layouts. CHALLENGES Staying simple was, and continues to be, my biggest challenge with this site. The original site has an overwhelming amount of information contained within it. Rather than try to tackle all the information into a few web pages, however, my goal was to present a beautiful and inviting cover as a gateway to each area of information. I realized in studying other sites

3 employing full frame photography that certain types of images are more fitting than others to use to the greatest impact. Stunning contrast and silhouette, vast depth in wide shots, and sharp focus with narrow depth of field in close- ups, are all techniques that give the most striking results on a 2 dimensional screen. I ended up replacing both my home page image and donate page images at the very end of the class because my original choices were not meeting those parameters. Since this is a relatively small non- profit, and even its officers are all volunteer (a distinct difference from the larger peer organizations whom I chose to emulate), it is important to keep the format of any added content simple and easy to maintain. I also struggled to maintain a cohesive design aesthetic as I built the site, learning the HTML5 and CSS3 code on the fly and sometimes adding elements without keeping the overall design plan in mind. After giving the site a good look, I have returned to my dark blue background to underscore the underwater feel, and I m in the process of simplifying the headline text of each frame and implementing percentage widths for each container within the pages to allow resize of the grid with the different format sizes. What I realize as I build this site is that simple for the UI/UX usually means complex for the designer/developer! RESULTS So far the resulting site is a solid start and promises to be an infinitely better draw for potential contributors and sponsors. The challenge of designing a simple, liquid layout that can accommodate multiple device formats is a big one, but in the end if it makes donations and increasing awareness easier, it s absolutely worth it. The visual results so far are encouraging me to continue with this site and follow through on further tightening the design aesthetic that will put GCRA in a closer league to its peers.

The Deerbrook Web Style Guide

The Deerbrook Web Style Guide Table of Contents Introduction Agency Dashboard 2 Customer Data Window 3 Creative Brief Page Structure Agency Dashboard 5 Customer Data Window 7 Typography Color Photography