OF WANGJITONG
How do I fit in the creative teamwork and make innovation happen? I firmly believe in strategic process-driven design!
Define
Discovery
Analysis
Envisoning
Evaluation
Define the project, define the goals and vision, understand the challenge and barriers. Make plans and determine the roles.
Looking for market, bussiness andd trends. Understand the perception, needs of users. Also tudy the needs of experts and stake-holders.
Breakdown and navigate the complexities of disruptive forces, human behaviors, consumer needs and culture through story telling and visualization.
Turn all the abmiguity into truly actionable strategy that shaped by consumer’s needs. Develop the actionable ideas into services or products.
Protype ideas and test how they work in real life scenarios. Check with the users to make sure the concepts meet their needs. Also test reactions from target market.
Intelligent customer service & Robot Platform Design Responsible for: Redeisign of the intelligent customer service IM, partial management background and customer service workbench, etc.
Project Background INTELLIGENT CUSTOMER SERVICE
Products
IM
What I did
Customer service desk
User Users will come to consult business questions at different times and scenarios.
Staff & Chatbot management
Stakeholders Interviews:
User Research:
Understand the business needs of different departments and understand their priorities.
Observe the real working environment of the frontline staff, the way they work, and the problems they encounter in using the product.
Manager Manage customer service staff, including grouping, scheduling, message setup, etc.
customer service Responsible for prompt and timely answers to questions from users.
Robot service Platform Robot management platform provides flexible support to create customized chatrobots.
Product Plan:
Competitive Product Research:
Cooperate with product manager to complete analysis and planning for products.
Investigate other products on the market, do competitive analysis, and understand the pitfalls and shortcomings of existing products.
Visual & components:
Interaction & Visual Design:
Develop visual specifications and improve component design and
Interaction and visual revision optimization for mobile and PC products.
.
Design Challenge for IM INTELLIGENT CUSTOMER SERVICE
version 1.0
Current product problem analysis
Design Goals Continuously improve the functionality of existing products to meet the needs of the business.
Improve product interaction and visual design quality, and convey a good user experience.
Enhance the intelligent service of customer service through further opening and docking with the robot management platform.
Focus on card-based interaction, continue to study the application of card-based interaction in the dialogue flow, and enrich the card type.
Rearch & Analysis INTELLIGENT CUSTOMER SERVICE
Market Research
Experience principle
Painpoints and Needs
Ease-of-use
Experience details
Constraint
Design dialog flow
Emotional
Experience details
Scenarioized
Business scene
Service access
Service expansion access
Proactive
Algorithmic ability
Robot Backstage Logic INTELLIGENT CUSTOMER SERVICE
Basic Chat-interface
Card Interactive Experience INTELLIGENT CUSTOMER SERVICE
A. Select
B. Info link
C. Staff Display
E. Input
Product Information A card carrying certain product information, click to access the product details page. Text list List of multiple frequently asked questions. Click to get a reply.
Link Access An introduction card with a title, image, and text, click to access an h5 link.
Product Information The card for evaluating the service of the customer service staff, through the option to score the customer service.
Questionnaire Information collection card, after the user enters the information, click the next step, and the information is saved.
D. sliding
Product Information Select cards that can be swiped horizontally, each card is an option.
Multiple selection The cards that carry the options are divided into two types: multiple selection and single selection.
Link Access An introduction card with a title, image, and text, click to access an h5 link.
Product Information
Entity Collection
Navigation cards that can slide horizontally, each card is a function that can push cards or enter links.
Richer entity or information collection cards that can carry input boxes or options, similar to forms.
Chatbot UI R design INTELLIGENT CUSTOMER SERVICE
version 2.0
Header
version 3.0
Welcome Message
Quick Navigation Input Bar
System Redesign INTELLIGENT CUSTOMER SERVICE
Former Staff Desk 1.0
Visual quality Basic visual elements and components are not uniform, such as system fonts, colors, spacing, etc. Lack of brand uniformity and brand sense, no previous product brand design Improve the quality of the product and the emotional experience of the product through visual design.
Interactive experience Redesigning the standardized layout of the product to make the product more scalable based on changing product requirements. Use a unified design language, especially the use of components.
Former Management Desk 1.0
Optimize the interaction and functional design of existing features. Fix bugs in interaction design and propose new interaction design solutions for new requirements.
Product goals Some old features left in the historical version, can be removed after the investigation. continue to access new business parties and follow up on new features of the product. The two products of intelligent customer service and robot management platform will be further integrated. Type something Type somethingType somethingType something
Design Solutions INTELLIGENT CUSTOMER SERVICE
Customer Seriver Staff Desk 2.0 1. Optimize menu bar interaction and ui design to increase brand quality. 2 2. "Access User" button component
4
optimization.
3 3. User list optimization: increase offline user classification, optimize new 6
message prompts. 4. Optimize page layout, save space and
5
improve operational efficiency 5. Optimize the copy and style of the tip. 6. Optimize interactions to quickly switch classifications and the card display. 7. More‌
1
Design Solutions INTELLIGENT CUSTOMER SERVICE
Management Desk 2.0
Robot Management Platform INTELLIGENT CUSTOMER SERVICE
Robot Management Platform design
customer service
Insurance business process
chatbot
Banking business process
app/web/wechat
E-commerce business process
Natural language processing
Natural language processing
Robot management platform
Design Solutions INTELLIGENT CUSTOMER SERVICE
Create robot
Intent management
Entity management
Design Solutions: Manage Chat flow INTELLIGENT CUSTOMER SERVICE
step 1: Create a node
step 2: Execution configuration
step 3: Node jump
step 4: Quick experience
step 5: Complete submission
Official website design INTELLIGENT CUSTOMER SERVICE
DATA ANALYSIS AND VISUALIZATION PLATFORM UX DESIGN
Current Product
DATA VISUALIZATION PLATFORM
DATA VISUALIZATION PLATFORM
01
Project
Project and canvas hierarchy Canvas styles for different states Canvas function ……
02
Data Management
Database type finishing
03
Dashboard Editing
Page layout ratio
Page Layout
Use of chart editing controls
Unity of component use
Perfect canvas function
……
Functional panel design ……
UX
DATA VISUALIZATION PLATFORM
DATA VISUALIZATION PLATFORM
Project
Workspace
Header
logo
Sidebar
Data Source
Projects
Upload
Canvas Gallery
Publish Management
Data Manage logo
Casestudy
Publish Details
Data Data Source Field
Tool Bar
Canvas workspace
Tool Bar
Settings panel
UI GUIDELINE
DATA VISUALIZATION PLATFORM
COLOR
FONT
# 6D6DF2
# 383952
Brand main color
Side Bar/Tool Bar
# F8F8FF
Auxiliary color 1: Backgroud
# F5F5F5
Auxiliary color 2: Zebra crossing
# E8E8E8
# CCCCCC
Auxiliary color 3: Dividing line
Auxiliary color 2: Icon
Usecase
Usecase
Font Size
Font Color
Header/Breadcrumbs
这是大型标题
16pt
90% Black
Normal Title
这是页面常规标题
14pt
90% Black
Level 2 Title
这是页面二级标题
12pt
90% Black
Normal Text
这是常规页面正文
12pt
70% Black
Level 2 Text
这是页面二级正文
10pt
70% Black
Auxiliary Text
这是辅助文字
10pt
45% Black
Invalid Text
这是失效文字
12pt
20% Black
Link Text
这是链接文字
12pt
2396F3
Error Text
这是报错文字
12pt
F44236
WORKSPACE
DATA VISUALIZATION PLATFORM
PRODUCT EXPERIENCE
DATA VISUALIZATION PLATFORM
INTERFACE DESIGN
DATA VISUALIZATION PLATFORM
Dashboard & Data visualization Design
Data Screen
Data Analysis System
Dashboaard Design
Insurance for young WeChat Small program design
Design background INSURANCE FOR YOUNG
Design Process Define th
Competitive Product Analysis
Design Strategy
Research & Analysis
Interaction Design
Interface Design
Painpoints - Younger generations have insufficient knowledge of insurance,
How might we design a product helping young people
Even because their parents were unreasonably sold insurance
understand and learn insurance knowledge
misunderstood about insurance.
products by
nprofessional insurance sales, they were deeply
“I don't know much about insurance. My parents bought it for me. I feel like insurance is like a lie.” —Jason
- Young people who have learned about insurance advantages, do not know what products to buy for themselves and their families, in the face of overwhelming insurance products and advertising. “I just had a baby and wanted to start buying insurance products for my family plan. I don't know how to choose.” —S
- The user is already a buyer of insurance,and always needs to improve the after-sales service link, increasing the stickiness of users and insurance companies. “I won’t look at it again after buying insurance, unless there is a claim” —Derek
Analysis INSURANCE FOR YOUNG
Mental Mode
User journey
notice
Identity insurance
Type B
Type A
Type A opportunity
Willing to learn
Type C
Business goal
Buy
Attract users
-Prompt the importance of insurance -Simplify information
engage Meet the demand
-3 minutes small class -Scenario online community
maintain Increase user stickiness
-Low price product recommendation
buy Trust and convenience
After sale Continuous service
-Insurance consultant
-product comparison
-Insurance promotion
-Gamification incentive
-Gamification incentive -Simulated purchase insurance
Type B opportunity
User type
-Provide evaluation articles -Recommended by age
A. Basically no concept
C. Insurance buyer
-Knowledge payment
-Insurance consultant
-Online community
-Insurance Q & A
-Product collection
-Recommended awards
-Gamification incentive
-Life scene theme
-Create a family profile
-Insurance consultant
Type C opportunity
B. Insurance beginner
-product comparison
-Policy management -Create a family profile
-Family member insurance plan -Insurance type education -Real person consultation
-Member points mall -Products Recommended
-Insurance promotion
Product architecture INSURANCE FOR YOUNG
01. 02.
Homepage: Insurance Q&A
Novice classroom
03. Insurance consultanting
The product provides a convenient and fast Younger generations have insufficient knowledge of insurance.The insurance novice class not only has various themes of popular insurance knowledge, but also
insurance knowledge quiz search,users can also ask questions to the platform, which will be answered by agents with insurance knowledge or other users.
Users can view a list of professional insurance consultants and see their specific experiences and backgrounds.More importantly, users can initiate online
recommends relevant knowledge content
questions and inquiries to insurance
according to different user needs.
consultants.
Interaction Design INSURANCE FOR YOUNG
Search for insurance issues
Insurance classroom
Network question
Insurance consultant
Design Solutions INSURANCE FOR YOUNG
Interactive draft
Visual draft
Visual revision
Design Strategy
Guide users to the situation Illustration showing different stages of life
Fun interactive area Life roulette
Engage users User portraits of different ages
Risk visualization Data visualization
Basically complete the information design
Nearly completed interface design.
of the “framework layer�.
Guide button Users tag each age group Further improve visual design and information.
Design Highlights INSURANCE FOR YOUNG
“Wheel of life�
Wheel of life Through research, the insurance purchase users are divided into several age groups, telling the different status and needs of each age group, increasing the sense of identity by selecting labels, and finally guiding users to read more information.
Sales Guidance INSURANCE FOR YOUNG
Interactive draft
Visual draft
Guide users to view Data visualization analysis changes simultaneously while
Guide users from
product listings.
product planning to consulting.
clicking on the label
Robot customer service can turn to manual service. The copy guide guides the user to click and the button is emphasized.
User evaluation consultant services.
Insurance for young WeChat Small program design
XKD BRAND EXPERIENCE UPGRADE 3.0 SERVICE DESIGN CLINET XINGKEDUO SALON ( A+ financing )
BACKGROUND The brand's current business model relies on high frequency trading flows. How might we plan for a better service model, and improve the brand value to ensure that the brand implementation is always correct and effective implementation?
Jul/2016-Aug/2016
DEFINE
BRAND EXPERIENCE DESIGN UPGRADE
XKD Introduction Salon+Internet
How might we help XKD continue to grow and add value?
XKD has 28 salon stores in Beijing and Shanghai. They provide a standardized hair cut service and proposal that they are fast than others which will help people save a lot of time.
We are invited to do the specific guidance and planning for its service model, and improve the brand value to ensure that the brand implementation is always correct and effective implementation.
Our Challenge
Our Approach
Strategy
In such a scenario of mass cultural consumption, How does the fast hair-cut shop meet everyone's taste to help their custorm build their personality, but also remain a low cost and do not lose faith in the brand?
BUSSINESS GOALS
Brand
USER NEEDS
Service
ANALYSIS
BRAND EXPERIENCE DESIGN UPGRADE
Service
User Behavior
Emotional Needs Guidance
5E model
Customers who experience XKD service at the first time, they need the adequate guidance in all touch points.
Entice - Enter - Engage - Exit - Extend
Alignment Firsr timer
Goals-drivener
Consideration
Research
Not only the user who receiving service when cutting hair. The needs of the accompanying person need to be taken into account.
One week of intensive research by conducting store visits both in Shanghai and Beijing. Interviewed with numerous customers, stylists and XKD internal stakeholders.
21 02
Mystery shoppers 14 Shanghai+7 Beijing
Wechat groups
Because of a particular hairstyle, User come to cut their hair who need to communicate with the hair stylist a lot.
21 20
Online questionnaire
vvConsistency As-usualer
Stores feildwork
Familier
Routine Haircut habits, hope to maintain consistent with the original shape, they do not want waste time.
BRAND UPGRADE
BRAND EXPERIENCE DESIGN UPGRADE
Value Proposition BE YOUR BEST! The working class generation are thrown in an overstimulating landscape of fast evolving world of merchandises, styles and trends. This provides a tremendous opportunity for XKD to own this demographic. Unlike other services that focuses on speed and price value, XKD attracts
INNOVATE reasonable
practical young Chinese professionals and retain them by providing an easy way to navigate the complexity of being stylistically relevant. Through capturing the details of their last visit, and providing style guidance tools that enables better alignment and management of expectations, XKD can provide a satisfying haircut every time.
AGILE Steady
UNIQUE Harmonious
SERVICE BLUEPRINT
BRAND EXPERIENCE DESIGN UPGRADE
ENVISIONING
BRAND EXPERIENCE DESIGN UPGRADE
Space Strategy
Brand Enterprise Planning
service station
service station
service station
seat
seat
seat
style bar screen 1 Commodity window
screen 3 screen 2
SPACE DESIGN
BRAND EXPERIENCE DESIGN UPGRADE
Style Sales
Brand Products
INTERACTION DESIGN
BRAND EXPERIENCE DESIGN UPGRADE
Service Guide Tool
Staff’s pad
Service Evaluation
User’s phone
STYLE GUIDE TOOL
BRAND EXPERIENCE DESIGN UPGRADE
Style Guide Screen
360 Degree Display
Real-time Like
First ranking
MAKE IT REAL
BRAND EXPERIENCE DESIGN UPGRADE
XKD BRAND EXPERIENCE DESIGN UPGRADE 3.0 STORE Shanghai Guangqi Fashion Shopping Center No. 455 Yishan Road B2-90
Branding & Graphic
Branding Work
DINSIGHT
illustration
24 solar terms
24 solar terms
“大暑”
“立秋”
“Human Nature”
Mascot design
Mascot design
THANK YOU
REACH OUT!