Please, note that graphics, charts and data on the page have been modified to maintain the confidentiality agreements.

Project Scope

The client requested that PKT provide digital components and a solid web strategy to guide the development of a new web portal that would house all its mini-campaigns and drive SEO to relevant content.

The Garnier in-house IT team would be managing the day-to-day updates of the new portal (.NET platform) via the L’Oreal CMS. request for a web portal with custom CMS

Situation evaluation

The account did not have a digital strategist when the project request came in from Garnier. Shortly after the project kick-off, the team lost the senior UX lead and content strategist who started the discovery process, but never finished it and left just a few random notes.

In the meantime, the traditional creative director sold a personalized website concept to the client. The interactive producers were left with no project plan, which made it difficult to provide the client with an accurate estimate for the completion date.


Heuristic Evaluation

With not much background on the project, information was gathered from the client regarding current consumer behavior and what they envision as their ideal target group.

Next Steps

The UX team staffed up and conducted a heuristic evaluation of the weaknesses and strengths of the client’s competitors in the digital space.

Desktop, mobile and tablet websites, as well as mobile apps, were reviewed. The sites and apps were graded based on best UX practices, including features and quality of content. Additionally, the content areas were compared to gain a better understanding of the brand positioning.

Evaluation Criteria

The evaluation examined the individual digital page-by-page performance by layout, features and utility.

Our team reviewed multiple competitors’ websites &  skin apps  to understand the digital footprint.  

UX designer: Frankie Tufano & freelance UX staff


Comparative Analysis

Apps and functions were reviewed by popularity, ease of use and user reviews (things to improve upon).

The team also combed the social media space to gain a deeper understanding about what users were searching for and the pain points associated with that search.

This chart measures how various brands compare within the same space. Each color presents a brand.

There was not a clear “best in class,” which would
require meeting most of the UX and technology standards in 2013-14. The client (blue) did, however, underperform based on the shorter blue bars.



An in-depth analysis of competitors’ content strategies was completed by reviewing the navigation and content of each website. 

By mapping our analysis against the target group’s interests (consumer behavior), the missed opportunities were well-illustrated and became the foundation of the digital and content strategy.

Mapping the Target Consumer Behavior to current brand positions.  

The various  brand position information comes from the heuristic analysis of the competitors’ website & skin apps.



The content strategy (matrix) was laid out by the content strategist, which helped to define the purpose of the new website within the larger eco-system.

The eco-system shows how consumers  can be targeted in multiple digital channels to lead them down the sales funnel.


Site Entry Points

After taking another look at the site concept with the Creative team, we created new user flows and defined the sales channel that would ultimately drive users to the product. 

Key touchpoint, which the site had to provide, were developed by analyzing social media findings and client research on consumer behavior.

The initial (Phase 1) and long-term (Phase 2+) structure of the sitemap had to be created in order for the interactive producers and the tech team to scope and define the project. The cost of the personalization was still unclear to the development team, so they requested that UX provide additional information.

Graphic depicts on how various SEO long-tail keywords & content buckets helps the consumers to find the new website via organic search.  

Over time this establishes Garnier as digital skin authority. (successful example: Whole Foods & Food Ingredients)


Skin Complexity

Study shows in a simplified graph the complexity to provide personalized skin information for each user.

Originally, the team sold a personalized website concept that included a robust CRM that saved the user skin profile and provided expert advice specific to a user’s skin type. Because skin condition depends on multiple variables, such as type, age, outside temperature, moisture levels and UV index, providing real results for the user would have been nearly impossible in Phase 1 under the current budget and time constraints.

The UX team explained during its presentation that it could probably be simplified, but to define the process would take time and only be possible in Phase 2. After the presentation, the Creative and UX teams sat together and redefined the Phase 1 approach.



To help the developers estimate the complexity of the build, we created a secondary sitemap. It outlined what information would have to be swapped out in Phase 2 if the user was logged into the CRM.

The secondary content map was created by matching the sitemap to on-page functions and content.

It showed which content would be personalized

Introducing Agile to the Team

The last outstanding item was to create a business requirement document and break it down into epics and stories for the tech team.

This allowed them to create the sprints for agile development, as well as the associated timelines and costs.

Since PKT did not have a scrum master, UX created the scrum log. With this completed, the IPs were finally able to provide content recommendations and accurately estimate how long it would take to complete the project.

Backlog for the team.    Development team broke down the backlog into sprints to provide a time & price estimation for the client.

Backlog for the team.  

Development team broke down the backlog into sprints to provide a time & price estimation for the client.