EXPERIENCE DESIGN PORTFOLIO 2014

EXPERIENCE DESIGN PORTFOLIO 2011 ﹣ 2014

李 昕

PURPLE

作 用 品 戶 集 體 驗 設 計

李昕 PURPLE 用戶體驗設計師，騰訊 EXPERIENCE DESIGNER, TENCENT

BORN IN 1988

EXPERIENCE USER EXPERIENCE DESIGNER

QQ

TENCENT

NOV 2013

PRESENT

USER EXPERIENCE DESIGNER

QQ情侶

TENCENT

MAY 2012

NOV 2013

JUNIOR USER EXPERIENCE DESIGNER

騰訊企業門戶

TENCENT

MAR 2012

JUL 2012

JUNIOR USER EXPERIENCE DESIGNER

騰訊微雲

TENCENT

DEC 2011

MAR 2012

INTERACTION DESIGNER INTERN

長虹

CHANGHONG

MAY 2011

JUL 2011

EDUCATION MASTER OF DESIGN, INTERACTION DESIGN

THE HONG KONG POLYTECHNIC UNIVERSITY SCHOOL OF DESIGN

SEP 2010

NOV 2011

BACHELOR OF ENGINEERING, INDUSTRIAL DESIGN

DONGHUA UNIVERSITY COLLEGE OF MECHANICAL ENGINEERING

SEP 2006

JUN 2010

SKILLS

Scenario

Wireframe

Persona

User interface

Task Flow

Influence & Leadership

Storyboard

Problem Solving

Brainstorming

Design Strategy

Passionate

Research & Analysis

Methodology

Curious Open-minded

Sketch

Information Architecture

Concept Persuasion

Graphic Design

Prototype & User Testing

Creative Thinking

Enthusiasm

Industrial Design

Behavior Mapping

Communication & Organization

Responsible

Enviornment Design

Bussiness Modeling

Juniors Mentoring

Dedicated 

I translate user experience strategies into tangible on-screen experiences from mobile app to desktop software to web and beyond.

03

PROJECT

INFLUENCE

PASSION

QQ電話

Scenario workshop

iPhonegraphy meets Culture

QQ情侶

Service design V.S. UX design

Photography

腦暴工具

QQ design guildlines

Lifestyle

騰訊企業門戶

Mentoring

騰訊微雲

Awards

04

PROJECT

01

QQ雝芹 SEP 2014 - PRESENT QQ, The most popular instant messenger in China, has achieved more than 200 million PCU (peak concurrent users).

Voice and video chat is one of the most primary fundamental functions of QQ. While web conference market is still increased dramatically year by year, if QQ wants to share a piece of the pie continually, then the related experiences must be introduced and improved.

http://im.qq.com/

BACKGROUND Supported group video chat from techinic aspect allows multiple videos to be displayed simultaneously on one screen. The experience of switching from one-to-one voice chat, to group voice chat, to group video chat need to be considered for the sake of reducing users’ frustrations.

The increased amount of functions has caused the initial screen filled with icons. A new frame of all the different functions needs to be introduced. To ensure the following-up functions never affect its basic experience.

Re-organized all elements into right categories that users can understand and stay easily accessible.

QQ video and voice chat is part of QQ. It needs to carry forward the key UI languages of QQ, and keeps its own personality at the same time.

RESEARCH & ANALYSIS White-collar user is the only group that being more active on PC than on mobile devices.

69 群

64

25

C2C

31

28

33

17

中小學生

大學生

白領

the average amount of messages sent by MOBILE QQ USERS per day

中小學生

13

大學生

白領

the average amount of messages sent by PC QQ USERS per day

Source: QQ backstage data (Jue, 2014). User groups identified by ISUX.

08

Among the large amount of users who uses PC QQ at work, 40% of them use Wechat as their primary IM tool when they get off work. So keeping the advantage of PC QQ among them, and attracting them use Mobile QQ is an issue worth working on. 上班時最主要用

807

上班時最主要用

100

下班后最主要用QQ电脑版 下班后最主要用QQ手机版

上班時最主要用

79

下班后最主要用微信 其他

Source: Questionnaire from SNG Business Plan.

Under the office environment of PC QQ, if QQ wants to take a spot in this increasing web conference market in China, the mobile app needs to be improved to provide the similar experiences also. 一對一

情感溝通場景

我們擅長的

（陌生人交友）

商務場景 教育場景

一

Source: Ipsos

09

