VIO design process
Overview
Cinevva is a start-up game company formed in 2020. The company goal is to create a web-based 3D puzzle game editor with an open community. There are many game production tools on the market, but there has never been a 3D game maker that does not require programming skills.
After two years of building on the foundation, Cinevva were looking for a UI/UX designer who was right for them.
Brief
Before I joined the team, Cinevva's CEO and CTO already know their target audiences and had a lot of discussions about the functionality of the product. They know what the product should do and what it should look like, but never have a prototype with click through.
How will the actual product look like? Fantasy and reality are different. After I joined the team, the three of us discussed UI/UX through meetings every weekday. The design of the product is also being improved every day...
Role
UI/UX Designer
Duration
6 months
Tools
Figma, Xmind, Wix, OBS
Empathy
Background
Competitive analysis
Design Goals
How difficult is it to make a game?
Why we made VIO
My pain point
I'm an otome game and anime lover. And I also write novels and fanfiction. I've tried to program my novels into visual novels but failed. Programming is not my thing.
This experience of failure made me realize that the game engine Cinevva wants to make can help many content creators construct their ideal world.
Research
In this project, the company already did a user survey that showcases why amateur game creators quit building their games. And it also has an idea of how the platform is going to look like.
Therefore, I focus more on the competitive analysis of game makers and production tools.
Competitive analysis
I researched different kinds of software for reference, some are professional game production engines, and some are web-based production tools.
In this section, I will talk about some representative software.
 |  |  |  |
|---|
Design Goal
Creative People Make Games.
Not Engineers.
In this next generation smart game editor, Cinevva wants to provide the tech magic for game lovers with different backgrounds to build a puzzle platform game, immersive visual novel or adventure.
No download
No coding
Easy to understand
Easy to use
Hobbyist community
Define
User personas
Problem statement
Persona
Diverse community from novice to professional
Alfredo Torres
User who just exploring and wanting to play games in without creating any game
Connor Ford
The user who have some basic understanding of game but never build one
Melissa White
Individual game developer who have some experience to create game
Henry Black
Professional game developer who understand the logic and coding behind the game
Different groups of people will naturally have different needs and pain points.
Understanding the unique perspectives of users from different backgrounds and abilities can help us ultimately enhance the overall user experience.
 |  |  |  |
|---|
Problem Statement
How might we design a comprehensive 3D game editor that easy to use but can meet the needs of different levels of users?
Ideate
Sitemap
Functional design
Features
Sitemap
Created to determine the overall structure of prototype flow
Since I was the only UI/UX designer in the team, the documentation Cinevva had was pretty much from scratch. In the beginning, there was no specific and comprehensive plan.
Therefore, by following the instrution of stakeholders, I started by designing each function individually. The process itself is a bit like playing a puzzle game. I also learned a lot of components needed to make a game.
Functional Design
Dive deep in to controls and user interface
For an editor, designing the interface is not enough. I also need to think and understand how the different functions operate and behave. Good news is, even though it's not clear what the overall general interface will look like, Cinevva's CTO knows how to implement everything in code.
However, before having a genral interface and adding interaction, all concepts are abstract. The interesting thing happened here: some ideas do not make sense anymore after applying them to the user interface. In the process of improving the product, we had to make a lot of decisions.
 |  |  |  |  |  |
|---|---|---|---|---|---|
 |  |  |
Prototype
Tools
Click-through
Video
Tools
In this project, besides the design files, I also make prototype videos and manage Cinevva's YouTube channel.
Design and prototype are done on Figma. The recording tool is the screen recording function that comes with Windows 10, which the hotkey is Ctrl + R.
Click-through
The first video in the list above shows how to create a game step by step with VIO.
1. Create environment
2. Add characters
3. Edit scenarios
4. Adjust camera
5. Place HUD element
Test
Prototype
MVP
Demo
Public conferences
Prototype
Playable prototype from how to create a 3D environment and scenario game
This is our first public prototype. It was officially displayed to users at San Francisco Tech Week in 2022 and was well received.
In addition to the presentation, we opened this demo to users who are interested in this product, and asked them some survey questions. During this period, we were also fortunate to meet companies that had the intention to cooperate with us.
At the same time, we made a YouTube video and updated the features that the editor will have in the future.
MVP
Minimum viable product, a version of a product with just enough features to be usable
It's time to move from fantasy to reality. In MVP, we need to implement the core functions. Therefore, we start with the 3D workspace and the library.
We design the user interfaceas intuitive as possible. When the user opens the editor, the library on the left will automatically open to provide some templates for the user. On the right is the 3D workspace. Users can drag and drop elements of the library into the workspace. When clicking on an element in the workspace, the user can move, zoom in, zoom out, or rotate the element through the icon to create the ideal 3D environment.
Demo
More features are being added,
including reference game
On the basis of MVP, the demo has been enriched with many features, including color customization, scenario, element mechanic and other functions mentioned in the ideate section.
In the latest version, in addition to using the models in the library, users can upload their own 3D models and use them in the editor, or find free models from Sketchfab through the library.
By using the API, the editor will have more powerful features. Such as the latest AI-assisted technology and text to 3D model technology.
Public conferences
During the testing phase, we mainly share the progress with investors and senior practitioners in the game industry.
The testing process was exciting and stressful at the same time. But in getting affirmation, we start to build confidence.
November 1st - 6th, 2022
Feb 28th, 2023
March 20th -25th, 2023
Reflection
User feedback
Project management
User feedback
During product development, we rarely face users. Before completing the prototype development of each feature in the ideal session, we never did any user testing.
Therefore, before we release the product to the public, we appeared not confident. Only the support of investors is not enough. We need more feedback from acutal users to keep product iterations in line with public aesthetics.
A sustainable product is one that can withstand the market environment and consumers.
Project management
At the beginning, stakeholders only told me which features were needed without giving me a complete framework. The design process for this project was tortuous. There have been many times when the features I designed before and after are not very related. After working for a period of time, I proposed the concept of systematic design to stakeholders and started to do documentation.
Project management and documentation should not be the responsibility of designers alone. Also, production management tools should be used well during the production process.
If you want to play with the clickable prototype, please contact me for the link.