石伟力 Weili ShiPortfolio

石伟力Weili Shime@shi-weili.com

2010-2014Master of Science

Tsinghua UniversityDepartment of Computer Science and Technology

2003-2007Bachelor of Science

Huazhong University of Science and TechnologyDepartment of Electronics and Information Engineering

2013-2014Guest Designer

Beijing Dutushidai Technologies Co., Ltd.

2011Research Intern

Microsoft Research AsiaHuman-Computer Interaction Group

I have always wanted to build meaningful connections between technology and art, to make things that are not only useful but also illuminating.

After solid training in computer science, and with design experience in self-initiated and commercial projects, I have decided that a design practitioner is the right standpoint for me to fulfill my dreams. Therefore, I am seeking for a broad and deep immersion into the world of design, in order to push my creative boundaries and explore innovative possibilities.

ContentsDreamTracker 2011

Interaction Design, Graphic Design

Embrace You in the Distance:A Vision of Multimedia Message Cards 2011

Interaction Design Concept

2008 TopCoder Open T-Shirts 2008Graphic Design

Cardio/Cerebrovascular Health Companion 2013Interaction Design, Graphic Design

Crystal Orange Hotel Mobile App 2013Interaction Design, Graphic Design

CrystalOrange

HotelMobile App

2013Interaction Design, Graphic DesignCommerical ProjectOrange Hotel GroupBeijing Dutushidai Technologies Co., Ltd.

DATEDOMAIN

PURPOSECLIENT

DEVELOPER

Orange Hotel Group wants to build a mobile app in order to promote its top-line accommodations – Crystal Orange Hotel. Besides traditional booking function, the app features smart control of facilities in the guest room.

We used high-definition wireframes to exchange ideas with the client. For every aspect of the room appliances, we investigated the possibility of smart control, and the expected user experience. Hardware limits exist. If awkwardness is innate to a control function, we made our best efforts to minimize it. If a function has the potential to be made enjoyable, we push it to the extreme.

The control functions are devided into modules, in order to facilitate a structured and rich design. A control panel provides access to all the modules, with an emphasis on the superb ones. The actual control experience is playful, and full of discoveries. It is amazing to watch the room reacting to your tapping or sliding on the tiny phone screen!

Smart control is not enough, be sexy!No, it’s not efficiency or practicality that matters most to the hotel. What they want is a novel app that attracts customers, an app that deserves a TV ad.

SNO

W W

HITE

FROSTED

CRYSTAL

ORAN

GE M

ANIFESTO

The client gave multiple descriptions of the visual style they were looking for. We provided three candidates accordingly, in order to help the team to concrete the ideas. The client appreciated the energy in Orange Manifesto, and the cleanness of Snow White, yet they finally chose Frosted Crystal – what they really want is a showcase for attractive photos of Crystal Orange Hotel. Every day, a new photo is presented as the startup and background image.

We conceived this app just after Apple announced iOS 7. We had expected the popularity of frosted glass, and our unique version represents the quality of the hotel. The gracefully floating pieces of frosted glass offer a sense of space, and their polished edges show elaborateness. The glass can be tinted by backlights, to provide vivid representation of room states.

The style of Crystal OrangeQuality, Fashion, Uniqueness...The app is going to be a manifesto.

Featuring the best partsEvenness leads to blandness.A wise director guides the audience.

CO

NTRO

L PANEL

MAIN

SCREEN

On the main screen, the entrance of smart control functions is the most prominent item.

Among all the control modules, the most enjoyable ones are hightlighted in the control panel.

The user can explore the smart control functions even before checking into the hotel,

The traditional booking functions is there when needed, only one tap (or slide) away.

The primary state information of each module is presented in the control panel if applicable, giving the user a sense of control.

The joy of being smartThe refinement did not stop at the smart control interfaces.The app leads the user to the real wonder – the reactions from the physical space.

LIGH

T CO

NTRO

L

The main light of the guest room can change between its three themes. The name, the image and the color tint on the phone screen help the user to find a romantic feeling from the light.

Foolproof design: Either swiping on the picture or tapping the arrows will change the theme of light.