有機會的 熟人/

CONCEPT & SKETCHES Before meet the business web conference, how to optimize group video chat’s basic experience is the first step. We need to have plans and output sketches and concepts quickly, focus on the outcome so that push forward this project.

10

WIREFRAME & PROTOTYPE Came up with the most effective way to showcase interfaces under complicated situation. Also, figured out available tools to create clickable prototype. In this way, clients could actually feel and experience the changes, differences and improvements.

use horizontal and vertical coordinate axis to express the differences and connections of each interface.

PROTOTYPE MADE WITH POP

11

use SCENARIOS to walk through wireframes.

FINAL UI During visual design face, keeping communications tight and smooth with visual designers. Working together on layers and details of all the animations prepared for programmers.

functions

multiple videos main video

background image

one-to-one voice

one-to-one video

group voice

group video

OTHER QQ

PROJECTS

02

QQćƒ…äžś MAY 2012 - NOV 2013 As the most proffesional and popular app for couples in China, over 100 million users here are sharing their cherish moments on this platform.

2013 market research

BACKGROUND To build a creative app to solve vertical connections internally, need to find the best way to organize all sorts of different needs and requirements.

Product manager’s team is good at listing functional key points, but I need to be able to figure out which truly represents what our users want among all the functions.

We have a large team with many team members. So it’s very important for me to work out a way in concept stage with all team members so everyone could focus on the same thing and fight for it.

When in the situation under time pressure, and I am the only interaction designer, I know the upcoming difficulties that I may confront and it would be a great opportunity and challenge for me.

BRAINSTORMING Brainstormed with product managers and user reseracher.

Organized exsiting requirements and notices new opportunities from it.

16

INTERVIEW Interviewed couples at their homes to actually feel and understand their relationship behavior details.

同城

同城

同城

男 18 高三 女 17 高三

男 19 高三 女 16 高一

男 23 大三 女 21 大二

相戀 9個月

相戀 4個月

相戀 2年

同居

異地

異地

男 26 建築師 女 26 博士在讀

男 25 切紙師縛 女 22 工廠工人

相戀 2年

男 26 基金分析師 女 25 商業分析員

相戀 1年

異地

相戀 3個月

異地

同居

男 28 程序員 女 28 博士在讀

男 40 自由職業者 女 37 設計師

男 26 網店店主 女 25 網店店主

相戀 3年

相戀 18年

相戀 9年

ANALYSIS Communication and understanding are the promary keys in a relationship behavior, and exists for each single couple.

日常交流 自我展示

共同生活

談情說愛

溝通了解

尋求幫助

明確關係

逃避對方

情感加分

增添情趣

獨立空間

善意欺騙

默默付出 記錄整理 默默關注

17

分享炫耀

個人秘密

給對方空間

INFORMATION ARCHITECTURE Organized and classified the functions into information architecture and output different sketches and proposals.

SKETCHES Output sketches based on different architecture, and ensured each proposal has its own specialty and listed pros and cons as well.

18

WIREFRAME & FINAL UI

19

20

OTHERS

Games, camera &

& other functions

FEEDBACK Ranked top in social networking category in APP STORE and received great reviews.

The amount of users climbs steadily.

23

24

03

腦暴工具 AUG 2014 - PRESENT A self-developed app by our department to use internally in order to coordinate between designers and product managers in each project, and also provide a platform to organize scenarios and click for better ideas.

BACKGROUND Helps all our developers to organize user’s behavior so that come up with insights for actual users. More so, it becomes a great tool for cooperating with other team members for collecting solutions and suggestions so that push our project moving to the next phase quicker.

项

总结 用户需求 行为地图

用户痛点

产品/设计/用研共同参与

脑暴 设计概念

发散 设计方案

判断 优先级

交互设计

26

04

騰訊企業門戶 MAR 2012 - JUL 2012 It’s an Internal portal that 20,000 Tencent employees logins everyday. This platform represents Tencent’s culture, news, communication and day-to-day office tools.

BACKGROUND Change of focus: From only a simple link library, to a representative of our whole company’s culture.

新聞資訊平台 傳播公司聲音：公司新聞及 業務信息傳播的官方載體； 員工了解公司戰略發展與 管理政策的主渠道

文檔資料平台 聚合文檔資料：對公司的 文檔資料進行有效聚合。 所有公開可共享的聚合 到一起。

溝通交流平台

個人門戶網站

