Portfolio (Weili Shi)


Published on

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.

Published in: Design, Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Portfolio (Weili Shi)

  1. 1. 石伟力 Weili Shi Portfolio
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.