Entering the first stage of the sleep mode turns off the main and reading lights, and turns on the nightlight. The second stage turns the nightlight off. The image on screen gives the sleep mode a sense of serenity.

The reading and bathroom lights have their own controls. Foolproof design: The switches can be used either like a slider or like a button. The states cycle after each tap.

This and the following page present the final design of smart control interfaces.

DOOR LOCK CONTROL

STARTUP SCREENS

CURTAIN CONTROL

LIGHT CONTROL

Through multiple rounds of discussion with the client, we confirmed that every detail is satisfying.

AIR CONDITIONER CONTROL

STEREO CONTROL

ROOM SERVICE

TV CONTROL

MORNING CALL SERVICE

Health CompanionDATE 2013 DOMAIN Interaction Design (with Jiawei Gu), Graphic Design PURPOSE Concept Evaluation

Cardio/Cerebrovascular Every year, thousands of patients go to specialist hospitals in big cities, to receive treatment for cardiovascular or cerebrovascular diseases. After returning home, without precise knowledge of their rehabilitation progress, they tend to feel anxious about their health.

That’s where Cardio/Cerebrovascular Health Companion can help. It is a suite of postoperative services provided by the hospital to the patient and her close relatives. Consisting of a customized tablet and two apps running on smartphones, Health Companion not only assists the patient to keep the therapy on track, but also encourages her relatives to show more care, and provides professional instructions directly from her doctor.

PATIENT-EN

D

RELATIVE-EN

D

DO

CTO

R-END

Patient-End: to bring comfort customized tabletthe patient, or her caretaker (typically an old person, not necessarily familiar with digital gadgets)to bring comfort back to the patient, by tracking her rehabilitation progress and providing authoritative instructions.

MEDIUM

USER

GOAL

DO

CTO

R’S EXH

ORTATIO

NS

HEALTH

STATUS

LIVING

GU

IDE

MED

ICATIO

N PR

OG

RAM

CO

NTAC

T THE D

OC

TORREH

ABILITATION

TRAIN

ING

a dedicated device, might be viewed as a household appliance by the user. in the name of the doctor,

reliable source of information.

a checklist of daily therapeutic routines, to keep the patient on track.

the doctor’s exhortations, based on the patient’s rehabilitation progress.

Q&A with the doctor, via voice messages.

clean design with candy colors, suggesting that rehabilitation is cheerful.

DO

CTO

R’S EXH

ORTATIO

NS

HEALTH

STATUS

MED

ICATIO

N PR

OG

RAM

REH

ABILITATION

TRAIN

ING

MAIN

MEN

U

Relative-End: to encourage contact mobile appclose relatives of the patient (mostly the her children)to encourage the relatives to show care, to contact the patient more often and talk about her rehabilitation progress.

MEDIUM

USER

GOAL

clean design with candy colors, suggesting that rehabilitation is cheerful.

this checklist can be used during the phone calls, to help the user keep track of the topics.

encouraging a phone call to the patient

DO

CTO

R’S EXH

ORTATIO

NS

PATIENT LIST

HEALTH

STATUS

PATIENT’S PR

OFILE

MED

ICATIO

N PR

OG

RAM

VOIC

E MESSAG

ES

REH

ABILITATION

TRAIN

ING

Doctor-End: to enable prompt feedbackmobile appthe patient’s doctorto enable prompt feedback to the patient’s health condition, and to answer her questions.

MEDIUM

USER

GOAL

clean and professional visual style suits the doctor’s identity.

to share the case with colleagues via WeChat, the popular IM tool among doctors.

the doctor can adjust the therapy based on the condition of the patient.

Q&A via voice messagesto write a new piece of advice

DreamTracker2011Interaction Design, Graphic DesignCourse ProjectHuman-Computer Interaction TechnologyProfessor James Landay, University of WashingtonProfessor Yuanchun Shi, Tsinghua UniversityXu Haikuo, Su Zhouyue, Ahmed Waseem, Muhammad Jamal YousafProject Initiator, Project Manager, Chief Designer

DATE

DOMAIN

PURPOSE

COURSE

ADVISOR

COLLABORATOR

