Yara. Website redesign.

Yara wanted to change its strategy. From providing technical information to suppliers to providing educational information to farmers. This was a pilot project for US and French country specific websites.

Task

Reviewing and evaluating existing user research. Evaluating existing offline collateral. Suggest how to present content in an informative and engaging manner.

Action

Produced high fidelity wireframes using existing and proposed content. Considering the need for the design to be multilingual. Taking into account label lengths and affordance.

Result

Helped identify the need for unified source for all collateral. Including copy, imagery and media. Educated the client on the need for continuous improvement.

Sketches & wireframes

Product and services landing page

Product and services landing page

Citrus key facts. Links to growth stages and types of citrus. Local supplier information. Local advisor CTA. Nutrient types. Seasonal application. Products to increase yield.

Product and services landing page

Product and services landing page

Citrus key facts. Links to growth stages and types of citrus. Local supplier information. Local advisor CTA. Nutrient types. Seasonal application. Products to increase yield.

Tools and services landing page

Tools and services landing page

Carousel displaying apps and services. Apps for individual farmers. Services provided. Video carousel displaying customer stories.

Tools and services landing page

Tools and services landing page

Carousel displaying apps and services. Apps for individual farmers. Services provided. Video carousel displaying customer stories.

Horizontal milestone timeline

Horizontal milestone timeline

Sort by product. Sort by milestone. Sort by global presence. Navigate per screen. Navigate by year.

Horizontal milestone timeline

Horizontal milestone timeline

Sort by product. Sort by milestone. Sort by global presence. Navigate per screen. Navigate by year.

Vertical timeline

Vertical timeline

Hero and branding imagery. Navigate by year. Includes key messages - knowledge, innovation and culture.

Vertical timeline

Vertical timeline

Hero and branding imagery. Navigate by year. Includes key messages - knowledge, innovation and culture.

Crisis overlay multiple production sites

Crisis overlay multiple production sites

Overlay positioned above header. Clearly visible to user. On close header returns to original position. Details of crisis communicated clearly and succinctly to users.

Crisis overlay multiple production sites

Crisis overlay multiple production sites

Overlay positioned above header. Clearly visible to user. On close header returns to original position. Details of crisis communicated clearly and succinctly to users.

Production site listing page

Production site listing page

Listing of production sites in specific countries. Option to filter listing by country. Each listing contains image, brief description of site, location and contact details.

Production site listing page

Production site listing page

Listing of production sites in specific countries. Option to filter listing by country. Each listing contains image, brief description of site, location and contact details.

Production site landing page

Production site landing page

Gallery. Introduction to site. Key environmental facts highlighted. Visual links to additional content using existing html elements.

Production site landing page

Production site landing page

Gallery. Introduction to site. Key environmental facts highlighted. Visual links to additional content using existing html elements.

Prototype

Used to test the behaviour of navigation and product filtering. On the responsive design of the website.

Smartphone prototype