Building and scaling an integrated digital solution across multiple digital touchpoints
Information Architecture • Platform & Features Definition • Design SystemShiseido Professional, Japan
Shiseido Professional is a leading haircare brand in Japan. Not only do they have a wide range of haircare products, they also provide professional training for hairstylists and inspire beauty creators through a spectrum of opinion articles, annual events and competitions.
The Ask
Being the expert in hair and beauty, Shiseido was pushing out large volumes of content across its digital touchpoints. However, these touchpoints were siloed and faced many legacy issues which led to increasing operational costs and inefficiencies.
The clients wanted to modernise and improve user experience of their digital touchpoints. They also needed more efficient ways to update content and manage data across their entire digital ecosystem to reduce time, cost, and operational effort.
Project Approach
We audited Shiseido’s existing digital touchpoints for content relevancy and usability issues and compared content, tools, and features with those of competitors. We spoke with customers, stylists, and salon owners to understand their needs and challenges concerning hairstyling and haircare. We also examined the customer journey of a salon visit to identify moments where the experience could be improved with the support of new digital tools.
On the technical front, we reviewed existing technical assets and platforms and spoke with various stakeholders to understand their challenges in setup and maintenance.
The Solution
With all that we learnt, we derived at an integrated digital solution for Shiseido that would enable easy consolidation and management of content, data, and services across its entire digital ecosystem.
Building on a centralised CMS and common platform for all its touchpoints, Shiseido would be able to roll out content, features, and tools modularly and integrate them into any digital experience.
We’ll start by designing and building a core set of features and functionalities for 4 primary touchpoints (brand website, e-learning portal, salon consultation tool, hair diagnosis tool) that would enable Shiseido to start small and iteratively build up to a better, more sophisticated digital ecosystem in future.
My Role
I was brought onto the project during the design and build phase. Working in 2-week sprints, I was the sole UX designer collaborating with a team of UI designers, writers, engineers, and project managers from 5 locations across R/GA’s network. My key tasks include,
Content and features design and development for 4 primary touchpoints
– brand website, e-learning portal, salon consultation tool, hair diagnosis toolApplication of atomic design methodology to create a unified design system to be applied across multiple digital touchpoints
Creation of wireframes and user flows for page templates and new digital tools
Documentation of components, interaction patterns and page templates
Development of functional specs with tech team
Worked with developers to build features
Design Outcomes
After 9 months of close collaboration, we re-designed and built 4 primary touchpoints with new content structures and features. We created a new unified design system to scale across any digital experience while maintaining a consistent brand image. We created a connected experience across digital and physical spaces.
A site that inspires stylists and consumers to discover products and solutions for their beauty and hair aspirations.
BRAND WEBSITE & HAIR DIAGNOSTIC TOOL
> Beauty inspiration
Create an emotional connection with our audience through visually rich storytelling of latest trends and beauty innovations.
> Discovery of products and services
Provide more efficient and convenient pathways to discover products and services through Hair Diagnosis tool, search features and related-content suggestions.
> Hair and beauty solutions
Empower and guide consumers to achieve their desired look through “how-to” videos, styling tutorials, and suggestions of products.
A programme where stylists elevate their skills through training modules of different levels and focus areas. A hub for beauty creators across Asia to connect and share knowledge and skills.
GLOBAL ONLINE E-LEARNING PORTAL
> Bite-size content to aid learning on-the-go
Complex contents are simplified and broken down into bite-size, easy to consume formats like videos to enable stylists to learn at their own pace anytime anywhere.
> Positive reinforcement to motivate learning
Positive reinforcements like badges are incorporated at various milestones to nudge and encourage stylists along their learning journeys.
> Guided learning journey
Courses are filtered and recommended based on a stylist’s experience so that learning feels right and not overwhelming.
An interactive guide that facilities in-salon conversations, captures customer needs, preferences, and provides an aftercare plan for customers.
SALON CONSULTATION TOOL & CUSTOMER PORTAL
> More appropriate recommendations with customer portal
A customer portal captures the hair profile, routines, needs and preferences of each customer, enabling any stylist to make appropriate recommendations no matter which salon the customer visits. A record of each salon visit is also documented for future reference.
> Personalised take-home aftercare plans
A personalised aftercare guide for customers to help them care for and maintain their hairstyles after each salon visit.
> Visualisation of new hairstyles or hair colour
Leveraging on AR technology, customers would be able to better visualise and decide on a new hairstyle or colour.
(Click to enlarge)
A flexible design system to facilitate any digital experience
DESIGN SYSTEM
To maintain consistency and support build efficiency, a modular design system consisting of reusable components, modules and content templates was developed to be used across all Shiseido digital touchpoints. Every component can be rearranged and combined with others to create a variety of visual narrative for any digital experience.
