Superior customer experiences across devices

The Kao Corporation develops consumer products through its Beauty Care Business, Human Health Care Business, and Fabric and Home Care Business. In addition, the Chemical Business develops chemical products for industrial clients. Through these diverse fields of business, Kao is known for its integrated manufacturing process, handling everything from procurement to manufacturing and distribution in-house, and for its strong research and development teams that produce revolutionary and valuable products.

Every year, Kao launches more than 1,000 new products. The company has also created more than 250 websites worldwide and more than 500,000 digital assets to support these products. One challenge for Kao is providing superior digital experiences for all of these products by allowing consumers to access product information from any device.

Consumers access websites from a variety of devices, including desktop computers, smartphones, tablets, and televisions. In particular, the rate of website access from smartphones is seeing remarkable growth. In 2012, about 60% of consumers accessing Kao websites came from desktop computers. By 2015, 60% of consumers were accessing websites from smartphones, with less than 30% from desktop computers.

Kao predicts that consumer mobile usage will continue to grow. In 2013, Kao started using new tools to support website access from multiple devices. Conversion templates enabled the company to create a desktop website and convert it into a website optimized for smartphone access. Using the conversion method not only took a great deal of time and labor, but relying on HTML coding led to substantial indirect costs that put pressure on production budgets. In addition, the level of technology required to create a page increased every year, leaving production staff worried that maintenance would become more difficult.

“Consumers assume that websites will be accessible with any device,” says Tsuyoshi Tanaka, Manager of the Office of Communication Technology for the Digital Marketing Center at Kao. “It’s an expectation for modern times. Rather than using conversion templates to support smartphones, we found that we needed to take another look at how we were designing websites and establish a mobile-first paradigm.”

In 2014, Kao started looking for a new content management system (CMS) that would provide better multi-device support. One idea involved coding a mobile website based on a model created in HTML, but the question remained over who would manage and check the HTML. Kao decided that using templates to create a mobile-first website would be the most efficient method. The company decided to move from its legacy platform, TeamSite, to the Adobe Experience Manager solution within Adobe Marketing Cloud.

Adobe for mobile-first design and global content management

With more than 250 websites globally, creative content usage is another challenge for Kao. Adobe Experience Manager includes integrated CMS and digital asset management (DAM) functionality. Through Adobe Experience Manager, Kao can deliver mobile-first design and also centrally manage the company’s 500,000 assets for consistent user experiences and branding worldwide.

“We thought about integrating our legacy CMS and DAM, but neither solution cooperated and we had problems creating internal rules to support an integration,” says Tsuyoshi Tanaka. “In addition, we were using an old version of our legacy DAM and could not upgrade it any further in our environment. With Adobe Experience Manager, we can create websites that automatically support a variety of devices. Creating the websites is simple, and updates can be performed in a timely manner. We can also manage more than 500,000 global assets centrally with Experience Manager, so we decided to integrate the CMS and DAM functions.”

Another reason for choosing Adobe Experience Manager is its ability to integrate with other digital marketing solutions. Kao aims to have a complete digital marketing platform by 2020, and the first step on that roadmap is building a solid foundation for content delivery by developing templates and integrating CMS and DAM functionality. In the future, Kao is eyeing the possibility of deploying other Adobe Marketing Cloud solutions such as Adobe Audience Manager to provide personalization and content targeting.

“There is a big benefit to concentrating on a single vendor solution,” says Tanaka. “When working with solutions from different vendors, it not only takes time and budget to build integrations between those solutions, but upgrading one solution can prevent integrations from working. Also, Kao websites are often linked to social media sites such as Facebook and YouTube. When the API for those social media sites changes, we have to take time to rebuild the links to our websites. Rather than using many different products internally and worrying about those integrations, it’s a better use of our time to work on links to Facebook and YouTube.”

Three months before officially deploying Adobe Experience Manager, Kao entered a preparation phase where it put Experience Manager through a series of tests. Previously, the company used a workflow where a creative agency would deliver content, and then Kao would upload the content to the CMS and create the website. With Adobe Experience Manager, creative agencies can access Adobe Experience Manager through a developer site and create or update web pages directly. During this preparation phase, Kao looked into a number of topics before establishing the new workflow, including component layout, essential functions, authoring freedom, and distribution of roles for the creative agencies and implementation agencies.

“There are many internal and external stakeholders involved, so we tried to create a plan that accommodated as many stakeholders as possible,” says Tanaka. “The preparation phase was an essential part of developing this plan. We thought that by strictly defining roles and processes, we could achieve a smoother migration to the production phase.”

