Gravity

[columnsection wrapper=”wrapper” animation=”null”][col size=”one-full” last=”last-col” animation=”false”]

Strategic Design

[sr-subtitle size=”h4″ alignment=”left”]A digital supply chain management solution[/sr-subtitle]

[/col][/columnsection][spacer size=”small”][columnsection wrapper=”wrapper” animation=”false”][col size=”two-third” animation=”false”]

Gravity Supply Chain is a cloud-based management solution that provides ‘real time’ data visibility to the entire supply chain, through a suite of modular apps. As a Lead UX/UI Designer, my role was to create and build prototypes, establish and promote the use of a Design System plan, implement new design guidelines and ensure the overall competitiveness of the software in terms of user experience and design.

When I joined the startup, in parallel with the product design, I worked closely with the marketing team to design online and offline marketing collateral, such as the corporate website revamp, updates of the brand guideline, booth design, and brochures.

[/col][col size=”one-third” last=”last-col” animation=”false”]

My role

[sr-subtitle size=”h6″ alignment=”left”]Create the digital communication[/sr-subtitle]
[sr-subtitle size=”h6″ alignment=”left”]Design and develop the website[/sr-subtitle]
[sr-subtitle size=”h6″ alignment=”left”]Lead the design system project[/sr-subtitle]

