PORTFOLIO
H u a i Y i b i n
DECEPTION: MURDER IN HONGKONG A digital version of a board game Deception: Murder in HongKong is a board game of deduction and deception for 4-12 players which plays in about 20 minutes. This project is about developing the interface of a digital version of this game. We made a requirements list to define changes and constraints when this game move from physical to digital, based on that we concluded tablet, forensic scientist and other players as the three main parts of the system and developed the information framework, then we picked one screen to define basic visual standard and applied it in the interfaces of the key path under our scenario.
Introduction & requirements Game introduction Deception: Murder in Hong Kong is a game of deduction and deception for 4-12 players that plays in about 20 minutes. In the game, players take on the roles of investigators attempting to solve a murder case – but there's a twist. The killer is one of the investigators! Each player's role and team are randomly assigned at the start of play and include the unique roles of Forensic Scientist, Witness, Investigator, Murderer, and Accomplice. While the Investigators attempt to deduce the truth, the murderer's team must deceive and mislead. This is a battle of wits! The Forensic Scientist has the solution but can express the clues only using special scene tiles while the investigators (and the murderer) attempt to interpret the evidence. In order to succeed, the investigators must not only deduce the truth from the clues of the Forensic Scientist, they must also see through the misdirection being injected into the equation by the Murderer and Accomplice! The task of this project is very straightforward: to create a tablet version of this game, made to be played by co-located players.
Requirements List
In consideration of this game’s machanism, and the of players and clients, we concluded a list of requ and constraints which we need to take into acco designing the tablet version.
e demand uirements ount when
System Requirements
The Phone App for the Other Players
Must react to a wrong or right attempt to "Solve the Crime" by any other player.
May have an identifier to allow other players to recognize specific roles
Must manage the role distribution, dealing of Clue, Mean Cards and Scene Tiles
Must show the player's Clue and Mean cards at all times during Investigation Phase and be visible and readable to all other players
Must accommodate the end game events such as Closing the File and Reversal.
Must show if they have a Badge Token available or not
May allow for the use Event Tiles
Must accommodate attempts to "Solve the Crime" by any other player. Must show different information for different roles during The Crime.
The Phone App for the Forensic Scientist Must show the selected Clue and Mean cards selected by the Murderer May show who the Murderer, Accomplice, and Witness are.
The Tablet App
Must allow the user to hide in the screen the information included in point 1 and 2
Must show all the Scene Tiles with respective Bullets visible to all players at all times.
Must show the Scene Tiles one at a time
Must only be edited by the Forensic Scientist.
Must allow the user to place a Bullet on a Scene Tile and decide when to place it on the board
May show feedback from interactions with the players phones (example: a correct or incorrect attempt to "Solve the Crime")
Must allow the user to discard a Scene Tile
May show any extra information or visuals for improved user experience
Must allow the control and management of which Badge Tokens are available
May show end game events included in Closing the File and Reversal.
information framework
Information framework Phone & Tablet From the requirements list, we concluded the information framework, the game play system contains two main parts: the phone part and the tablet part. Players interact with the phone to continue the game, there are two different contexts: the froensic scientist the other roles. For the role of forensic scientist, players can interact with the phone to view each player’s role, and give clues by selecting items on the clue cards. For other roles, players can interact with the phone to receive their roles, view each others’ cards of dues and means, and make guess by consuming the tokens. The tablet is used as the game board, forensic scientist can interact with it to show clues, and players could view the tablet for game information and game results, the tablet can also automatically make judges on every guess, which could help increase the fairness of the game.
tablet part
tablet
forensic
This project mainly focus on the game play system, some other parts, such as account management and internet setting, are considered in the framework but without further developent
other players
phone part system framework
Dimensioning & standards Gaps were used to group elements, there were 4 types of distance and 14 px was the unit
investigators
murderer 96e0da
e2804a
Theme colors: two contrast colors were used to stand for different groups: investigators and muduerers
Three fonts were used in the interface: Special Elite for titles, IBM PLEX SANS for cards, and Oswald for other texts
Key path walkthrough Preparing Phase
Investigation Phase
Tablet Part
Tablet Part
Players press the start button to start the game and go to the preparation page, in this page players could view each palyers’ condiditon and who is the forensic scientist
In investigation phase the tablet would show clue cards sent by forensic scientist, and then players would make guesses, guess result and guess history would also be on the tablet
Phone Part
Phone Part
Select Clues and Means
Receive Roles
Choose Clue Cards
Before receiving the roles, all of the players need to assume their clues and means if they are going to be the murder, so the real murder wouldn’t be the only person who is tapping on the phone
After selecting clues and means, players would receive their roles on their phones
In investigation phase forensic scientist choose clue cards on the phone and swipe to send them to the tablet
Finding Witness Phase Correct Guess
Tablet Part
If a correct guess is made, the tablet would display the guess information and show an short animation
The murder has the last chance of revanging the witness to win this game, the guess is made by tapping the players on the tablet. After a game, case result and case information would shown on the tablet
View Roles and Badges
Game Results
Forensic scientist can view who is the murder and what are the clue and mean in the Role & Bandge page, other players’ role and bandges left can also be seen here
If investigators failed to find the murder or the murder find the witness, the murder would win, else the investigators win. When the murder wins, special players would be shown in the case inforamtion, when inestigators win, all the investigators’ name would also be shown in the case information, and the name of the person who made the final guess would be highlighted
Styr & Ställ IN THE FUTURE Interaction design & Speculative design How would people go outside in the future? This is an engaging topic being widly discussed in engineering, design, economy and art. During the project, we took the challenge of designing a 2040 version of Styr & Ställ, a sharing bicycle system in Gothengurg. From the perspective of design, we firstly did some desktop research and also field research to gather information about hoe the current system is like, then based on that we invited participants and held a co-design workshop to bordan our mind with wild ideas, at last, after using various methods to analyze the result of the workshop, we narrowed down our ideas to an amphibian automatic pod system for an extreme persona called lazy businessman, then we made sketch and video to prototype the idea.
Background
Design Sprint
Styr & Ställ (S&S) is a public bicycle rental program in Gothenburg, Sweden. It was launched on 10 August 2010 and is used by both tourists and citizens of Gothenburg. Anyone with a subscription can rent one of the more than 1000 bikes, from one of the 67 stations located around the city.
The sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers. Developed at GV, it’s a “greatest hits” of business strategy, innovation, behavior science, design thinking, and more—packaged into a battle-tested process that any team can use.
Challenge The goal and the challenge of this project is to design the future Styr&Ställ system in 2040!
Understand
Define
Sketch
Journey map
Golden path
Crazy 8
Five main steps are involved during the bike renting activity (registration, finding a station, retrieving bike, riding the bike, and return), we found unexpected things gathered at the first few and the step (before renting and returning), which are also where the users have the most interaction with the system.
Golden path is used to find the key user stories which causes users to successfully use the system. The result shows a timeline starting with the user retrieving the bike, continuing with the user riding the bike and ending with the user returning the bike. The timeline contains user stories that the user would like to perform in order to use the service as effectively as possible.
Crazy 8 is a useful method at realy stage of design work which could help generate wild ideas, a sharing and voting session was followed to make a selection.
Automatic pod system
Decide
Prototype
Validate
Slient review
Story board
Score the interview
We altered the method by splitting up the voting into three stages; Retrieve, Ride and Return so that we could mix up the ideas from different sketches. Everyone got one vote per stage so, for example, it would be possible to vote for the Retrieve stage of one sketch and then the Return stage of another sketch. We did the voting silently on post-it notes so that we didn’t get affected by each other during the vote.
Storyboard is a straightforward method to use since it tied well together with the previous phase and further developed the ideas we had gathered. Since the method also unified the team we found it an effective way to brainstorm and come up with a good way to map out the the specific steps that we found relevant to test for a user.
Score the test is a method which could let the testers interact with the system and think out loud to understand how the system works. Through this method we got all of the observers point of view of how the tester understood the system, and from that information we can discuss the outcome and how we all interpreted the results.
The result of the design sprint was an automatic pod system. While we mainly focused on AR-interface on the bicycle, the focus now shifted more towards the concepts that were meant for 2040. Instead of making a prototype of a system with some sort of app, the brainstorming shifted our focus towards an AR-experience where everything would be controlled with the mind. Even though the result became pretty far out with many ideas, we still had no problem with narrowing it down to four different moments that had a clear path between them and that we found useful for later user testings.
Co-design workshop The evaluation of our idea was a collaborative process and was onde by a co-design workshop. The aim of this workshop was to gather feedback and new inspirations from participants who are working with similar field, or who have backgroun knowledge related to our topic as possible. During the workshop we let our participants generated ideas by using different methods, and we made our decision through analysing the result.
TARGET GROUP
Data analysis We took notes and made video of our workshop, after the workshop, we documented the data and listed the ideas which could be usedful to our design, and combined them with our own ideas through different methos to make our final decision.
Lazy Businessman Age: 35
Methods used How Might We 5-4-3 Brinastorm bundle Ideas Voting matrix Wizard of Oz
Work: IT engineer in 2040
Profile: Busy at work Lazy when not at work Always late to work he is very extremly lazy and has difficulty getting up early to work, in 2040, smart phone had evoloved to an embodied chip in people’s brain, he thinks the ideal transportation system would come and drive him automatically to the company. Comparable Questions
Story Boar
rd
Adaptive Journey Map
Methods used Comparable questions Brainstorm Gut check Voting matrix Adaptive Journey Map Solution sketch
Solution Sketch
Results & finding Conclusion Pod instead of bycycle Participants accepted the scenario of chip in the brain (kind of wizard of Oz) and lazy businessman, the ideas of pod, three-step workflow, and automatic system were positively confirmed by participants in the workshop, we also got new idea about adding different modes.
Target group: lazy businessman Automatic driving Pick up, ride, and leave Different modes
Final sketch & User story Pod sketch At the end of this iteration, we did a overall sketch to illustrate our idea about how the pod should be like, this is an automatic and amphibian pod, the pod window is an AR interface with which passenger could interact by their “smart chip�, the setting angle could be changed by changing the distance between the front wheels and back wheels, and the pod change to amphibian mode by rotating the wheels. and we started create video prototype to express our interface and how the system works.
User story
1. Retrive pod: The pod comes to you!
4. Arrival: Thank you for using!
2. Get on the pod: Select modes!
3. On the way: Enjoy your snap under the night mode!
Different modes
User story
Once inside the pod, the user has a few different options in how it wants its experience to be like. It can cruise in just a normal mode, as one would today. But it can also choose to see different surroundings, for example if the user wants to sleep during the ride but the bright sun outside is distracting, they could change to the night mode, and the surrounding would turn dark.
In 2040, people use automatic transportation system to go to work, they can order pods whenever and wherever they want, the pods are automatic and will come to them right on time, so people don’t need to get up early to retirive the them. On the way, people can choose nigth mode to have a snap, or contact their colleagues about a meeting. After arrival, people would just leave the pod and go to office and the pod will automatically drive to its parking lot.
MIXED-REALITY MODELING Interface Design & Interactive Design This case is a group task. Based on the newly developed mixed-reality technology, we investigated the logic and functions of different modeling softwares, and gesture interaction in 2D and 3D interfaces. At the end we designed a MR modeling software as our vision about how designers work in the future. I was responsible for designing the interface and making and making the feasibility test video in this case.
RESEARCH We firstly investigated some exsisting 3-D modeling softwares to find their main functions and interaction logics: generating, modeling, and rendering. Then we started to think about how they may performe when combined with the MR technology. Softwares investigated: Pro-Engineer, UG, CATIA, Solidworks, Rhinoceros, 3d max, Maya, C4D
GENERATOR Generating is usually the first step to make models, at this step, the logic of different softwares can be generally divided into two types: NURBS and Polygon Mesh
MODELING Modeling is the main and the most essential part of modeling, including deformation, splitting, and combination of the whole or the part based on the generated geometry
RENDERING The ray tracing effect such as reflection and refraction in the scene is fed back in real time, so that the image of the model conforms to the 3D scene The interaction logic can be divided into three main steps
POINT
FUNCTION CHART
POLYGON EDITOR
LINE SURFACE
COPY ARRAY
NEW
LEFT MENU
IMPORT
CUBE
SCAN
CYLINDER
GEOMETRY
SELECT LIST
SYMMETRY
WRAP SPRIAL ZOOM
SCAN
STRETCH
BOOLEAN
CONE
LOFT
PIPELINE
START
ARC
RIGHT MENU
MATRIAL
EDITOR
SELECT PICTURES
CREATE
LINEBODY
STRAIGHT POLYGON RECTANGLE TEXT
RENDERING LIGHTING ATTRIBUTE
TYPES
SCENARIO PRESENT LOAD
SELECT
COPY
FREEDOM
ARRAY
CUBE
SYMMETRY CONNECT
FUNCTION
OBJECT
SELECT OBJECT
SELECT FUNCTION
SUBDIVISION FREEDOM
ROTATE
ATTRIBUTE
SPHERE
POLYGON
VARIANT
BEVELING
CONE
ANNULUS
CONNECT SUBDIVISION
INTERACTION
FREEDOM
SAVE
LAYOUT
TEXTURES
CONE
VARIAN SCAN BOOLEAN LOFT ROTATE
EDIT
BETHEL CURVE
SHARE
CYLINDER
GESTURE
CANCEL
HOLOGRAM SAVE
FUNCTION & INTERACTIOn The two charts show the main functions and the interaction of our MR modeling software. It allows user to set up basic geometry freely, or directly scan the model in the tral world, change the sculpt and add details derectly by hands, and check the rendering in the real world
CONFIRM
MENU
GESTURES Without mouse and keyboard, gestures become the main opreating method in MR modeling. In order to make modeling process more free, we designed some basic opreating gestures based on an investigation about exsisting 2D and 3D gestures used on other devices, and our own habits and understanding about the opreation
CONNECT
WRAP
CUT
SPIRAL
ADJUST
CHOOSE
EXTRUDE
STRETCH
MOULD
DELETE
SYMMETRY
AMPLIFY
COPY
SIDEBAR
SAVE
LIST
POINT AMPLIFY
ZOOM IN
MOVE
ROTATE
INTERFACES The interfaces shows the main menus and functions for modeling and rendering, the main method to opreate the interface is pointing and gestures. During modeling process, all of the menus except the main menu are hidden, users can call them out by doing certain gestures.
MAIN MENU
LEFT HAND MENU
The main menu are mainly divided into three major keys. The middle logo key calls out the file menu, manages, saves, imports the work plane, and shares.The left and right sides are for creating basic geometry and creating basic lines.
The left hand menu is mainly responsible for geometric modeling. The polygon editing function is mainly responsible for refining the surface features of the object. It is also possible to combine, split, and refine existing models by copying, symmetry, arrays, subdivision surfaces, etc.
INTERFACES
RIGHT HAND MENU
FLIP HAND MENU
The right hand menu is mainly responsible for motion modeling. Deform the model, such as twisting, beveling, scaling, stretching, and tapering. It is also possible to degenerate the model, and the dotted planes are transformed into each other by the functions of lofting, Boolean, scanning, turning, etc.
Through the flip of the left and right hands, the detailed setting interface of the current function is called up, and the effects of the geometric properties and functions are adjusted. Adjust the specific values by tapping, fingertip rotation, and voice input.
RENDERING MENU
TIME WHEEL
The appearance of a virtual object in a VR system depends primarily on its surface reflection and texture. So the render menu is mainly responsible for adjusting the surface material, lighting effects, and rendering scenes.
The operation is recalled and redone by counterclockwise and clockwise rotation. For the most recent step, users can also withdraw to any transient state in the dynamic modeling process.
OTHER FUNCTIONS In order to make modeling more easier, we designed some support functions to assist our modeling process
EYE TRACKING VOICE INPUT
The software has an eye-tracking function which can detect the user’s vision field, and hide the unseen part of the interface NATURAL LANGUAGE PROGRAMMING FUNCTION RECOGNIZATION
Voice interaction is one of the most efficient ways to interact in an MR modeling operating environment without peripherals
FUNCTIONS ACTIVATED OPREATIONS BY USER
VOICE INTERACTION
AIM RECOGNIZATION
OPREATIONS BY AI COMFIRM BY USER
You can effectively wake up the features you want with voice commands You can also say a series of actions or effects after the operation, let the AI do it for you He can even do another thing for you while you are doing one thing
Logic of voice interaction
Not seeing the menu
Seeing the menu
FISABILITY TSET The method and strategy to model in the Mixed-Reality environment is an essential part of this project, so we did feasibility test to check our gesture and interface
We use role playing as the method to run our feasibility test, one of our partners performe the user to do different gestures and record it by video. Then we discuss whether the gestures are proper
Record gestures
Modeling
Add them together to make video
Fist to call out the left hand menu
Open the fingers to call out the left hand menu
Hold to select things in a region to zoom in
Draw a rectangle to select things in a region to zoom in
FANTASY ISLAND Game planning & design This case is an orientation workshop of designing a game. The procedure was very interesting, we firstly cleared our positon to make a VR version of a famous game called Monument Vally. Then we disigned the characters and tools, and wrote the plot of the game, finally, we modeled the sceneries and characters to express our thought better and make our design become more detailed. I was responsible for the modeling part.
INTRODUCTION Fantasy Land is a RPG adventure VR game. As a character in the game, the player plays the game in a first-person perspective and a third-person perspective (following the perspective). At the same time, the player operates the character to decrypt between the various maps, adventure, and customs. Feel the meaning conveyed by the game through an immersive experience.
Enviroment
Characteristics
Unreal Engine 4.0
Immersive
Cinema 4D
High quality sound effect
After Effect
Meaningful and absorbing plot
Photoshop
BACKGROUND
PLOT
The first time the player entered the game The protagonist Eno lives in a remote, spiritual homeland. One day he woke up and found himself in a different space. Everything changed and twisted. Eno was scared but could not find a way home. He was told that only seven source crystals were found to take him back. Eno was overwhelmed, but the door that urged him to move forward had already opened, and the road behind him began to collapse. He had no choice but to run forward and began his journey.
FANTASY ISLAND A wonderland where the sprits, who are called god by people in the spritual continent live.
The true story shown at the end of the game Eno is an ordinary child of the spiritual continent. But just on his birthday, an accident made him an orphan. All this adventure was happened during his shock. And these seven qualities were the last birthday gifts that his unfortunate parents left to him by praying the gods, replacing themselves to accompany him to take the rest of his life.
SPRITUAL CRYSTAL Sprites use their power to store seven qualities into the crystals for Eno. Seven qualities Deligence Tolerance Optimisim Satidfy
Bravery Honest Strong
I dea tion
CHARACTERS The design of seneries and characters in this game are mainly based on low-poly style, each character has its own senario.
WHOLE SCENERIES Players will first stand on the middle island linking to seven islands with different themes, and they can go to different islands via the flotaing steps.
ISLANDS Including the main island, the game has eight islands with different themes based on the queality it stands for. On each island we set key words related to the task players need to achive.
main island
tolerance island
bravery isalnd
strong island
Main island is where the journey starts, from where players can go to different island and check collections.
You need to get down to the bottom and back to land from the other side.
Don’t be afraid of the sun, you will find him very kind when you get close.
Don’t cry for wither and fall, it’s another kind of birth.
deligence island
optimisim island
honest island
satisfy island
If you don’t be friend to the wheat in the field, they will be friend to the crows.
Grown in sand, the flowers are still beautiful.
I’m going to give you a flower tomorrow, please wait, I promise.
Satisfying and feeling enough is everything.
Design is not what it looks like or feels like, design is how it works.
Yibin Huai
P ROFILE
I’m currently a master student in Interaction Design at Chalmers University of Technology.
I’m an studying Interaction Design as a mster student, but during my school time, I have studied various design fields such as Graphic Design, Industrial Design, 2D/3D Animation Design and Game Design, and I have also teammworked with students from other different majors for competitions and contests. I think college is a period of time for us to try to see more and learn more, in order to get a brief knowledge abour our own major, and it’s also a period of time to strive to achive new skills and techniques to support our interests and directions.
Having a passion about design, I believe the most important thing of a good design should be the experience it conveys to its users, and that of a good designer should be thinking with a combination of insight, logic and creativity.
CONTACT
EDUCA TION
E-m ail : yibin@student.chalmers.se
2 015 Banchlor study at USTB
Telephone Number:
Industrial Design student
+46 764444481
Teaching assistant in middle school
Wechat:
2 0 19
252748774
Banchlor of Enginnering in University of Science & Technology Beijing
2 020 TE C H N IC A L SK I L LS
Master study at Chalmers University of Technology I n te rac tion D e sign stu de n t
Pho to s ho p Ado b e X d Ado b e I llus tra to r F ig m a
AWA RDS
Ado b e P re m ie r In de s ig n
2 016
C in e m a 4D
The 10th ICAN International Contest of InnovAtioN
F u s io n 36 0
3 rd price of u n iver sit y
Afte r E f f e c t
2 017
Rhino c e ro s
The 1st Innovation Design Contest of Intangible Cultural Heritage in Mentougou
Auto d e s k C AD
E xcel len t Awa rd
2 018 The 11th “Dongfeng Moter Cup” NAtional University Student Social Practice and Science Contest on Energy Saving & Emission Reduction 1st pr ice of n atio n