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.

1. 石伟力
Weili Shi
Portfolio

2. 石伟力Weili Shi
me@shi-weili.com
2010-2014
Master of Science
Tsinghua University
Department of Computer Science and Technology
2003-2007
Bachelor of Science
Huazhong University of Science and Technology
Department of Electronics and Information Engineering
2013-2014
Guest Designer
Beijing Dutushidai Technologies Co., Ltd.
2011
Research Intern
Microsoft Research Asia
Human-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.

3. 2013
Interaction Design, Graphic Design
Cardio/Cerebrovascular Health Companion
2013
Interaction Design, Graphic Design
DreamTracker
2011
Interaction Design, Graphic Design
Embrace You in the Distance:
A Vision of Multimedia Message Cards
2008 TopCoder Open T-Shirts
2011
Interaction Design Concept
2008
Graphic Design
Contents
Crystal Orange Hotel Mobile App

4. Crystal
Orange
Hotel
Mobile App
DATE
DOMAIN
PURPOSE
CLIENT
DEVELOPER
2013
Interaction Design, Graphic Design
Commerical Project
Orange Hotel Group
Beijing Dutushidai Technologies Co., Ltd.
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.

5. 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.
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!

6. The style of Crystal Orange
FROSTED CRYSTAL
Quality, Fashion, Uniqueness...
The app is going to be a manifesto.
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.
SNOW WHITE
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.
ORANGE MANIFESTO

7. Featuring the best parts
Evenness leads to blandness.
A wise director guides the audience.
CONTROL PANEL
MAIN SCREEN
On the main screen, the entrance of smart
control functions is the most prominent item.
The traditional booking functions is there
when needed, only one tap (or slide) away.
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 primary state information of each
module is presented in the control panel if
applicable, giving the user a sense of control.

8. The joy of being smart
The refinement did not stop at the smart control interfaces.
The app leads the user to the real wonder – the reactions from the physical space.
LIGHT CONTROL
Foolproof design: Either swiping on
the picture or tapping the arrows
will change the theme of light.
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.
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.

9. P
TU
AR
ST
This and the following page present the
final design of smart control interfaces.
RE
SC
S
EN
AI
RT
CU
N
L
RO
NT
CO
OR
DO
CK
LO
HT
LIG
L
RO
NT
CO
L
RO
NT
CO

10. AI
Through multiple rounds of discussion with the client,
we confirmed that every detail is satisfying.
R
ITI
ND
CO
ER
ON
R
NT
CO
OL
TV
L
RO
NT
L
CO
RO
NT
EO
CO
ER
ST
M
O
RO
G
IN
RN
MO
E
IC
RV
SE
E
VIC
ER
S
LL
CA

11. Cardio/Cerebrovascular
Health Companion
DATE
2013
DOMAIN
Interaction Design (with Jiawei Gu), Graphic Design
PURPOSE
Concept Evaluation
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.
DOCTOR-END
RELATIVE-END
PATIENT-END

12. Patient-End: to bring comfort
MEDIUM
GOAL
customized tablet
the 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.
a dedicated device, might be viewed
as a household appliance by the user.
in the name of the doctor,
reliable source of information.
LIVING GUIDE
REHABILITATION TRAINING
MEDICATION PROGRAM
the doctor’s exhortations, based on
the patient’s rehabilitation progress.
HEALTH STATUS
DOCTOR’S EXHORTATIONS
clean design with candy colors, suggesting
that rehabilitation is cheerful.
a checklist of daily therapeutic routines,
to keep the patient on track.
CONTACT THE DOCTOR
USER
Q&A with the doctor, via voice messages.

13. Relative-End: to encourage contact
MEDIUM
USER
GOAL
mobile app
close 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.
clean design with candy colors, suggesting
that rehabilitation is cheerful.
REHABILITATION TRAINING
encouraging a phone call to the patient
MEDICATION PROGRAM
HEALTH STATUS
DOCTOR’S EXHORTATIONS
MAIN MENU
this checklist can be used during the phone
calls, to help the user keep track of the topics.

