Steampunk 3D Chess Game | iOS
This project was about designing a 3D chess experience for users who enjoy chess on mobile. The first part of the project was a school project for my 3D Visualization class. I was assigned to design the chess set in a steampunk theme. Afterward, I wanted to take this assignment to the next step and design a 3D chess experience for mobile. The project had 2 main phases. In the first phase, I modeled the 3D assets and the concept, and in the second phase, I designed the interface for the mobile game.
Design process
Context
01. I was tasked to craft a Steampunk themed 3D chess set using Maya. I took my project one step further and crafted a high quality 3D Chess Game for mobile with the 3D assets I built previously.
02. The current chess games have low-quality graphics and game-plays are not as engaging or delightful. They do get the jobs done, but it is not very engaging.
The Problem Statement
Juan (the user) needs a unique chess game in order to be engaged fully to exercise his chess skills, and keep his mind sharp
The Goal
Design a unique and an engaging game for online chess players.
PART 1 - EMPATHIZE
01. Researching & Understanding the Steampunk Concept Before Diving-in
In the beginning, I needed to research the concept to have a better understanding what the concept stands for, what are its values and what features it had. In my research I found that steampunk concept goes all the way back to Victorian-era England. And this concept's components are steam-powered industrial machines, goggles, gears, wood, pipes, brass, copper and mechanical workings.
02. Conducting Competitive Analysis to Understand the Strengths and Weaknesses of Competitors
I downloaded chess games on my mobile phone and examined them
Key Findings
01. All of them had similar features and they're all free, however, one of them (A) had a free version with ads and a premium version with no ads and other features.
02. The (A) and (B) games offer bird-eye, classic look pop-up set on the right, on the contrary, the (C) game offers the same feature trough settings.
03. User is exposed to a more clean and lean look compare to others being crowded but accessible, and that's the trade-off. All of them have similar animations and game-play, but the (C) game has the hardest camera navigation of all.
04. The (C) game has a unique look compared to the others.
PART 2 - DEFINE
01. Building the Persona Based on Personality Types
Next, the goal was to skew the target audience to a very specific group. Since user interviews were not avaible, I have started doing some literature review on personality types. I have found that chess players fall into the logician (INTP) or the strategist (INTJ) personality types. In his book The 16 Personality Types in a Nutshell, Jaroslaw Jankowski discusses the strategist and the logician personality types have a couple of natural inclination in common. One of them being their decision-making mode is the mind. The other one is they are creative and analytical. Therefore, after the research phase, the persona came together.
PART 3 - IDEATE
01. Designing A Moodboard to Decide on the Chess Pieces
Building a mood-board helped me with visually exploring the concept better. Coming from Gear Chess Sets to seeing steampunk concept art gave me the inspiration I needed and that lead me to sketches.
02. Sketching the 3D Models
I started sketching the 3D models for my chess set and soon realized that sketching is a powerful tool not only for UX/UI but 3D modelling too.
03. Building the Information Architecture
I decided on the possible navigation and tabs for the in game UI.
04. Sketching the in Game UI
Designing the interface was definitely one of the most important parts of this project. My goal was to design navigation and process that is user friendly and self-evident.
05. Deciding on the Colors and Typography
Since steampunk style means steam-powered industrial machines, gears, wood, brass, and copper, I made sure the colors and the typography showed that aesthetic.
PART 4 - PROTOTYPE
01. The UI Sketches Are Becoming the Low-Fidelity Wireframes/Prototype
I created the grayscale wireframes to feel the user flow and overall UI design.
02. Imagination Takes Off & the Sketches Are Becoming 3D Models
Person can really get creative using Maya. So, my imagination took over and I improved my sketches as I was modelling them
PART 5 - FEEDBACK
I have received very positive feedback from my professor and peers. They found the chess pieces creative, as well as concept.
PART 6- REFINE
01. Texturing the 3D Assets and Bringing Everything Together
When I finished modelling the pieces, next step was to building the whole environment and texture them, shade them. Steampunk was about steam-powered machines, so I imagined one side should be hovering like zeppelins and other should be on driving wheels like old time trains. I heavily used Arnold Shader to bring my scene together in Maya. As for the lightning, the skydome/HDRI lighting was an excellent option for me.
02. Tying Back to the Problem and Giving Juan (the user) the Game He Deserves - the Solution
Users can play the game with either virtual joystick or by just tapping on the screen. They can change the camera angle any time or lock the angle anytime through settings. I made one small iteration by changing the virtual joystick from right side to left. The reason for that was current games were using the joystick on the left side and I wanted to keep that so, learnability wouldn't be a problem in game. For the loading screen and menu I designed a steam effect and added some gears to keep the design coherent.
High Fidelity Mockups