促進內部溝通：員工抒發心 聲參與公司管理的平台；各 級管理者與職能部門了解 員工狀態，做好服務工作的 交流陣地。

個人門戶：對個人的公司 內信息管理進行有效聚 合，節約使用成本，加強深 度使用。

BRAINSTORMING Assumed we are employees from all kinds of position and imagined all the scenarios that may occur. We came up with core scenarios and translated them into website contents, and then output them into information architecture from users’ behavior aspect.

28

INFORMATION ARCHITECTURE

WIREFRAME & UI

Kept Working deep on each module. Expres

29

ssed the most typical information that would become the stand-alone differences coparing to other modules.

30

USER TESTING

FINAL UI

As it might be rather risky to implement a thorough innovative design proposal, I created a simple demo and cooperated with visual designers and users researchers to test with colleagues from different positions before the development in order to collect opinions and avoid risks.

設計團隊 想推進的方案

保守方案 （要求視覺設 計師也輸出這個 方案）

After an optimization on the basis of the research’s result, the genuine personalized Quick Links, which is the most popular function on this website, had come into being.

31

32

FEEDBACK Won the approval of CEO Pony Ma, VP Xidan and GM Jonathan Wong. Highly praised by colleagues.

33

34

05

騰訊微雲 DEC 2011 - MAR 2012 Tencent Weiyun is a cloud storage service, which provides users with the convenience of synchronizing files between mobile and desktop, transmitting photos and other data.

BACKGROUND Product Manager Team proposed to develop a personal cloud storage service product, however, no one knows what the products will be like. Starting from scratch will be a great challenge for interaction designers, as they are the first session of designing process.

RESEARCH & ANALYSIS Explored how users behave when using cloud storage service with user researchers to seek design opportunities.

想要 想要

快捷高效地

存儲

“忘記是那個檔案了，

査找

不下載看下就不知道找對了沒。 ”

處理文檔

拷貝

轉移

穩定可靠的

“要一個一個拷貝， 太轉折了。 ”

存儲服務

使用

云存儲服務

文檔處理

打印

的行為

發送

現有的

共享有限制 不靈活

共享

“不下載就不能打印和發送， 太曲折。 ”

......

36

CONCEPT mine

DESIGN friend’s

Presented sketches of several concepts in a storytelling way involving exports from different domains related to this project to push the process forward. Ensured every team member working towards the same goal and make decisions together.

37

38

INFLUENCE

[SCENARIO W

lectured in severa

WORKSHOP]

al design centers

[Service design

shared in ISUX

V.S. UX design]

X department

QQ DESIGN GUIDLINES CAPTION DISCRIPTION

SCOPE

CONTENT

EXAMPLE

LABEL

EXAMPLE

MENTORING SONG 陳松 在QQ設計組擔任其導師。輔助從法國留學回來的他快速補齊 基礎的UI知識， 同時鼓勵他將以往擅長的創新的方法論以落地 的形式帶入團隊。 職級：設計師 （D2-1）

EUGENE 柳斌 擔任QQ情侶項目的交互負責人。輔助剛進公司的他快速對工 作上手， 指導并把關其交互設計質量。 職級：助理設計師 （D1-2）

GRACE 王淦 擔任QQ情侶項目的交互負責人。指導并把關她的交互設計質 量， 輔助協調和產品團隊的溝通。 職級：助理設計師 （D1-2）

47

AWARDS INDIVIDUAL AWARDS 1. 騰訊優秀員工 2. STAR OF ISUX

TEAM AWARDS

PATENT

1. 2013下半年 SNG總裁獎 QQ多終端互融項目體驗設計聯合團隊

外觀設計 中國

2. 2014上半年 SNG總裁獎 QQ音視頻體驗優化聯合團隊

在同一个Wi-Fi環境下快速創建討論組的交互設計方案

3. 2014年9月 騰訊微創新獎 QQ截圖馬賽克 ﹣﹣ 圖片隱私保護利器

第一發明人：李昕

48

PASSION

FRAME DIFFERENT

51

I GO TO PLACES, T CULTURES WITH iPhone.

52

I USE P FEEL BEAUTIFUL MO

57

PROFESSIONAL CAMERAS, OMENTS ON THE PLANET.

58

FOCUS ON EVER

63

I DRESS UP EVERYDAY, RY DETAIL IN DAILY LIFE.

64

Empower others & make a positive change!

67

Copyright Špurpleli.com All rights reserved.

This book was produced and published in 2014 by Purple.

68