Wood Joints Cafe

Problem

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.

Outcomes

We design 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.

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.

Role

Creative Director
UX Designer
Motion Designer

Time

Jun. 2020 - Mar. 2021

Team

Available on

Google Play iOS App Store

Challenges

Background

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.

Motivation

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.

Left: the ability high-school students are trained. Right: the ability college students need to have before the engineering drawing class.

Target Demographics

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.

Game Design

Game Mechanics

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.

For more detailed information, please refer to the Game Design Document

Storyline

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.

For more detailed information, please refer to the Research Report.

UX Design

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.

User Flow

Lo-Fi Wireframe

Hi-Fi Prototype

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.

Implementation

Concept Art

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.

Motion Design

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.

States

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.

Pipelines

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.

Accessibility Design

Overview

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.

Examples

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

Gesture

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.

Achievement

Professional Judges

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.

User Feedbacks

We've run 10+ playtests throughout the whole development process. Here're some positive feedbacks we've collected.

Reflection

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:

Daily stand up is an important routine for team work. To sync the progress, blockers with everyone improve the efficient of communication and collaboration, especially for remote work.‍
Self-motivation and trust are the keys to creating a healthy team environment.
Asking for help/feedback/suggestion is the best way to boost design efficiency and keeps everyone involved.