Case Study of an award winning website: Konstantopoulos SA "Olymp"

Konstantopoulos SA "Olymp" world leading exporter of greek table olives and virgin olive oil commissioned us to redesign the company's corporate website with a clear B2B focus. We aimed for a fresh and modern website, combining the earthly tones of brown, gold and green with playful microinteractions and animations, while catering for the specialized information needs of wholesale B2B customers worldwide.

Design concept

From the onset we identified the need for a strong central concept and narrative to guide the design directions. Thankfully, we did not have to look far: the fruit of the olive tree itself, cultivated for millennia in the greek soil and strongly entwined with the region's traditions, proved the ideal hero "character". We opted for delicious close-up photographs of olives to lead us through the content, ever present both in a leading as in a supporting capacity. When perusing the content, the visitor is constantly reminded of the excellent quality product on offer.

Visual system

The visual system of the website is complemented by recurring patterns used throughout the website to provide a consistent, branded experience:

• The use of parallax scrolling in combination with floating elements (raw and processed olives and olive leaves) ensure that our hero characters are always around, playfully interacting with the content.
• The color palette is complemented by noise texture fills, providing essential visual variation without extending the colour palette unnecessarily.
• Use of subdued, almost-monotone photographs for hero regions provide a dream-like quality to the photo elements while making sure the focus is on the introductory copy.
• Smooth scrolling is used to subtly reinforce the parallax effect and scroll-triggered waypoints, allowing more time for the animations to run their course without hindering user navigation.

Close focus

Let us examine a few UI elements of the website from a front-end design perspective:

• Homepage main CTA: Our initial approaches involved a custom slider implementation with 3 different CTAs and associated animations. We delivered and tested a prototype version of the widget, only to verify what research strongly suggests: slideshows don't work for any slide but the first. We ended up condensing our three messages into one, and used the corresponding animation to display the other missing messages (year-round supply and diversity of white-label product variations).

• Menu animations: The navigation menu has two levels of depth. We utilised a two-column layout with the first column showing the first-level elements and the second column the second-level elements where appropriate. Animating the menu backgrounds and items was done using timeline animation (via TimelineMax). In hindsight, the animation choreography using this technique proved extremely challenging, considering the layout changes of the menu in smaller resolutions.

• History and Production process sections: these sections use a complex layout presentation, combining fixed elements (pager and year indicators) combined with controlled scrolling for the image and copy. The change effect of the year indicators was implemented with a simple yet visually impressive system: each number is represented by a vertical column of numbers (0-9) using overflow-hidden. At each change, each column rotates independently from its current to its target number, with a different animation duration and delay adding to the visual interest of the effect without undue programming complexity. After analysing the actual years to be displayed, we opted to shift our columns by one element so that each would start from 9, thus making the "turn of the century" animations less jumpy.

• Floating element animations. Initial efforts focused on having each element move independently and also keep moving even when the user was not scrolling. The idea sounded good on paper, but quick prototyping showed opposite effects than what was intended: the olives moved around creepily, showing bug-like movement. We simplified and streamlined the motion, increased animation times and eliminated independent movement to arrive at the desired "free-floating" result.

Art direction

The final result would not be what it is without appropriate professional photography and video content complementing the experience. We provided clear guidelines to our expert collaborators in order to produce effective visual content to complement our visual and communication strategy.

Photography by Margarita Yoko Nikitaki

Reception

The final website received enthusiastic comments from the client and their network chain, redefining what a professional B2B website should look like in the olive processing and export sector. We're also very happy about the recognition the website has gathered in the web design sector.

Technologies

The back-end of the website was built using Drupal 8, our favorite CMS. On the front-end, we combined TimelineMax for animations and ScrollMagic for targeted parallax and smooth scrolling effects. The noise texture in headers was achieved with transparent text fill color combined with a textured tileable background-image. All CSS was written in SASS following the BEM/SMACSS conventions.

_________
This article was originally published at Awwwards Magazine.

AWARDS
The website was awarded Site of the Day and Developer Award in the Awwwards, Special Kudos and Best UI, UX & Innovation awards (public awards) in the CSS Design Awards.

Visit the website: www.konstolymp.gr
Read more on project's presentation