Portfolio categories: Web

  • Ray-Ban

    Ray-Ban

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

    #I’m a legend

    [sr-subtitle size=”h4″ alignment=”left”]Ray Ban social media campaign[/sr-subtitle]

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

    Ray Ban wanted to launch on the Chinese social media Douban. The initial brief was to allow the freedom to create a series of catchy visuals which tell their own story around the concept of “I’m a Legend”. The challenge of this project was to create something that is simple to get people inspired to reinterpret the idea of “I’m a Legend”.

    The ultimate goal was to create a creative tool to allow enough freedom to enable people to express themselves and at the same time reflect and carry the Ray-Ban brand values. I proposed different creative concepts.

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

    My role

    [sr-subtitle size=”h6″ alignment=”left”]Craft the creative concept[/sr-subtitle]
    [sr-subtitle size=”h6″ alignment=”left”]Create the digital communication[/sr-subtitle]

    [/col][/columnsection][spacer size=”small”][spacer size=”mini”][horizontalsection background=”video” colorbg=”” imagebg=”https://julienheron.com/wp-content/uploads/2016/06/testsetetest.jpg” imageparallax=”true” videomp4=”https://julienheron.com/img/Ray-ban.mp4″ videowebm=”https://julienheron.com/img/Ray-ban.webm” videoogv=”https://julienheron.com/img/Ray-ban.ogv” videowidth=”1680″ videoheight=”600″ videoposter=”https://julienheron.com/wp-content/uploads/2016/06/Ray-ban.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”]

    USER FLOW

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

    Attention has been paid to how users will interact with this creative tool, as a dedicated app for this campaign could be a solution to make the artwork creation process as smooth as possible. The app allows one to create artwork from pictures in a catchy and original way, and user flow should be entertaining, with minimal options to tweak their own artistic creation.

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

    The output is a canvas of 4 pictures, which has to tell a story, a moment of joy, great pride, success, and so on. This is also an opportunity to have fun and for people’s imaginations to go wild. The final artwork can be uploaded on the official Ray-Ban Douban page.

    [/col][/columnsection][spacer size=”small”][sr-gallery images=”image~~619~~http://localhost/Portfolio2016/wp-content/uploads/2016/09/julien-heron_interactive-designer_Ray-Ban_creative_strategy-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”]

    Ray-Ban is a well-known lifestyle and quality brand, having become extremely popular in American pop culture. One example is how iconic the Wayfarer and Aviator styles are. And this campaign must reflect this strong link between Ray-Ban and graphic Design. The two following design proposals share the same idea, which is to empower people to create storytelling word and image artworks, which should be fun, creative, engaging, and artistic.

    [/col][col size=”one-third” last=”last-col” animation=”false”][sr-gallery images=”image~~950~~http://localhost/Portfolio2016/wp-content/uploads/2016/06/julien-heron_interactive-designer_Ray-Ban_creative_Douban_Logo-150×57.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=”#000000″ 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”]

    NATIVE MOBILE APP

    [sr-subtitle size=”h6″ alignment=”left”]The confirmed direction for the creative was a blank template to be provided to users to download and picture it, with 4 guidelines for each box to fill up. The big challenge in terms of the execution of these proposals was the development of the mobile application. However, this project has been a meaningful conversation between Ray-Ban staff and I, in order to create an engaging campaign between the brand and people.[/sr-subtitle]

    [/col][col size=”two-third” last=”last-col” animation=”false”][sr-gallery images=”image~~978~~http://localhost/Portfolio2016/wp-content/uploads/2016/06/julien-heron_interactive_designer_Ray-Ban_creative_mobile_app-150×150.jpg” type=”gallery” columns=”1″ animation=”false” tilesize=”300″ crop=”false” spaced=”no” lightbox=”no”][/col][/columnsection][/horizontalsection][horizontalsection background=”color” colorbg=”#efefef” 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”]

    WORD AS IMAGE

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

    In the first concept, users can create catchy artworks by the combination of words and images. A word can express an emotion, a place, or a statement, by choosing different pictures to illustrate it. The result is an eye-catching artwork, with matching of meaning and visual appeal. People are able to express themselves in a unique way by creating typographic visuals.

    [/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/2016/09/julien-heron_interactive_designer_Ray-Ban_creative_words_concept_KV.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/2016/09/julien-heron_interactive_designer_Ray-Ban_creative_words_concept_Sunset.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/2016/09/julien-heron_interactive_designer_Ray-Ban_creative_words_concept_louvre.jpg” imagelink=”null” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”null” imageposition=”null” customcaptionwidth=”” customimagewidth=”” captionposition=”null”][/wolfitem][/wolf][/horizontalsection][spacer size=”medium”][columnsection wrapper=”wrapper” animation=”false”][col size=”one-full” last=”last-col” animation=”false”]

    POP ART

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

    As previously noted, Ray-Ban has become part of American Pop Culture. Comics are also part of it and a great example of how you can tell a story through graphics and a few words. The second concept is based on this observation: people will be able to turn their pictures into Pop Art visuals, and create their four tables comics around the same idea of “I’m a Legend”.

    [/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/2016/06/julien-heron_interactive-designer_Ray-Ban_creative_comics_concept_KV.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/2016/09/julien-heron_interactive_designer_Ray-Ban_creative_comics_concept_character.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/2016/09/julien-heron_interactive_designer_Ray-Ban_creative_comics_concept_airplane.jpg” imagelink=”null” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”null” imageposition=”null” customcaptionwidth=”” customimagewidth=”” captionposition=”null”][/wolfitem][/wolf]

  • AL Flooring

    AL Flooring

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

    DIGITAL STRATEGY

    [sr-subtitle size=”h4″ alignment=”left”]Developing the key communication tools[/sr-subtitle]

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

    AL Flooring is a luxury wood flooring company based in Shanghai. When I started to work on the project, the logo had been designed, and some projects had already been completed. My role was to design and develop digital communication tools in order to establish the online brand’s digital identity and positioning.

    The company operates both in Chinese and European markets, so it has been crucial to develop a collaborative approach and an understanding of local markets, especially on the SNS. Our collaboration has led to long-term partnerships through their online communication.

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

    My role

    [sr-subtitle size=”h6″ alignment=”left”]Collaborate on the digital strategy[/sr-subtitle]
    [sr-subtitle size=”h6″ alignment=”left”]Design and develop the website[/sr-subtitle]
    [sr-subtitle size=”h6″ alignment=”left”]Create the newsletter[/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/img/AL_Flooring.mp4″ videowebm=”https://julienheron.com/img/AL_Flooring.webm” videoogv=”https://julienheron.com/img/AL_Flooring.ogv” videowidth=”1680″ videoheight=”600″ videoposter=”https://julienheron.com/wp-content/uploads/2016/04/AL_Flooring.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”]

    MULTILINGUAL WEBSITE

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

    Ever since its launch in 2013, the company has had the ambition to first release its products and services in the APAC market and, as a second step, expand its offering to Europe, so it was crucial to develop a Multilingual website. English and Chinese have been defined as the two languages available, and the website uses a Subdirectories URL structure.

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

    We took a step forward in regard to how to promote the company and products on social media platforms. We decided to focus on Facebook, LinkedIn, Pinterest and WeChat, the first two standing out as important for a B2B company, while furthermore sharing visual content on Pinterest in order to showcase the company portfolio seemed relevant to us.

    [/col][/columnsection][spacer size=”small”][sr-gallery images=”image~~658~~https://julienheron.com/wp-content/uploads/2016/10/julien-heron_interactive_designer_AL-Flooring_Website_Digital_communication_strategy-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”]

    Drawing up a communications strategy with the client has been essential to define the company objectives, the targeted audiences, and also to identify what tools are the most appropriate for communicating messages to the audiences and looking at the project from a digital landscape point of view.

    [/col][col size=”one-third” last=”last-col” animation=”false”][sr-gallery images=”image~~935~~https://julienheron.com/wp-content/uploads/2016/04/julien-heron_interactive_designer_AL-Flooring_Logo-150×141.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=”#352775″ 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”]

    CRAFTMANSHIP AND DESIGN

    [sr-subtitle size=”h6″ alignment=”left”]Shared content on SNS and website design have to express AL Flooring’s passion for wood. AL Flooring offers a blend of craftsmanship and design in partnership with a renowned architectural firm to contribute to the final project quality. I felt that it was important to highlight on the website the projects they work on and also their products.[/sr-subtitle]

    [/col][col size=”two-third” last=”last-col” animation=”false”][sr-slider images=”image~~937~~https://julienheron.com/wp-content/uploads/2016/04/julien-heron_interactive_designer_AL_Flooring_Portfolio-150×150.jpg|||image~~938~~https://julienheron.com/wp-content/uploads/2016/04/julien-heron_interactive_designer_AL_Flooring_Product-150×150.jpg” autoplay=”false” loop=”true” nav=”true” dots=”false”][/col][/columnsection][/horizontalsection][horizontalsection background=”color” colorbg=”#e7e2ff” 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”]

    DIGITAL DESIGN

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

    The website tone and manner is modern, clean and simple. The use of the purple brand main colour and square shaped graphical elements create a consistent and distinctive visual brand. I designed the website layout, developed it on WordPress, and also created various key visuals in order to enhance brand recognition.

    [/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/2016/10/julien-heron_interactive_designer_AL-Flooring_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/2016/10/julien-heron_interactive_designer_AL-Flooring_Website_Maintenance_page.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/2016/10/julien-heron_interactive_designer_AL-Flooring_Website_product_page.jpg” imagelink=”null” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”null” imageposition=”null” customcaptionwidth=”” customimagewidth=”” captionposition=”null”][/wolfitem][/wolf][/horizontalsection][horizontalsection background=”color” colorbg=”#8247c5″ imagebg=”” imageparallax=”true” videomp4=”” videowebm=”” videoogv=”” videowidth=”” videoheight=”” videoposter=”” videoparallax=”true” videooverlay=”” videooverlayopacity=”1″ textcolor=”text-light” pdtop=”100″ pdbottom=”0″ fullheight=”false”][columnsection wrapper=”wrapper” animation=”false”][col size=”one-half” animation=”false”]

    RESPONSIVE NEWSLETTER

    As part of the overall marketing strategy, I designed and developed a responsive EDM. I created and set up a Mailchimp account, with the goal of providing flexibility, and the template has been optimized for this ESP.

    [spacer size=”mini”]

    [button color=sr-button1 size=”small-button” url=”https://julien463188.invisionapp.com/public/share/6DWTUCLCP” target=”_blank”]Check it out[/button]

    [/col][col size=”one-half” last=”last-col” animation=”false”][sr-gallery images=”image~~655~~https://julienheron.com/wp-content/uploads/2016/10/julien-heron_interactive_designer_AL_Flooring_Newsletter_Responsive-150×150.jpg” type=”gallery” columns=”1″ animation=”false” tilesize=”300″ crop=”false” spaced=”no” lightbox=”no”][/col][/columnsection][/horizontalsection][spacer size=”medium”][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/2016/10/julien-heron_interactive-designer_AL-Flooring_Website_visit.jpg” imagelink=”false” url=”” lightbox=”” youtube=”” vimeo=”” captionshow=”true” imageposition=”wright” customcaptionwidth=”35%” customimagewidth=”75%” captionposition=”overlay”]

    Want to take a look at the website?

    [button color=sr-button1 size=”small-button” url=”http://www.al-flooring.com/” target=”_blank”]Learn More[/button]

    [/wolfitem][/wolf]