Agrokor

Agrokor

  • Corporate website
  • |
  • FMCG

Agrokor Group is the largest privately owned company in Croatia and one of the most important companies in Southeastern Europe. The Group’s core business ranges from agriculture and food production to retail and other commercial activities.

services

  • Research & Analysis
  • Strategy & Planning
  • User journeys
  • User Experience & Design
  • System architecture
  • Front-end development
  • Back-end development
  • Ongoing support & Consulting

Challenge

A company of Agrokor’s size and importance needed a website able to represent it adequately. Our overall goal was to create a modern, clean and consistent visual framework that also works well with a wide range of content types and messages.

Main objectives:

  • Make the website a primary source of Agrokor related information

  • Strengthen the image of Agrokor as the leading company in the region

  • Increase the number of visitors and extend the time spent on site

From brief to desktop

From brief to screen

First, let us show you the workflow of this project

In our line of work, putting together a successful story in just one shot is close to impossible. In order to create solutions that are in accordance with our client's challenges, we’re committed to an iterative process comprised of analysis, feedback, testing and adjustments.

From brief to desktop
  • Analysis, planning and project management

    Naturally, planning and project management are dominant in the beginning and decrease as the project evolves. However, through various iterations of analysis and planning we’re ready to adjust the course of a project.

  • Design

    Design starts with the definition of the concept and it continues through two iterations. One is related to pure design layout production and the other to inspection and polishing of the site.

  • Front-end development

    Front-end development enters the process shortly after the design phase. Front-end developers collaborate closely with designers through various iterations of check-ups and phases of site polishing.

  • Back-end development

    As back-end developers create the computational logic of the website, their effort is more or less always present on a constant scale throughout the project.

Audience

Working closely with the client and before setting off on the project, it was of paramount significance to define the website’s audience. Prioritization of our target audiences plays a big role in devising concepts, defining the tone of communication and designing the site. Who were we making this site for and who was going to use it?

Considering that every Agrokor brand already had its website, through various workshops with Agrokor personnel we concluded the corporate site doesn’t need to communicate primarily to consumers and general public. Brand sites were already doing that. We did not exclude these targets as irrelevant, but concentrated the communication more on the company’s business audience.

Main target audiences by priority

  • Business community
    Business community
  • Investors
    Investors
  • Media representatives
    Media representatives
  • Potential employees
    Potential employees
  • General public
    General public

Communication concepts

How do we address two different types of targets and convey two different messages?

One of the main questions we asked ourselves is “What is Agrokor?”

And subsequently, what does it represent?

When people think about large companies like this one, they usually have quite a rigid picture in mind. Our main task (and biggest challenge) was to create a new corporate website which will present impressive results and at the same time promote company’s values and social responsibility to the public.

We identified two sets of messages the website has to communicate.

How does one merge these two concepts and tones without sounding odd? Through design, content adjustment and grooming.

1 2

Strength of the company

Business audience

serious tone of communication, business results, number of employees, financial results, visual symbols of strength

Return to nature

General public

a more casual tone of communication, human values, social responsibility, healthy nutrition, domestic production

Design

Emotion and message through design

Special effort was put into this project by our design department in particular. It was clear right away that design would be the principal tool of conveying different messages and emotions, and subsequently we came out with three possible concepts.

  1. First concept
  2. Second concept
  3. Third concept

Together with the client we chose the third option!

Why? It gave us the possibility to implement both concepts of communication: strength of the Group and return to nature.

The main advantage of this concept? It allowed clear visual emphasis on key messages throughout the project. On top of that, this particular option had a tremendous influence on the feel of the whole site.

Mobile first and responsive

Mobile first and responsive Mobile first and responsive Mobile first and responsive

Even though the emotion is transmitted visually, content is always the pivotal point. This is particularly noticeable on mobile phones where photos purposefully disappear if the visitor is in need of quick information. When viewed on smaller screens, a Particular RWD adjusts all the unnecessary items, putting the information at the center of attention.

Typography & Colour

We are using 12-column fluid grid layout sistem inside a contaner, in which columns are re-arranged  depending on the screen size, always having in mind Mobile-first approach. The stacked mobile layout easily unwraps to fit horizontal desktop devices.

Content

