OBJECTIVE
Having only 7 years of history though, Danone E-commerce has been leading the early-life nutrition FMCG industry in China for years. However, as the business grows larger, design efficiency became a problem. This project contributes to the visual design efficiency and cost-effectiveness of Danone E-Commerce Design Team.
SOLUTION
Danone Digital Assets Management System (DAM) is a digital cloud solution to store, manage and do generative design via smart technologies. It helps deal with the issues including:
-
The repetitiveness of design tasks;
-
Info sharing between siloed departments
OUTCOMES
This ongoing solution made difference in two folds:
-
For external users (e.g., design agencies), it has helped boost communication efficiency with Danone's internal team and efficiency in design deliverables;
-
For internal users, it has promoted cross-functional info-sharing and asset reusability.
Project Summary
Team project, since Nov. 2020
My Specific Role
Leader covering user research & analysis, UX design, prototyping, and storytelling
My Specific Role
Leader
Covering user research & analysis, UX design, prototyping, and storytelling
Team Formation
Ava Xu, supervisor
Arthur Yuan, design supporter
TL;DR - Final Solution
* Note: despite that this project is ongoing, the latest version experienced iterations, so there might be differences between its current presence and my solution.
After this project, Danone E-commerce Team literally had its very first UX-based solution in its traditional sales-driven and result-oriented culture. Despite that such a solution sounds not so fabulous in the other companies, for Danone E-commerce per se, it is phenomenal. It has helped tackled several issues that has been overlooked for so long:
Management - Assets
All digital assets are collected, categorized, and tagged with attributes in Danone Digital Asset System. Users upload, download, comment, and request files in this integrated system to avoid repetitive and incompliant design assets in a siloed environment.
Management - Users
Designers from agencies act as both the users and asset contributors of DAMS. Users' footprints are all stamped in this system so that they can review their activities, and contributions, and simultaneously, administrators can see their performance, which help do the KPI assessment on the designers.
Info Sharing & Compliance
Like a blockchain, design files in Danone require a chain of records to mark every step made by cross-functional stakeholders. This function helps:
user to track the file compliance status and find the right person in charge for any compliance issues;
users to preliminary self-check to get around major compliance issues before the assets are sent for official sensorship.
AI Technologies
DAMS could help finish resizing on its own, and help label the tags for each asset automatically. AI also lies in the search method - rather than matching exact searching keywords with merely file names or attributes, DAMS provides vague search, in0-file content-based search, and color palette search.
Due to the limited data samples, this function is still in process and will be launched soon.
See how design is leading change
in a traditional sales-driven team.
BACKGROUND
A Huge Business
During the three recent years, over forty product stock keeping units (“SKU)” have made up the e-commerce business of Danone Nutricia in more than ten online channels.
Hence, the e-commerce business design has never been an easy task - it’s a combination of new creations, innumerous, repetitive adaptations, and urgent cases.
Cross-Functional Collaborations
The Design Team is not merely in charge of visual deliverables. Designer Team is more of a role as a coordinator. Typically, the design Team receive design requests from the other team and manage design agencies to finish the deliverables accordingly.
Some design agencies have a solid, long-term business partnership with Danone. That is, Danone's image is in their hands. It is more practical to manage them well rather than replace them with others.
Inside Danone, for historical reasons, the collaborations between departments seem sort of siloed. Each team covers design tasks based on their own understanding respectively, which resulted in bunches of asynchronous design deliverables and very low-efficient cross-functional communications, regardless of a unified design guide from the MKT team.
Digital Assets
E-commerce visual deliverables are highly on-brand and structured under certain norms and rules of different channels. For example, a landing page is typically comprised of repetitive, fixed elements like banner, headings, and shelves, piling up like blocks.
1. On-brand decorations
2. Headings
3. Coupons
4. Icons
5. Gifts
6. SKU
...
1
2
3
4
5
6
As of 2021, design, a seemingly irrelevant element to the business, and a longly-overlooked element in such a traditional sales-driven culture, has become increasingly indispensable.
Problems
Problems come out in situations where e-commerce campaigns are urgent.
Design agencies cannot afford the heavy workloads;
Repetitive and trivial tasks are frustrating and time-consuming;
Deliverables fall short of creation and in low-quality, and thus
Both people and elements are hard to manage.
"70% of my routine jobs are repetitive ones and I have little time to think about creation."
"Endless modifications are frustrating."
AGENCIES
"As to some little adaptations or modifications, we don't want to bother design team."
"In urgent campaigns, it's difficult to guarantee the deliverables qualitatively and quantitatively."
STAKEHOLDERS
So...How might we truly improve the user experience
and make our design management easier?
RESEARCH
1.User Interview
Given that Party B is usually subject to Party A for a good relationship, we made face-to-face interviews instead of focus group interviews to each Party B designer, hoping to encourage them to speak out their real voices. And it DID work!
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
2.Observation
We assigned three tasks in design execution for the designers to observe their habits.
-
To find a layer out of complex structures of a. PSD file;
-
To change the color of a group of layers without destroying the original ones; and
-
To copy the file into a new one.
.jpg)
.jpg)
Seemingly effortless as they were, these tasks have disclosed lots of problems in their execution ( e.g. some modifications to elements that can not be undone ).
3.Questionnaire
The questionnaire was given out to 38 designers from 3 agencies who have directly participated in the e-commerce design of Danone.
4. Stakeholder Interview
Stakeholders include sales, marketing, and shopper marketing team who have collabs with design in the previous stage. An IT specialist was also involved in sharing his insights on some development issues.
ANALYSIS
A Problem Overlooked For So Long...
Regardless of some unreasonable requests from Party A, Party B tended to suppress complaints, hoping to be “professional”, or “tolerant” in Party A’s eyes. Then such “bullying” repeats.
How was a team collab messed up by misunderstanding?
A typical user journey of internal (Danone) users and external Users (design agencies)
Both parties suffered way more during the preparation and early stage of creation, while internal users felt irritated to some extent during the last phase (i.e., filing sharing) as well.
Goals of the Solution
I organized a workshop to figure out:
Required - The source of cross-functional misconception;
Required - The core functions that meet the basic needs in boosting efficiency; and
Optional - Advanced functions that are nice to have featuring smart technology.
.jpg)
Design Touchpoints In A Typical Work Flow
Most issues, unexpectedly, happened prior to the design execution, and all issues could be summarized into 7 parts with 19 subsections:
-
Online Docs;
-
Better Guides;
-
Better Elements;
-
Smart Research;
-
Smart Labeling;
-
Better Download;
-
Better Filing
.jpg)
Design Touchpoints For Stakeholders And Users
Using stakeholders map, we managed to find some core requirements of different parties:
-
Agencies (User 1)-better communications & usability;
-
Danone Design (User 2)-
Better management of agencies and elements -
Stakeholders - Cost & Timing
It‘s impractical to take all 19 functions into account for cost issues and for issues of the feasibility of some technologies.
This map showed an overview of key functions that different roles care about.
The next step was to prioritize some of them.
+
Persona
KANO Analysis
A second-round questionnaire was given out to 37 designers to indicate their satisfaction with the above-mentioned 19 functions with the KANO Model (i.e., 38 questions for our target users).
Findings
Double Confirmation
From KANO results, we could double confirm that concentration on functions that optimize before-design workflow is a MUST.
New Findings 1
Our users seemed not to embrace new tech so well...
Concentration on basic needs would be practical.
New Findings 2
Something tricky - This function might have reverse effects and need to be researched further.
Online Docs
Better Guideline
Smart
Tech
Mobile
App
Final Conclusions After BETTER-WORSE ANALYSIS
From the KANO Analysis, we planned the solution in two phases, with fundamental functions in phase 1, and the other currently technical-challenging functions in phase 2.
Competitive Analysis
We searched featured brands in 4 fields. Though there were no competitors who can meet all 4 functions, 4 brands showed strong competitiveness for reference.
Not follow the others to develop online design functions that are dispensable for Danone's e-commerce business;
Concentrate on the must-have;
Have further research on the realization of some currently technical-challenging functions.
From the competitive analysis, we have made it a point that Danone Design should:
DESIGN
Drawing on the analysis results, Design Team decided to focus on merely the most practical functions for designers in their daily use, including 1) asset management; 2) user management, and 3) filing, sharing, and compliance.
1. Asset & User Management -
1.1 Admin Dashboard
Administrators can access a daily updated overview of the assets status and user activities at the back stage. This dashboard provides a stage tovisualize the performance of asset contributors and a whole picture of the e-commcer deisgn timing. To illustrate, they can see:
-
the dynamics of assets under each brand;
-
a timeline of contributors' activities and assets' creations, use and maintenance;
-
Top-rated contributors and assets on a regular basis as a benchmark for KPI assessment.
1. Asset Management -
1.2 User Dashboard
On the dashboard, users can have:
-
quick access to the most frequently used resources under different brands;
-
an overview of the assets status in terms of their popularity;
-
an overview of user's own workspace status as a temporary library for them to collect files;
-
a e-commerce campaign calendar as a reminder to have a deadline mindset
1. Asset Management -
1.3 Asset Landing Page
On the landing page, users have various methods to reach the very assets they want by:
-
direct search;
-
filters - AI smart color selection. Since each asset in staged with main palette as its attributes, users can set a color palette as a filter and find the matched asset;
-
filters - other filters includes attributes like date of creation, size, brand, compliance status, department in charge, campaign calendar, channel, format, etc.
1. Asset Management -
1.4 Asset Detail Page
On the detail page, users will want to check key details about an asset:
-
General Tab - if users do not want to get into more granular info, they can have an overview of the key info in this tab;
-
Detail Tab - shows more granular parameters and labels of this asset from the perspective of graphic and visual design;
-
Comments Tab - Users will have space to comment on an asset in terms of requests for authorization of using, suggestions on retouching/improving it, or questions from the cross-functional team on its usage. This tab shows all comments about that;
-
Compliance Tab - This tab shows a history of a compliance checks of an asset along a cross-functional workflow.
2. User Management -
2.1 Temp Workspace
In cases where users download a large number of assets (some even repetitive for different design cases), a temporary folder to do a pre-categorization would be helpful. Thus in this temporary workspace:
-
users can create as many folders as they want;
-
each folder shows a preview of key visuals to help users better understand the content inside;
-
filters for users to find the folders/assets through the file hierarchy
2. User Management -
2.2 User Activities Page
It is not uncommon that users hardly remember where they put certain asset, and this is where the Activities Page come to use:
-
it shows histories of a user's actions including asset creation & submission, comments, filing, etc.;
-
each history record links the user to the related page in this system.
3. Filing & Sharing & Compliance
3.1 Sharing
In Danone, sharing a file is not that smooth between departments, let alone sharing files with external agencies. In this sense, apart from the most attributes that a sharing function will include, the DAMS sharing also marks the user who shares it, to help administrators track the traffic of the files.
3. Filing & Sharing & Compliance
3.2 Compliance
In Danone, files are required to be censored and approved by a panel of internal specialists from various departments. Previously, such a process was time-consuming and complicated due to specialists' inconsistent understanding of the guidelines.
Thus, DAMS offers to put everything together, showing:
-
the censorship status in a linear timeline;
-
access the comments made by every specialist;
-
After censorship, a file would be stamped with the last person in charge of it, so that users can find the updated person in charge with ease.
Highlights of High-Fidelity Prototype
Note: this part was co-designed by me and design agencies, and several iterations were made after I left Danone. So there might be some level of inconsistency between the prototype and the final product.
0:00:00 - 0:00:27 Uploading and labeling files manually;
0:00:31 - 0:00:55 Asset selection;
0:00:59 - 0:01:19 File sharing;
0:01:29 - 0:01:46 Workspace and access setting
Highlights of the Currently Ongoing Product
Note: For privacy issues, some of the asset content is blurred.
Management - User Dashboard
Asset Management - Filtering by tags
Asset Management - Filtering by AI color palette
Asset & User Management - Admin Dashboard
User Management - User Activities
Before & After Scenarios
DISCUSSION
Is Smart Technology Necessary?
AI in Danone DAMS refers to the smart creation of images with various sizes and smart labeling files without human interference. Despite the prototypes being made, it has not been finally adopted in the current DAMS for financial issues and a limited amount of sample data. That said, in the future, such functions have to be included due to an ever-increasing amount of repetitive work.
Content-based Search
The current search method is to match the searching keywords with the file names and other attributes/tags with a certain level of vagueness search. With the ever-growing number of text-based content (e.g., testimonials, word of mouth from customers, memorandum of design workshops, text-based design guides, etc.), a content-based search method would be more effective to help users find the exact files they want.
REFLECTIONS
It's my first time to lead a UX design project, let alone in a traditional sales-driven business. Leading a bottom-up design innovation is not easy, but it is worth it. What I have learned from this project is:
CARING
Be more caring and careful in the user research especially in a business context, because every overlook might be costly. Thus, designers should learn to win users' trust more efficiently to encourage them to speak their true voices.
REFLECTIONS
It's my first time leading a product design project, let alone in a traditional sales-driven business where people hardly had design thinkning. Leading a bottom-up design innovation is not easy, but it is worth it. The key take-aways are:
Iteration is always key.
Despite that Danone features a sales-driven and result-oriented culture, for an innovative project that would require acknowledgment and exposure, an agile development style would be better than a long-term detail-oriented strategy. The reason is obvious - for people who don't even have a sense of design thinking, the more efficient way is to deliver at least a demo to let them get a general picture. This rings especially true in a cross-functional working environment since every department is more than happy (sometimes overly happy) to give their feedback and comments. In such a case, a dynamic prototype proved to be more efficient than a pure paper-based proposal.
Also, as a designer, it never hurts to have a strong mind of priority. It is not uncommon that designers seem more inclined to include some eye-opening yet unpractical functions to showcase their design expertise. To help real businesses, designers have to make sacrifice and be down to earth.
Money matters.
The very first hurdle in this project was neither the complication of communication nor the scale of this project - it was the financial model and assessment. To make the calculations of ROI as accurate as possible, I research bunches of cost calculation (manual hourly rate, piece-based charge, retainer service, etc.), and finally convinced the C-suite with three different methods of several rounds of model modification. In other words, it WAS a real negotiation with BATNA and tactics to answer the question "How I could make every piece of design count". Challenging though, the power of negotiation and persuasion should be a must for a designer who wants to take the interdisciplinary role.
Always be ready to get in others' shoes.
Cross-functional communications were definitely another hurdle in this project. I honed upward, sideward, and downward communication skills, which can be concluded as:
-
For C-suites (upward) who are laypersons to design expertise, make sure the storytelling wording is concise, simple, easy to summarize, and approachable thru analogy. It is not a time to show how fabulous we are as designers with high-fashion concepts or jargon, but rather a very intense stage to win their trust and interest in a short time.
-
For cross-functional teams (sideward) who know the business well but have limited knowledge about design, give them enough respect and answer the question thoroughly, "how can I better help you with my project." The more respect, the more expertise, and insights they are willing to share in their realm, which would be helpful to erase the blind points for designers.
-
For design agencies (traditionally downward, but I consider it sideward), let them be the customers. Though it sounds a bit weird to take vendors as customers and make a solution to help them help us, my workshops and interviews for them proved very effective - it provided a platform for every single designer, rather than the vendor company as a whole, to speak their mind in terms of first-hand design experiences. Not only that, it prompted a better relationship between party A and party B, which traditionally paired as dominant and submissive parts to one another.
Thanks for reaching here!