Wood Joints Cafe
An educational mobile game that teaches spatial reasoning for collage students of STEM majors.
Game User Researcher
06/2020 - 03/2021
Mengran Jiang | Producer
Haotian Lu | Technical Director
Jason Tsai | Gameplay Programmer
Ruizhe Tang | Gameplay Programmer
Yi Zhao | Art Director
Holly Cheng | UI/UX Director
Tiantian Wang | Audio Director
Wood Joints Cafe is my capstone project. It's a serious game that makes spatial reasoning training entertained. It brings the zen-like pleasure of mortise-and-tenon woodworking to a delightful story-driven mobile game.
I pitched the game concept and competed against 36 classmates. It was selected as 7 of the final capstone projects. I became the creative director and was able to assemble the team (called Wootopia Studio) with five classmates, one undergraduate student and one composer.
This case study contains the following stages:
Spatial reasoning plays a crucial role in Science, Technology, Engineering, and Mathematics (STEM) disciplines. However, the learning process is tough for beginners. Research shows that playing video games can facilitate the acquisition of complex thinking skills, but only a limited number of games are made specifically for training spatial reasoning and offer professional and enjoyable learning processes.
We hope to build a bridge between the high school geometry knowledge and the basic knowledge that is required for the fundamental engineering drawing class. It aims to improve players’ spatial reasoning skill in a professional as well as entertaining way.
We found thoughtful user experience and attractive interfaces play an important role to make users feel immersive. This case study focuses on these aspects to let this educational-purposed process be approachable and friendly to target users.
Left: the ability high-school students are trained. Right: the ability college students need to have before the engineering drawing class.
This game is suitable for everyone to play. However, the target research demographic is STEM major junior undergraduates. The reason is that the spatial ability of junior STEM students has been proved strongly correlated with their performance in their majors, but such correlation decreases when they go to senior grades.
During the play, the player needs to match wood pieces together with corresponding joint types, and the story plot will be unlocked after completing levels. To be more specific, as the diagram shown below, the player is required to move and rotate a single wood piece to a right position and angle, then insert, twist or slide it into another piece.
The the game is along with a beautiful story. The story begins with a young woman who receives a letter along with a package from her dad one day during the period of preparation for her cafe’s opening. Her dad, who is a carpenter, gives her handmade woodworks to celebrate the opening of her new shop. Inside the package, there are wood pieces. By assembling the pieces step by step, a completed furniture will be presented in the coffee shop.
Game User Research
For a serious game, research and experiment are conducted along with the game development. One pilot test with 10+ users and one controlled experiment with 60+ users were conducted. With all data collected, I wrote code on R Studio to analyze the results.
User Flow & Lo-Fi Wireframe
I created the following flow chart to made sure the development process is reasonable and achievable within the limited time frame. Meanwhile, it is used to plan and communicate the UX ideas with developers and 2D artists.
I illustrated the wireframe to present the layout of each page and to align with the flow chart. A usability test with 5 users was conducted in this stage.
Working closely with 2D artists and 3D artists, iterated based on the feedbacks and suggestions from the team, mentors and users, we defined the color palette, theme and style for all pages, which are presented below.
After several rounds of team brainstorming and 2D Artist's creative work, we defined two main themes about coffee and the bear.
Coffee: Because the overall storyline is happening in a coffee shop, coffee themed UI assets can fit in well the 3D environment to create an immersive gameplay experience.
Bear: The bear avatar, who's hand is furry and fat, is the avatar of the player. Playing the game well at beginning is usually challenging. We hope to utilize the characteristics of bears to encourage them it is perfectly fine to be “clumsy" and please keep going.
Since players could over-focuses on the game interaction, they could neglect the operations of UI to complete the assigned game tasks.The motion design retains players focuses on the changes of buttons and offers guidance to play.
For buttons in mobile devices, I defined default, active (pressed) and disabled states, as well as the transitions between any two states. For instance, in the first two gifs, a spark transition shows when the move button is clicked. An animation is played when the tab is unlocked.
The overall pipeline of implementing motion design requires collaborative usage of multiple design softwares, including creating 2D assets in Adobe Illustrator and Photoshop, inputing them into Unity to cut images into different frames using Sprite Editor and create the transition using Animation.
Below is the example of creating a Wood Joints assembling animation.
To take care of a broader audience, we’ve considered the accessibility features. So far we’ve implemented several functions including the reset button, visual effects, camera speed adjustment, gestures, etc. Also, we’ve carefully chosen the colors we use after testing our game from a color blindness simulator, to ensure the game is colorblind-friendly.
In the future, we will have a vibration function, to help the players who might experience hearing problems, or simply play the game in a noisy environment; One Finger Control function will be added, in case that players feel uncomfortable using two fingers to move the camera, a slider would provide as an alternative solution.
Color Blind Simulator
The homepage and the gameplay page in the red/green color blind simulator
Camera Speed Adjustment & Gesture
The rotate, pan and zoom in/out speed can be adjusted according to the individual difference of different users. To take advantage of the mobile device, we replaced buttons with as many gestures that the user is already familiar with as possible.
Camera Speed Adjustment
Doherty Threshold Principle
The Doherty Threshold Principle indicates that productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other. However, loading 3D objects takes more than 400ms in our game. This is an inevitable technical difficulty.
To solve this problem, I created a loading animation that displays the wood joints assembling to engage the user while loading the 3D assets.
This game survived from preproduction and production phases with the critique of professional judges from the game industry. It's successfully published both on iOS App Store and Google Play in March 2021. Currently, the team is polishing this game in our spare time and plan to submit it to different competition events.
We've run 10+ playtests throughout the whole development process. Here're some positive feedbacks we've collected.
As the team leader, I appreciate my amazing team for their professional, detail-oriented and self-motivation. I've learnt a lot through this process, specifically:
© 2021 Yulin Cai