14. Doctor-End: to enable prompt feedback
MEDIUM
USER
GOAL
mobile app
the patient’s doctor
to enable prompt feedback to the patient’s health condition, and to answer her questions.
the doctor can adjust the therapy
based on the condition of the patient.
Q&A via voice messages
to share the case with colleagues via
WeChat, the popular IM tool among doctors.
PATIENT’S PROFILE
VOICE MESSAGES
REHABILITATION TRAINING
clean and professional visual
style suits the doctor’s identity.
MEDICATION PROGRAM
HEALTH STATUS
DOCTOR’S EXHORTATIONS
PATIENT LIST
to write a new piece of advice

15. DreamTracker
DATE
DOMAIN
PURPOSE
COURSE
ADVISOR
COLLABORATOR
MY ROLE
2011
Interaction Design, Graphic Design
Course Project
Human-Computer Interaction Technology
Professor James Landay, University of Washington
Professor Yuanchun Shi, Tsinghua University
Xu Haikuo, Su Zhouyue,
Ahmed Waseem, Muhammad Jamal Yousaf
Project Initiator, Project Manager, Chief Designer
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.

16. Design Process
Task
Usability
Analysis
Project
Proposal
Contextual
Test
Paper
Inquiry
Interactive
Prototype
Rough
Sketches
Prototype
Heuristic
Evaluation
Video
Prototype
Original Proposal
User Study
How 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.
Then 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.
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.
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?”
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.
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.

17. Lo-Fi Prototyping
The 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/

18. Interactive Prototype
Based 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

19. Embrace You in the Distance
A Vision of Multimedia Message Cards
DATE
DOMAIN
PURPOSE
WORKSHOP
ADVISOR
COLLABORATOR
2011
Interaction Design Concept
Workshop Project
Interaction Design Innovation in the Cross-Cultural Context: From Right Insights to Rich Experiences
Professor Gert Pasman, Delft University of Technology
Chunlai Qiu, Yinghui Hu (User Study, Brainstorming)

20. TOPIC
METHOD
Memories of gifts (giving/receiving)
Contextmapping
Context: fit into user’s world
Mapping: 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.
- User study -

21. How do people convey a message distantly?
A letter is only for those who has
literary grace and beautiful handwriting.
VISION
So let’s try some digital ways, yet...
Why do (almost) all the
electronic greeting cards work badly?
Embrace you in the distance
through multimedia message cards!
A dedicated way to convey messages
A vivid way to express emotion
A personal way to create intimacy
Not dedicated to you: made with templates
Not on a dedicated device: diluted impact
- Vision -

22. Then how to make one?
You make message cards,
just like taking Polaroid photos!
Screen
Lasting display for video playback
(For now it’s a sci-fi product. Let’s wait till the technology is practical and cheap.)
You buy card packages, and use them
as accessories to your smartphone.
photo credit: Photojojo
http://photojojo.com/
Use the phone cameras & mic to record.
Speaker
for audio playback
Hidden play button
And you can sign/draw/write
on the other side!
Content cannot be changed afterwards.
- Interactive elements -

23. You can give out the cards
as an attachment of a present,
or as a gift itself,
just like greeting cards!
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.
- Mental touch -
You may end up with a collection of these!

24. I just want you to know that,
no matter how far away you are,
I will embrace you deep in my heart!
Vivid expression of emotions
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”!
Say something sincerely
when it’s hard to speak it out face to face
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!
Your mom and dad will maintain
a book of memory pieces of yours!
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.
Before our wedding, our friends’ best wishes
flocked to us from around the world!
Have a plan for a baby?
Finally! Congratulations to you two!
We wish you a perfect wedding ceremony!
Come to Greece for the honeymoon!
Share the wedding video with us!
You’re going to be as happy as we are!
We will visit you this year!
- Use scenarios -

25. 2008 TopCoder Open T-Shirts
DATE
2008
DOMAIN
Graphic Design
PURPOSE
Competition Entry
COMPETITION
TCO08 T-Shirt Design Contest
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.

26. The multi-round nature of Algorithm Competition is resembled by the promotion of emoticons.
The Russian dolls mimic the nested structure of software components.

27. 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!

28. The full proposal can be accessed via
https://dl.dropboxusercontent.com/u/39607190/Wellness.pdf
The Critique of Poetic Interaction
The full essay can be accessed via
https://dl.dropboxusercontent.com/u/39607190/Poetic.pdf
2012
Research Proposal
2012
Essay
Extras
Enhancing Personal and Environmental Wellness
through Gamification of Everyday Activities

29. 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:
技艺合于道。
Technologies and arts, in tune with Tao.