As we thought about this site, it became clear that apart from general messages, a company of Agrokor’s size needs to be able to distribute transparent and easily accessible information via it’s website.

We also realized that the company previously produced a huge amount of content through various brand books, annual reports, product catalogues etc.

Before setting off on the project, we spent a lot of time stocktaking the existing content about the company and its brands. The amount of content was so large we needed to find the common denominator for gauging both quality and quantity of existing content for different companies, brands and sub-brands.

1000

pages of content

Main challenge

SYSTEMATIC CONTENT FILTERING PROCESS

How to successfully present all this data that varies so much in both quantity and quality? Through constant iterations of systematic filtering and comparison, we came to various solutions.

In the end, there was enough content to make a page for every brand, so that is exactly what we did! (this did not exist in the earlier version of the site)

Finally we presented different materials and highlighted key messages for different targets through visually appealing interactive infographics.

In order to raise the quality of dialogue between design and content, we made the design blocks follow the content, and vice versa.

INTERACTIVE CONTENT

On the other hand we presented different materials for different targets through nice looking interactive infographics and highlighted key messages.

Relate content: Parallax

We found the parallax scrolling concept a perfect solution for relating various types of content. Take a look at how key messages follow content on brand pages...

From field to table

Key thing in developing content strategy was to present the company in a more human way, making it appear less rigid to general public.

In order to do so we developed a full screen scrolling microsite dominated by beautiful photos, representing the company’s main ideas, brands and core business through a story. It’s a presentation of Agrokor’s business processes in a more emotional way, connecting the company with hearts of the general public.

Storytelling through design and movement

Storytelling on the web is not just about text. Number of tools and technologies one can use is endless. To best tell this story, we used design and movement to bring it to life.

  • Poljoprivreda
  • proizvodnja
  • Distribucija
  • Maloprodaja

Full screen scrolling allowed us to tell a story in visually attractive way. We also needed to highlight various sections of the process as well. So we separated them with movement. How? When the user scrolls down, the page scrolls from right to left. Only at the end of one section of the process does the page scroll downwards. We defined 4 sections of the process (agriculture, production, logistics and distribution, retail) and divided them as shown in the infographic.

Enhancing UX for different user groups

There were certain types of information we needed to emphasize and make more accessible.

  • Media

    We made all the needed data available for download (logos, visual, breaking news, about the company, reports….) allowing fast and easy access for journalists and other media representatives.

  • Investors

    There is now a significant amount of information available straight away and ready for download, no login needed. Potential investors can evaluate their investment opportunities through just a few simple clicks.

  • Careers

    Along with a presentation of the employment process, development and educational opportunities, we needed to upgrade the application form for potential employees. We introduced new steps in the employment process in order to make employee filtering easier for the company.

  • News

    These are now related to categories/themes throughout the site - the user always has the latest news within the specific category he is looking for. By doing that, we managed to provide all the information currently relevant for a certain topic.

I’ve had the pleasure of working with web.burza web development team on several projects. Apart from dedication to delivering quality service on time, what sets these guys apart is going that extra mile in order to make the final product better. On top of that they are a fun group of people to hang around with.

Ivan Kovačević Director of Digital Marketing Department at Agrokor

Content management

core.WEB

The website is running on our own CMS, core.WEB which is customizable to specifically fit the needs of various projects. It’s optimized for speed and scalability, flawlessly delivering more than 3 million pages per day. Most important of all, it makes content curation much more easy for the editing staff.

Sitemap

Using widgets, our powerful system of building blocks, we simplified changes to the navigational structure of the website. If, for example, the company decides to concentrate more on the Media page of the site, they could easily make the Media page the focal point of their site’s navigation.

And the results?

The bar for this project was set very high. We’ve more than reached it, and managed to pack it all into a beautiful, simple and easy-to-read design that has all the key attributes across every-size device imaginable (RWD). The effort was huge but yielded awesome results.

6 months after the website launch - compared to the same period of last year...

  • Users
  • Avg. Session Duration
  • Mobile

Which technologies did we use?

  • HTML5 / CSS3 / JS (jQuery)
  • SASS
  • Grunt
  • Require.js
  • Modernizr.js
  • PHP
  • MySQL
  • Sphinx
  • core.FRAMEWORK
  • core.WEB CMS

Liked it?