MY ROLE

How could a dream be so easily forgotten? You make resolutions, and don’t want to inadvertently leave them behind.

DreamTracker will be of great help!Tracking the fulfillment of your goals keeps reminding you of them. Smartly organized records enables you to grasp your performance.

Original ProposalHow could a dream be so easily forgotten? You made a resolution to jog every day. You were enthusiastic at first, yet it was just the third day when you forgot to do it. Whether a dream/plan is big or small, we need some reminder to keep us awake on our way.

A good way to keep ourselves aware of the plans is to track them. In this way, we not only remind ourselves the remaining work to be done, but also record our past deeds – the execution of our plans is therefore more manageable.

The original idea came from my physical tracking method – recording each day’s performance on a little blackboard. This technique is effective, but the blackboard is incovenient to carry around, and the records are hard to keep and use. Therefore, I proposed DreamTracker, in order to transform the concept into a mobile app which provides a facilitated workflow.

User StudyThen the team was formed, and a series of user researches were carried out. We were happy to know from interviews and contextual inquiries that many people do have the need for activity tracking, and would like to try such an app. These activities range from physical training to team management, and even to Islamic prayer.

Yet a mobile app needs to focus. We clarified the functionality of DreamTracker by defining its vocabulary: a dream is a repetitive activity which you would like to perform frequently for a long period; it is good but not mandatory, so that it is helpful to keep track of it. Based on the degree of detail you would like to organize your life, DreamTracker divides your dreams into two basic categories, and asks you two kinds of questions every day: 1. yes or no: “Have you jogged today?” or 2. numerical: “How many miles have you run today?”

As the result of task analysis, the functionality of DreamTracker was determined, in the order of first-usage time. The user need to set up her dreams before she could record activities. With a few days’ records, she could browse back and forth to compare her performance. With more records, the condensed calendar view will make sense. The user could also compare different tracks, and review a statistical analysis of her data.

ProjectProposal

ContextualInquiry

PaperPrototype

InteractivePrototype

HeuristicEvaluation

TaskAnalysis

RoughSketches

UsabilityTest

VideoPrototype

Design Process

Lo-Fi PrototypingThe design of DreamTracker evolved through iterations. Numerous rough sketches came from the team members during the idea generation phase. After comparison, we decided to base the interface on a daily checklist, which is the core function of the app. We adopted a technique named paper prototyping, and built a lo-fi prototype with quick sketches on cards. The storyboard of this prototype is show below. A flat structure is introduced, so that the user can jump between the recording and reviewing interfaces anytime with only one tap.

This kind of prototype has many advantages. It is easy to make, and can be rapidly modified during the user test, in order to fix problems or try alternatives. The tester/reviewer will view the prototype as “unfinished”, so that seggustions will be given on the level of usability rather than visual details.

Based on the paper prototype, we conducted usability tests to collect reactions and suggestions to the design. The usability test is informative. Although all the testers performed well with the paper prototype, we still noticed their minor hesitations and confusions, thanks to the think aloud protocol. The most imporant discovery is that, while the flat structure is efficient, it is a bit overwhelming and confusing to first-time users.

We also shot a video prototype, to introduce the concept and design of DreamTracker in the form of a story.

The video prototype can be accessed via http://www.tudou.com/programs/view/cKXLo3V6D9U/

Interactive PrototypeBased on the knowledge from usability test, in the design of the final interactive prototype, we organized the functions into a hierarchy. We reordered the functions based on frequency of usage; put the mostly used ones (recording, sharing) close at hand, and hide the rarely used ones (reviewing, organizing) a little further, in order to provide a clean and meaningful structure. We also introduced visual metaphor of checklist and calendar, to better convey the design concepts.

The interactive prototype of DreamTracker suvived heuristic evaluation, and was the best received one in class.

The interactive prototype can be accessed via https://dl.dropboxusercontent.com/u/39607190/DreamTracker.zip

Embrace You in the DistanceA Vision of Multimedia Message Cards

2011Interaction Design ConceptWorkshop ProjectInteraction Design Innovation in the Cross-Cultural Context: From Right Insights to Rich ExperiencesProfessor Gert Pasman, Delft University of TechnologyChunlai Qiu, Yinghui Hu (User Study, Brainstorming)

