{"id":623,"date":"2021-06-23T05:29:18","date_gmt":"2021-06-23T03:29:18","guid":{"rendered":"http:\/\/nyow.fr\/?post_type=project&#038;p=623"},"modified":"2021-08-15T08:14:18","modified_gmt":"2021-08-15T06:14:18","slug":"loreal-paris","status":"publish","type":"project","link":"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/","title":{"rendered":"L&#8217;Or\u00e9al Paris"},"content":{"rendered":"<div class=\"project-block block-hero-project\">\n    <div class=\"content-wrapper\">\n        <div class=\"wrapper\">\n            <div class=\"flex-wrapper\">\n                <div class=\"txt-wrapper\">\n                                            <h1>L&#8217;Or\u00e9al Paris<\/h1>\n                                                                <ul class=\"tags\">\n                                                            <li>ux design<\/li>\n                                                            <li>interaction design<\/li>\n                                                            <li>service design<\/li>\n                                                            <li>information architecture<\/li>\n                                                    <\/ul>\n                                                                <h2>Goals<\/h2>\n                                                                <div class=\"wysiwyig-content\"><ul>\n<li>Mobile first<\/li>\n<li>Editorial &amp; e-commerce<\/li>\n<li>AAA accessibility standards<\/li>\n<li>Different design constraints for every country<\/li>\n<li>Personalised experience<\/li>\n<\/ul>\n<\/div>\n                                    <\/div>\n                <div class=\"btn-wrapper\">\n                                            <a href=\"https:\/\/www.loreal-paris.co.uk\/\" title=\"Visit website\" target=\"_blank\" class=\"btn is-rounded is-rounded-border is-rounded-white-border\">Visit website<\/a>\n                                    <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<p style=\"font-size:28px\">I was contacted by iCrossing to join the Team as the Lead UX, to create a mobile first new master to be implemented in +70 countries.<br>We worked together from discovery phase to MVP implementation in Agile methodology during 8 months.<\/p>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1583\" height=\"890\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/loreal_oap_insitu.jpeg\" alt=\"\" class=\"wp-image-747\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/loreal_oap_insitu.jpeg 1583w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/loreal_oap_insitu-768x432.jpeg 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/loreal_oap_insitu-1536x864.jpeg 1536w\" sizes=\"(max-width: 1583px) 100vw, 1583px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<figure class=\"wp-block-video\"><video  poster=\"http:\/\/nyow.fr\/wp-content\/uploads\/Capture-de\u0301cran-2021-07-01-a\u0300-14.36.00.png\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/loreal.mp4\"><\/video><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">7 questions to guide users<\/h2>\n\n\n\n<p style=\"line-height:1.6\">Often, users are looking at your website to have some answers, no matter which page they&#8217;re on. Modular approach&#8217;s foundation, allowing us to create type of content, and re-organise it differently according each page&#8217;s needs.<\/p>\n\n\n\n<p style=\"line-height:1.6\">Because some countries were selling online, others just focusing on editorial content, we had to think of something to take local discrepancies in consideration. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1916\" height=\"1262\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/64b8db3e-e92f-45e5-bfa4-52f4e3b9d802_rw_1920.png\" alt=\"\" class=\"wp-image-630\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/64b8db3e-e92f-45e5-bfa4-52f4e3b9d802_rw_1920.png 1916w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/64b8db3e-e92f-45e5-bfa4-52f4e3b9d802_rw_1920-768x506.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/64b8db3e-e92f-45e5-bfa4-52f4e3b9d802_rw_1920-1536x1012.png 1536w\" sizes=\"(max-width: 1916px) 100vw, 1916px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  greyF9 image\">\n            <div class=\"bg-img framed\" style=\"background-image: url(http:\/\/chlovis-old.localhost\/wp-content\/uploads\/1e91cfae-ffe8-4cd9-9ae4-d3dae7e9f4c3_rw_1920.png);\"><\/div>\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                        <div class=\"framed-content right\">\n                    <div class=\"content-wrapper\">\n                        \n\n<p style=\"font-size:20px;line-height:1.6\">Because of the large number of countries to design for, we had to think of something very flexible to match every market&#8217;s need. <br><strong>Atomic Design was a good answer for us.<\/strong><\/p>\n\n                                <\/div>\n                <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">Contextual filters<\/h2>\n\n\n\n<p style=\"line-height:1.6\">I put a lot of efforts into the filters, especially understanding the typologies of categories.&nbsp;<br><br>The audit of the current websites of l&#8217;Or\u00e9al-Paris&nbsp;revealed they were unpredictable. <br>Every category changed from one country to another, and some filters had different meaning but same label (Dry skin as a concern, and as your skin type for example).<\/p>\n\n\n\n<p style=\"line-height:1.6\">I built a new system, based on user searches in google :&nbsp;<\/p>\n\n\n\n<ul><li>looks<\/li><li>benefits<\/li><li>texture and\/or color<\/li><li>ingredients (for allergy or politics engagement)&nbsp;<\/li><\/ul>\n\n\n<div class=\"project-block block-slider\">\n            <div class=\"swiper-container js-swiper-slider\" data-slides-per-view=\"1.25\" data-slides-per-view-sm=\"1.1\">\n            <div class=\"swiper-wrapper\">\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Paper.L_OREAL_-_UX_DESIGN.27.png\" alt=\"\" title=\"loreal_filters_sk6\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Paper.L_OREAL_-_UX_DESIGN.30.png\" alt=\"\" title=\"loreal_filters_sk3\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Paper.L_OREAL_-_UX_DESIGN.38.png\" alt=\"\" title=\"loreal_filters_sk\">\n                    <\/div>\n                            <\/div>\n            <div class=\"js-swiper-prev swiper-nav swiper-nav-prev\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-left.svg\" alt=\"Prev\" title=\"Prev\">\n            <\/div>\n            <div class=\"js-swiper-next swiper-nav swiper-nav-next\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-right.svg\" alt=\"Next\" title=\"Next\">\n            <\/div>\n        <\/div>\n            <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  greyF9\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper large-project\">\n                                    \n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"845\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/bf99af15-64dd-419e-bed9-67268d3df4bd_rw_1920.png\" alt=\"\" class=\"wp-image-661\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/bf99af15-64dd-419e-bed9-67268d3df4bd_rw_1920.png 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/bf99af15-64dd-419e-bed9-67268d3df4bd_rw_1920-768x338.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/bf99af15-64dd-419e-bed9-67268d3df4bd_rw_1920-1536x676.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  grey\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">Diagnosis Tool &#8211; is this product for you?<\/h2>\n\n\n\n<p style=\"line-height:1.6\">This option is a little trick that highlight products in a category page to help users.&nbsp;<br>When there is 40 type of shampoo, how can you choose? I personally freak out. <br>Filters sometimes don&#8217;t make sense when you don&#8217;t have the brand knowledge.&nbsp;<\/p>\n\n\n\n<p style=\"line-height:1.6\">This is for those who doesn&#8217;t know their skin type, their skin color, and basically who have very little knowledge about beauty.&nbsp;The idea here was also to provide a quick recommendation even if we don&#8217;t know the user. You could find on a product page &#8220;This product is perfect if: you have bleached hair&#8221; for a pink hair color for example.<\/p>\n\n\n<div class=\"project-block block-slider\">\n            <div class=\"swiper-container js-swiper-slider\" data-slides-per-view=\"1.25\" data-slides-per-view-sm=\"1.1\">\n            <div class=\"swiper-wrapper\">\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/loreal_matchingcolors.png\" alt=\"\" title=\"loreal_matchingcolors\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/d5a3b740-3064-46b5-90f4-eaa91dfd4927_rw_1920.png\" alt=\"\" title=\"loreal_flow_perso\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Paper.L_OREAL_-_UX_DESIGN.65.png\" alt=\"\" title=\"loreal_perso_sk5\">\n                    <\/div>\n                                                        <div class=\"swiper-slide\">\n                        <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/Paper.L_OREAL_-_UX_DESIGN.66.png\" alt=\"\" title=\"loreal_perso_sk4\">\n                    <\/div>\n                            <\/div>\n            <div class=\"js-swiper-prev swiper-nav swiper-nav-prev\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-left.svg\" alt=\"Prev\" title=\"Prev\">\n            <\/div>\n            <div class=\"js-swiper-next swiper-nav swiper-nav-next\">\n                <img decoding=\"async\" src=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/ico-right.svg\" alt=\"Next\" title=\"Next\">\n            <\/div>\n        <\/div>\n            <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper large-project\">\n                                    \n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"3833\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/85016371-bd33-40cf-90be-bbb05657011d_rw_1920.png\" alt=\"\" class=\"wp-image-643\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/85016371-bd33-40cf-90be-bbb05657011d_rw_1920.png 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/85016371-bd33-40cf-90be-bbb05657011d_rw_1920-768x1533.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/85016371-bd33-40cf-90be-bbb05657011d_rw_1920-769x1536.png 769w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/85016371-bd33-40cf-90be-bbb05657011d_rw_1920-1026x2048.png 1026w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1154\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/24176944-5664-4503-806a-44a55a2a942f_rw_1920.png\" alt=\"\" class=\"wp-image-663\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/24176944-5664-4503-806a-44a55a2a942f_rw_1920.png 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/24176944-5664-4503-806a-44a55a2a942f_rw_1920-768x462.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/24176944-5664-4503-806a-44a55a2a942f_rw_1920-1536x923.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<h2 class=\"wp-block-heading\">User-test driven <\/h2>\n\n\n\n<p style=\"line-height:1.6\">We had to build a master that will go live in 2 or 3 years in some countries, we wanted to think&nbsp;forward and try bold stuff. But we couldn&#8217;t afford to do something that users don&#8217;t understand.&nbsp;<br>So we worked with the platform <strong><a href=\"https:\/\/ferpection.com\/fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ferpection<\/a>, <\/strong>to test our design ideas with a representative panel.&nbsp;<\/p>\n\n\n\n<ul><li>organise usability test sessions <\/li><li>thinking the flow<\/li><li>writing questions test<\/li><li>present a result digest to stakeholders of L&#8217;Or\u00e9al<\/li><\/ul>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  white\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper large-project\">\n                                    \n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1920\" height=\"1970\" src=\"http:\/\/nyow.fr\/wp-content\/uploads\/9bb0fa63-3efb-497b-9da9-ff39857d18f4_rw_1920-1.png\" alt=\"\" class=\"wp-image-627\" srcset=\"http:\/\/chlovis-old.localhost\/wp-content\/uploads\/9bb0fa63-3efb-497b-9da9-ff39857d18f4_rw_1920-1.png 1920w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/9bb0fa63-3efb-497b-9da9-ff39857d18f4_rw_1920-1-768x788.png 768w, http:\/\/chlovis-old.localhost\/wp-content\/uploads\/9bb0fa63-3efb-497b-9da9-ff39857d18f4_rw_1920-1-1497x1536.png 1497w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<div class=\"project-wrapper  rainbow\">\n        <div class=\"content-wrapper\">\n        <div class=\"wrapper \">\n                                    \n\n<p style=\"font-size:28px\">Early user-testing gave us confidence in our decisions, leading to a higher conversion rate, thanks to digital try-on and a mobile first experience.<\/p>\n\n                    <\/div>\n    <\/div>\n<\/div>","protected":false},"template":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>L&#039;Or\u00e9al Paris, case study : New website for +70 countries - Chlovis Lobre<\/title>\n<meta name=\"description\" content=\"We worked on a new master to help L&#039;Or\u00e9al Paris reach their goals regarding editorial content, e-commerce &amp; AAA accessibility standards.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"L&#039;Or\u00e9al Paris, case study : New website for +70 countries - Chlovis Lobre\" \/>\n<meta property=\"og:description\" content=\"We worked on a new master to help L&#039;Or\u00e9al Paris reach their goals regarding editorial content, e-commerce &amp; AAA accessibility standards.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/\" \/>\n<meta property=\"og:site_name\" content=\"Chlovis Lobre\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-15T06:14:18+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/nyow.fr\/wp-content\/uploads\/loreal_oap_insitu.jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/\",\"url\":\"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/\",\"name\":\"L'Or\u00e9al Paris, case study : New website for +70 countries - Chlovis Lobre\",\"isPartOf\":{\"@id\":\"http:\/\/chlovis-old.localhost\/#website\"},\"datePublished\":\"2021-06-23T03:29:18+00:00\",\"dateModified\":\"2021-08-15T06:14:18+00:00\",\"description\":\"We worked on a new master to help L'Or\u00e9al Paris reach their goals regarding editorial content, e-commerce & AAA accessibility standards.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/chlovis-old.localhost\/#website\",\"url\":\"http:\/\/chlovis-old.localhost\/\",\"name\":\"Chlovis Lobre\",\"description\":\"I do interaction design &amp; ux consulting for video games, start-ups and agencies.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/chlovis-old.localhost\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"L'Or\u00e9al Paris, case study : New website for +70 countries - Chlovis Lobre","description":"We worked on a new master to help L'Or\u00e9al Paris reach their goals regarding editorial content, e-commerce & AAA accessibility standards.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"L'Or\u00e9al Paris, case study : New website for +70 countries - Chlovis Lobre","og_description":"We worked on a new master to help L'Or\u00e9al Paris reach their goals regarding editorial content, e-commerce & AAA accessibility standards.","og_url":"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/","og_site_name":"Chlovis Lobre","article_modified_time":"2021-08-15T06:14:18+00:00","og_image":[{"url":"http:\/\/nyow.fr\/wp-content\/uploads\/loreal_oap_insitu.jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/","url":"http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/","name":"L'Or\u00e9al Paris, case study : New website for +70 countries - Chlovis Lobre","isPartOf":{"@id":"http:\/\/chlovis-old.localhost\/#website"},"datePublished":"2021-06-23T03:29:18+00:00","dateModified":"2021-08-15T06:14:18+00:00","description":"We worked on a new master to help L'Or\u00e9al Paris reach their goals regarding editorial content, e-commerce & AAA accessibility standards.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/chlovis-old.localhost\/projects\/loreal-paris\/"]}]},{"@type":"WebSite","@id":"http:\/\/chlovis-old.localhost\/#website","url":"http:\/\/chlovis-old.localhost\/","name":"Chlovis Lobre","description":"I do interaction design &amp; ux consulting for video games, start-ups and agencies.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/chlovis-old.localhost\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"acf":[],"_links":{"self":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/project\/623"}],"collection":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/project"}],"about":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/types\/project"}],"wp:attachment":[{"href":"http:\/\/chlovis-old.localhost\/wp-json\/wp\/v2\/media?parent=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}