Klare

CropLife

A website redesign that combines two websites: croplife.org and actionforag.org. Leveraging angular.js, we were able to quickly load resources, news, and case studies, making browsing through pages and pages of articles instantaneous without requiring page loads or ajax.
Homepage

The Problem

CropLife came to iStrategyLabs for a complete website redesign. They needed to combine two websites, croplife.org and actionforag.org, together into one site where members of the crop science community at large could search and browse through information related to the industry.

What We Built

We combined the two websites to create a cohesive repository of information stored in one place. Leveraging angular.js, we were able to quickly load resources, news, and case studies, making browsing through pages and pages of articles instantaneous without requiring page loads or ajax.

CropLife.org

What I Worked On

I lead design through the discovery, wireframes and design phases, choosing user experiences that both fit the clients needs and that of their core user base.

Sitemap

This was a particularly large web build with a lot of different pages, so it was important to identify templates for parent and child pages at the very beginning. A thorough sitemap was also helpful in crafting a content audit of both existing websites.

Sitemap

Wireframes

I created static wireframes based on the templates identified from the sitemap and content audit, choosing a flexible layout for changing information. A split navigation separates the content between information about the crop science industry at large and information about CropLife as an organization. Limiting the homepage to one large background image carousel helps focus the website to the most relevant and recent news without cluttering the page, and thus, diverting attention from the most important items.

When creating the wireframes, I kept in mind the modularity for a large scale web build. Focusing on reusable components, I was able to start creating a framework for the whole website, lending to a cohesive experience, rather than a collection of pages.

Wireframes

Visual Design

Starting in Photoshop, I experimented with different visual styles on a few of the main pages, presenting these comps to the client using Invision. Once a visual style was agreed upon, I moved into in-browser design, creating a working prototype of the website that the client could use as an example for key stakeholders.

CropLife's existing brand had Gotham in varying weights as their main and secondary font. Since the majority of the website would be informational, with longer articles, I introduced a serif, FF Tisa, for readability and contrast.

I wanted to keep CropLife's bright green as the main focus of their brand while introducing other bright pops of color for interactions, when needed. Since CropLife already had a large repo of gorgeous crop photos, I wanted to use these as the main focal point to contrast long swatches of information in the main articles.

Homepage Interior Media Resources