Invivo
Invivo

Invivo

Type
UXUIB2BDesign systemCorporate website
Tools
Figma
Rôle

Product Designer

Description

Full audit & Revamp of Invivo corporate website following their merger with another group.

Timeline

June 2022 - December 2022

Project Context

  • The agricultural giant, Invivo, buys & merge with Soufflet, thus, sparking the need for a new brand website.
  • Invivo corporate website must inspire confidence in partnering cooperatives, demonstrate vision and international stature to inspire innovation and join the group.
  • We were tasked for a total rework of their corporate site including the back office CMS to allow the client to update the website with ease.
UX wireframes templates
UX wireframes templates

My Tasks :

  • A workshop to forge the information structure & architecture of the site : Confirm the targets, validate and optimise the navigation & identify pages’ contents.
  • Deep analysis of Invivo and Soufflet website to sort contents that will be kept and content that will be adapted, evolved or improved.

  • Site tree with content mapping , to have an overview of the contents & identify the content that needs to be produced by the different production teams.
  • Working closely with UI designer & developers we delivered an accessible & eco-friendly website in just 4 months. Based on a modular system, our client is able to customise the page according to its needs.
Workshop overview
Workshop overview

Team Process :

  • I was tasked with curating and leading a workshop with a focus on site's structure & content. The main objectives was to bring everyone on the same page.
  • I Audited the contents of Invivo and Soufflet websites to create a content map & pave a roadmap of contents to build.
  • I designed a series of components to feed the design system in order to build the website from the ground up.
  • I managed a junior UI designer until he was autonomous.
image

Website site tree

🔍🔍🔍🔍🔍🔍🔍🔍 Close ups 🔍🔍🔍🔍🔍🔍🔍🔍🔍🔍 

🔍 Focus on : Site tree.

The devil is in the details

👉🏽We needed to document every pages content during the workshop to make sure everyone was on the same page.

This practice of detailing the site tree to the maximum allowed all teams to agree on the content strategy and accelerated the design production.

Detailing allowed us to categorise the contents and then come up with templates structure for each pages’ category and stick to it.

Details of site tree
Details of site tree

🔍 Focus on : Identity

We choose symbols of nature to represent InVivo's activities.

The humans are InVivo members at work, snapped on the move. And the views from the air reinforce InVivo's impact.
The humans are InVivo members at work, snapped on the move. And the views from the air reinforce InVivo's impact.
Different natural and mineral shades. Flat colours, to create a contrast between each other.
Different natural and mineral shades. Flat colours, to create a contrast between each other.
Timeless, the shapes are flat, clear and pure. The circle is central, representing Earth and cooperation.
Timeless, the shapes are flat, clear and pure. The circle is central, representing Earth and cooperation.
In constant motion, the patterns are based on data, they follow the rhythm of life, the movement of the user, and the movement of the sun.
In constant motion, the patterns are based on data, they follow the rhythm of life, the movement of the user, and the movement of the sun.

🔍 Focus on Design process

1- UX

image

2- UI & Doc

image

3- Results

🔗
Discover Project Live !

Check out the project

Key learnings:

💡
Collaborate with a team to draw and document a large scale detailed site tree.

View project's website