The preparation phase also allowed Kao to adjust to updates made to Adobe Experience Manager.

Reducing costs and shortening time by 20%

After the preparation phase was complete, in May 2015 Kao started tackling the website refresh. The first website refreshed under Adobe Experience Manager was the website for the cosmetics brand SOFINA. Initially, Kao had concerns about server settings and generating pages from components and templates, but the refresh was a success. Kao then used Adobe Experience Manager to launch “SOFINA Beauty Power Station,” a website that provides information about skincare lessons and product testing at the official SOFINA store.

Next, Kao refreshed the websites for the Guhl brand in Germany and the Netherlands in April 2016. Both websites were planned and launched concurrently.

“The Europe team meets once a week through teleconferencing or in-person meetings, but with Adobe Experience Manager, teams in Japan and Europe can work together,” says Tanaka. “This became an important test case that helped us uncover challenges and establish a new system for company operations.”

Starting in June 2016, Kao launched 30 additional websites for some of its biggest brands, including the skincare brand SOFINA beauté, the haircare brands Asience and Essential, the laundry softener brand Flair Fragrance, the cleaning brand Quickle, the baby products brand Merries, and the men’s haircare brand Success.

“In particular, 95% of traffic to the Merries website came from smartphones, so we needed to provide multi-device support as quickly as possible,” says Tanaka. “Thanks to Adobe Experience Manager, we migrated the site smoothly and completed the website in time for our first website launch window.”

Furthermore, Kao used the Multi-Site Manager function to launch the Kanebo Cosmetics brand websites in multiple languages for a global audience. This was an important test case for multiple language development in the future. Kao saw many positive results from using Adobe Experience Manager.

Support for multiple devices

Through responsive design, a website created once automatically displays content optimized for multiple devices. Changes to websites can be made more efficiently, and the turnaround time from website creation to distribution is shortened. This workflow reduces costs about 20% compared to the legacy workflows.

“Previously, we would have to work with a developer just to change a single letter on a website,” says Tanaka. “Any other work being done to the same page, such as creative design, would be put on hold for several hours until the changes were complete. With Adobe Experience Manager, we virtually eliminated the hidden costs associated with waiting time, which is a huge benefit.”

Simplified reviews

Previously, the desktop website stored in the CMS was converted into a smartphone website. If any changes were made to the desktop website, Kao had to apply changes manually to the smartphone website, and then both websites needed to be reviewed manually. Kao also had no control over when the websites launched, so when it was time for a website to go live, someone had to manually launch the website and check the results.

With Adobe Experience Manager, websites support responsive design. Working designs can be easily reviewed from a web browser. In additional, launch times for updates can be scheduled so there is no need for someone to wait for the correct update timing. As a result, Adobe Experience Manager dramatically reduces the costs associated with updates, when compared to legacy workflows.

Efficiency through templates

Once templates have been built in Adobe Experience Manager, website creators can easily build websites using templates. Creating international versions of a website is very easy, as the international team can simply copy the Japanese website and translate the pages. The result is much lower costs and turnaround time.

Shorter production workflows

Previously, designers created designs for websites using Adobe Photoshop. Developers then created the site based on the design. This required a great deal of piecing together code to create the correct layout. With Adobe Experience Manager, as long as there’s a wireframe in place, designers can create a website without the help of a developer. The result is a high level of design with shorter production workflows and reduced labor costs.

Looking at the success of the Kao websites that have already migrated to Adobe Experience Manager, many brands are already requesting to be next in line for migration. Even though there are some smartphone sites still running on the old CMS, one magazine ranked Kao #1 in its corporate website ranking for impressive smartphone websites in its October 2016 issue.

In the future, Kao plans to phase out the legacy CMS and migrate the remaining websites to Adobe Experience Manager and stop using the old CMS. At the same time, Kao plans to expand its global reach with websites created for about 20 countries.

“Adobe Experience Manager is an excellent solution. We’re achieving results that exceed our expectations,” says Tanaka. “For instance, the Kanebo global site once relied upon an embedded parent script, but now it’s one of our cleanest websites. We would like to aim for such high quality across all sites in the future.”

Recommended for you

https://main--bacom--adobecom.hlx.page/fragments/customer-success-stories/cards/11afd9ed2dfdaa117de1c022818eafba

See all customer stories

https://main--bacom--adobecom.hlx.page/fragments/customer-success-stories/contact-footer