[/col][/columnsection][spacer size=”small”][spacer size=”mini”][horizontalsection background=”video” colorbg=”” imagebg=”https://julienheron.com/wp-content/uploads/2015/07/test.jpg” imageparallax=”false” videomp4=”https://julienheron.com/wp-content/uploads/2019/08/Gravity_Video.mp4″ videowebm=”https://julienheron.com/wp-content/uploads/2019/08/Gravity_Video.webm” videoogv=”https://julienheron.com/wp-content/uploads/2019/08/Gravity_Video.ogv” videowidth=”1680″ videoheight=”600″ videoposter=”https://julienheron.com/wp-content/uploads/2019/08/gravity-supply-chain.jpg” videoparallax=”false” videooverlay=”” videooverlayopacity=”1″ textcolor=”text-light” pdtop=”200″ pdbottom=”200″ fullheight=”false”][/horizontalsection][spacer size=”medium”][columnsection wrapper=”wrapper” animation=”false”][col size=”one-full” last=”last-col” animation=”false”]

Design System

[/col][/columnsection][spacer size=”small”][columnsection wrapper=”wrapper” animation=”null”][col size=”one-half” animation=”false”]

With the large number of apps within the Gravity system, consistency and collaboration are the main challenges for the Design team. With the need for scale, and the development of a new style guide, the necessity for a Design System was more relevant than ever. Our first step has been to audit every component that we have, in order to eliminate inconsistencies and start to define the design standards.

[/col][col size=”one-half” last=”last-col” animation=”false”]

The goals of this component library is to standardize and unify the design elements, both for Design and Tech teams. The Atomic Design philosophy has been useful to structure and define the elements that we will include in our library. With the aim to improve the Design team collaboration and performance, we developed the library with nested symbols on sketch, and use Sketch cloud to sync, share and update.

[/col][/columnsection][spacer size=”small”][sr-gallery images=”image~~1362~~https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive-designer_Gravity_UX-Strategy_layouts-150×150.jpg” type=”gallery” columns=”1″ animation=”false” tilesize=”300″ crop=”false” spaced=”no” lightbox=”no”][spacer size=”small”][columnsection wrapper=”wrapper” animation=”null”][col size=”two-third” animation=”false”]

By creating a shareable set of standards for designing and coding, we were able to increase our time to market and velocity. For instance, we managed to design prototypes and implement them faster than ever before. The Design system helps us to improve the overall UX across the product, because all the elements have a consistent look and function in a similar way. It bridges the gap between Design and Tech teams by increasing the knowledge sharing and collaboration. It was easier to keep everyone on the same page, and allows us to explore and push the boundaries of what we can achieve together.

[/col][col size=”one-third” last=”last-col” animation=”false”][sr-gallery images=”image~~1352~~https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive_designer_Gravity_UX-Research_logo-150×150.png” type=”gallery” columns=”1″ animation=”false” tilesize=”300″ crop=”false” spaced=”no” lightbox=”no”][/col][/columnsection][spacer size=”small”][spacer size=”mini”][horizontalsection background=”color” colorbg=”#1b7984″ imagebg=”” imageparallax=”true” videomp4=”” videowebm=”” videoogv=”” videowidth=”” videoheight=”” videoposter=”” videoparallax=”true” videooverlay=”” videooverlayopacity=”1″ textcolor=”text-light” pdtop=”120″ pdbottom=”120″ fullheight=”false”][columnsection wrapper=”wrapper” animation=”false”][col size=”one-third” animation=”false”]

Atomic Design

[sr-subtitle size=”h6″ alignment=”left”]Because we started to create a new Design system, and the tech team a new framework, both designers and developers adhered to following the Atomic Design methodology. It allows everyone to follow common component-based guidelines and improve the consistency, communication among the teams, process and deliverable quality.
[/sr-subtitle]

[/col][col size=”two-third” last=”last-col” animation=”false”][sr-gallery images=”image~~1395~~https://julienheron.com/wp-content/uploads/2019/09/julien-heron_interactive-designer-Gravity-UX-Strategy_Atomic-design-system-150×150.png” type=”gallery” columns=”1″ animation=”false” tilesize=”300″ crop=”false” spaced=”no” lightbox=”no”][/col][/columnsection][/horizontalsection][horizontalsection background=”color” colorbg=”#c6dde0″ imagebg=”” imageparallax=”true” videomp4=”” videowebm=”” videoogv=”” videowidth=”” videoheight=”” videoposter=”” videoparallax=”true” videooverlay=”” videooverlayopacity=”1″ textcolor=”text-dark” pdtop=”120″ pdbottom=”0″ fullheight=”false”][columnsection wrapper=”wrapper” animation=”false”][col size=”one-full” last=”last-col” animation=”false”]

WEBSITE REDESIGN

[spacer size=”small”][/col][/columnsection][columnsection wrapper=”wrapper-small” animation=”false”][col size=”one-full” last=”last-col” animation=”false”]

We revamped the company website. My role was to define and implement the Design process, scope and prioritize the project, create the new Art Direction and coordinate the work of other staff. The result is a modern and dynamic Web design. This project is accompanied by the introduction of a gradient as a new brand guideline element, in order to create a more memorable and vibrant brand identity.

[/col][/columnsection][spacer size=”small”][wolf wrapper=”wrapper” parallax=”false” captionparallax=”false” randomhorizontaloffset=”true” mouseparallax=”false”][wolfitem size=”wfull” speed=”” image=”https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive_designer_Gravity-supply-chain-Website_Homepage.jpg” imagelink=”false” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”false” imageposition=”wleft” customcaptionwidth=”” customimagewidth=”” captionposition=”overlay”][/wolfitem][wolfitem size=”whalf” speed=”” image=”https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive_designer_Gravity-Supply-Chain_Product_page.jpg” imagelink=”false” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”false” imageposition=”wleft” customcaptionwidth=”” customimagewidth=”” captionposition=”overlay”][/wolfitem][wolfitem size=”whalf” speed=”” image=”https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive_designer_Gravity_Website_Social-media-about-us.jpg” imagelink=”null” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”null” imageposition=”null” customcaptionwidth=”” customimagewidth=”” captionposition=”null”][/wolfitem][/wolf][/horizontalsection][horizontalsection background=”color” colorbg=”#ffffff” imagebg=”” imageparallax=”true” videomp4=”” videowebm=”” videoogv=”” videowidth=”” videoheight=”” videoposter=”” videoparallax=”true” videooverlay=”” videooverlayopacity=”1″ textcolor=”text-dark” pdtop=”120″ pdbottom=”0″ fullheight=”false”][columnsection wrapper=”wrapper” animation=”false”][col size=”one-full” last=”last-col” animation=”false”]

MARKETING COLLATERALS

[spacer size=”small”][/col][/columnsection][columnsection wrapper=”wrapper-small” animation=”false”][col size=”one-full” last=”last-col” animation=”false”]

As a Marketing Team member, I was in charge of designing various online and offline marketing materials such as booths, brochures, pitch deck, landing pages, and EDM.

[/col][/columnsection][spacer size=”small”][spacer size=”mini”][wolf wrapper=”wrapper” parallax=”true” captionparallax=”false” randomhorizontaloffset=”true” mouseparallax=”false”][wolfitem size=”wfull” speed=”” image=”https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive-designer_Gravity_UX-Strategy_booth.jpg” imagelink=”false” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”false” imageposition=”wleft” customcaptionwidth=”” customimagewidth=”” captionposition=”overlay”][/wolfitem][wolfitem size=”whalf” speed=”” image=”https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive-designer_Gravity_UX-Strategy_brochure.jpg” imagelink=”null” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”null” imageposition=”null” customcaptionwidth=”” customimagewidth=”” captionposition=”null”][/wolfitem][wolfitem size=”whalf” speed=”” image=”https://julienheron.com/wp-content/uploads/2019/08/julien-heron_interactive-designer_Gravity_UX-Strategy_Presentation.jpg” imagelink=”null” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”null” imageposition=”null” customcaptionwidth=”” customimagewidth=”” captionposition=”null”][/wolfitem][/wolf][/horizontalsection][wolf wrapper=”wrapper-small” parallax=”false” captionparallax=”false” randomhorizontaloffset=”false” mouseparallax=”true”][wolfitem size=”wfull” speed=”1.4″ image=”https://julienheron.com/wp-content/uploads/2019/08/julien-heron-interactive-designer-gravity-supply-chain_visit_website.jpg” imagelink=”false” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”true” imageposition=”wright” customcaptionwidth=”35%” customimagewidth=”75%” captionposition=”overlay”]

Want to know more about Gravity?

[button color=sr-button1 size=”small-button” url=”https://gravitysupplychain.com/” target=”_blank”]Learn More[/button]

[/wolfitem][/wolf]