DATE

DOMAIN

PURPOSE

WORKSHOP

ADVISOR

COLLABORATOR

- User study -

Memories of gifts (giving/receiving)Contextmapping

TOPIC

METHOD

Context: fit into user’s worldMapping: collect user insights

We provided a toolkit for people to make & say, and they came up with stories & insights:

Spiritual things are much more important than material things.The message conveyed in the gift matters more than the gift itself.

- Vision -

How do people convey a message distantly?

So let’s try some digital ways, yet...

A letter is only for those who has literary grace and beautiful handwriting.

Why do (almost) all the electronic greeting cards work badly?

Not dedicated to you: made with templatesNot on a dedicated device: diluted impact

Embrace you in the distancethrough multimedia message cards!

VISION

A dedicated way to convey messagesA vivid way to express emotionA personal way to create intimacy

- Interactive elements -

photo credit: Photojojohttp://photojojo.com/

Then how to make one?

You make message cards, just like taking Polaroid photos!

You buy card packages, and use them as accessories to your smartphone.

And you can sign/draw/write on the other side!

Screen Lasting display for video playback (For now it’s a sci-fi product. Let’s wait till the technology is practical and cheap.)

Speaker for audio playback Hidden play button

Use the phone cameras & mic to record.

Content cannot be changed afterwards.

- Mental touch -

A multimedia message card is a dedicated device for a certain message.

It is materialization of digital information.The card itself is the message. You can have physical (& mental) touch of the message!

You can grab it, or treasure it, or even carry it with you. You may end up with a collection of these!

You can give out the cardsas an attachment of a present,

or as a gift itself, just like greeting cards!

The video pieces is vivid & personal, and therefore meaningful & memorable.The moments recorded in the multimedia message cards will be worth treasuring & replaying,

and the cards will enable endless possibilities.

Vivid expression of emotions

I just want you to know that, no matter how far away you are, I will embrace you deep in my heart!

Say something sincerely when it’s hard to speak it out face to face

Lily, I asked you not to open it in front. Actually it has been very hard for me to do so, but... I just want to say “sorry”!

Your mom and dad will maintain a book of memory pieces of yours!

Dad and mom, this is the university where I’m going to spend the coming years!

See that building? That’s where the conference will take place!

Before our wedding, our friends’ best wishes flocked to us from around the world!

Finally! Congratulations to you two!

Come to Greece for the honeymoon!

You’re going to be as happy as we are!

Have a plan for a baby?

We wish you a perfect wedding ceremony!

Share the wedding video with us!

We will visit you this year!- Use scenarios -

2008 TopCoder Open T-Shirts

The 2008 TopCoder Open is a world-wide programming and design tournament. These T-Shirts are designed for participants in each of the four competition tracks: Algorithm Competition, Component Design and Development, Marathon Competition, and Studio Design Competition. The illustrations are printed on the back of the T-Shirts, to indicate the participants’ identity, and to communicate the geek culture of TopCoder community.

The TCO08 logo is a property of TopCoder, Inc.

DATE 2008 DOMAIN Graphic Design PURPOSE Competition Entry COMPETITION TCO08 T-Shirt Design Contest

The multi-round nature of Algorithm Competition is resembled by the promotion of emoticons.

The Russian dolls mimic the nested structure of software components.

The Four Elements world view of ancient Greece, which is the birthplace of the real marathon race.

The magician is the designer who wears this T-Shirt!

ExtrasEnhancing Personal and Environmental Wellnessthrough Gamification of Everyday Activities 2012

Research ProposalThe full proposal can be accessed viahttps://dl.dropboxusercontent.com/u/39607190/Wellness.pdf

The Critique of Poetic Interaction 2012EssayThe full essay can be accessed via

https://dl.dropboxusercontent.com/u/39607190/Poetic.pdf

技艺合于道。 Technologies and arts, in tune with Tao.

I have already taken the initial steps of my journey in design.Now I’m looking forward to full immersion.

I hope one day I can get close to my design ideal: