Vividus: Transforming Game Illustration Production with AIGC

IN THIS CASE STUDY

Role & Outcome: Led the UX/UI design of the Vividus project and its iterations, designing new features from MVP to v3.0.

Key Impacts: Achieved a 37% boost in overall illustration efficiency, improved satisfaction score to 4.3/5, and gained strong adoption by 6 CP partners.

🏙️ Background

In recent years, AIGC technology has shown significant potential in illustration production. As an organization specializing in Japanese anime-style H5 games, we formed a Data Scientist team in late 2022 to conduct a proof of concept for integrating AI into our commercial production processes. In May 2023, we officially established the Vividus project team, comprising product and development teams, to support our internal illustration team and partner game developers.

Our game development heavily relies on illustration materials, directly impacting the release speed of new games. Additionally, the marketing department frequently updates illustrations to optimize ad performance. Vividus aimed to enhance illustration efficiency to address these bottlenecks and provide value to the industry.

🎯 Goals

Our high-level goals were to create a platform where everyone could easily and willingly unleash their creativity.

  1. Improve the efficiency and satisfaction of the illustration department.

  2. Accelerate new game development and ad placement efficiency, driving overall business growth.

  3. Provide more competitive solutions to partner developers, creating industry value.

🧑‍💻 Role & Challenges

🧙‍♂️ My Role

I led the UX and UI design for the Vividus project since May 2023, collaborating with three Data Scientists, one Product Manager, two Backend Engineers, and two Frontend Engineers.

During this period, I also managed other internal projects, mentored junior designers, and temporarily served as a Product Manager for two months.

🧗 Challenges

Product Design Challenges:

Despite significant advancements in AIGC between 2022-2023, integrating this technology into commercial workflows remained challenging. Our task was to ensure that generated images adhered strictly to IP image settings, maintaining character shapes, artistic styles, lighting, and logical consistency. Given the immature state of industry technology, we customized flexible pipeline strategies in product design, gradually improving illustration workflow efficiency by adjusting user processes.

Cross-Department Collaboration:

The internal illustration department was skeptical of AI technology and faced tight deadlines, making it challenging to adopt new workflows. My focus was on enhancing understanding and trust through product design, enabling illustration users to not only accept but also enjoy and proficiently use the new tools, optimizing their workflows.

Project Management and Leadership:

During the mid-development phase of Vividus, I temporarily took on part of the project management and advancement work for two months after the Product Manager left. I focused on specific needs while managing project priorities and team progress from a macro perspective. Since becoming the organization’s design leader at the end of July, I have driven the completion of the Vividus project, deeply involved in three other key projects, and committed to improving our overall design quality and team professionalism.

🔍 User Research

Having established our objectives, to accurately set project goals, I conducted in-depth research into the illustration department's work needs and workflows:

Understanding the Illustration Workflow

After initially understanding the illustration process through online tutorials, I organized interviews with eight members of the illustration department, including leaders and illustrators. The interviews provided insights into the existing illustration workflow and the issues encountered at each step.

IP Character Illustration Process Map

Collaborating with the DS team, we identified the potential of AIGC in sketching, coloring, and background processing. Although AI couldn't fully generate finished products in the line drawing and coloring stages, it could improve efficiency in specific steps.

I also interviewed illustrators about their views on AI-generated illustrations: some were excited about the potential efficiency improvements, while others were concerned about its impact on creativity and job stability.

Examining IP Copyright Requirements

I reviewed the briefs from IP owners and content providers to understand their specific directives. For IP-authorized game illustrations, IP owners had strict requirements for character shapes, costumes, and personality traits, as well as high standards for the finished products.

Competitive Analysis

I explored various AIGC platforms, including Midjourney, Adobe Firefly, Leonardo, Pika, Vizcom, Krea, and Runway. My analysis covered their features, user interfaces, interactions, and user feedback. While some platforms excelled in user-friendly interfaces and others were notable for their diverse features or high-quality generation, they all posed challenges with steep learning curves and complex functionalities.

Expanding Technical Knowledge

To provide more precise design solutions, I studied tools such as Stable Diffusion, ControlNet plugins, and LoRA models. This deepened my understanding of parameter configurations, resource consumption, and generation logic, while also improving my communication efficiency with the technical team.

📊 User Insights

While evaluating the technical team's proposed product pipeline, I noticed a tendency to focus on integrating advanced AIGC technologies rather than starting with a thorough understanding of user needs. To ensure the product was user-centric, I created a User Journey Map based on research results. This helped the team analyze user pain points and focus on core project goals:

Insights from the User Journey Map:

User Pain Points

  1. High Learning Curve: During the consideration step, users were unsure about AI capabilities and worried about the steep learning curve and the quality of generated results.

  2. Workflow Integration Challenges: Illustration design tasks have very fixed deadlines. Users felt exhausted when trying to integrate AI into their workflow, fearing that this attempt might reduce efficiency and cause delays.

  3. IP Compliance: Users were concerned about whether AI-generated materials could meet the strict consistency requirements of IP owners.

  4. Image Quality Issues: AI-generated images often lack the required detail and quality, leading to frequent manual corrections.

  5. Discouragement from Failures: Image generation often failed for various reasons, which lowered users' motivation and confidence in using Vividus. Although the issue might be due to improper configurations, users tended to blame the AI technology itself.

Technical Challenges

  1. Generation Quality: AI-generated images still couldn't fully meet user expectations.

  2. Ongoing Training: New game projects required continuous AI model training to meet the illustration needs of characters, icons, and backgrounds.

💡 Solutions

Based on the insights, we used the "How Might We" (HMW) method to set clear goals and corresponding solutions to address pain points.

🛫 HMW make it easier for users to get started and increase their confidence in AI-generated images?

  • Simplify the tool usage process and create detailed beginner guides to help users quickly grasp the features and functions of Vividus.

  • Establish a sharing community to encourage users to share excellent generation cases and configurations, promoting exchange and usage.

🔗 HMW better integrate AI into the existing illustration workflow?

  • Use AI to optimize rather than replace time-consuming, tedious parts of the original workflow, such as coloring and splitting, to improve efficiency.

  • Continuously optimize and adjust AI functions through user feedback, ensuring seamless integration with existing workflows.

🔎 HMW ensure AI-generated materials meet the strict requirements of IP owners?

  • Provide detailed parameter settings through tools like ControlNet and continuously optimize AI models for characters and styles.

  • Enhance overall consistency by generating different parts of the image separately.

🔮 HMW improve the reliability and overall quality of AI-generated images?

  • Guide users with best practices to reduce poor results or failures caused by configuration issues.

  • Implement mixed pipelines to lower the probability of total task failure, alleviating user frustration.

  • Provide advanced editing tools like Inpainting, ReFace, and Instant Icon, allowing users to quickly adjust details after image generation.

🪁 HMW meet the ongoing demand for new AI models?

  • Design an automated, visual model training interface that allows users to create models, intuitively manage them, and optimize parameters to meet the growing needs of new game projects.

⚖ Design Principles

Before diving into the design process, I set the groundwork with the following fundamental principles:

Function Over Form

Prioritize usability, ensuring aesthetics enhance the user experience.

Invisible Design

Enable users to focus on their needs, leaving complex tasks to the product and system.

Continuous Learning

Continuously optimize designs based on user feedback and data analysis.

📐 Design System

Guided by these principles, I collaborated with the front-end team to establish a streamlined, efficient design system. We applied text and color styles to design tokens and gradually added components, focusing only on necessary elements to achieve the following core values:

  • Consistent User Experience: Ensured users enjoyed consistent visual and interactive designs.

  • Increased Development Efficiency: Reduced repetitive work in subsequent development through the design system, enhancing overall efficiency.

  • Accelerated Solution Validation: Leveraged system components to quickly launch and test new feature pipelines, validating and optimizing feasibility before rapid deployment to the production environment.

🎨 Design Solutions

Drawing from the design principles and insights from UX research, I crafted and iterated on various aspects of the project's UI. Here are some of the key solutions:

1. User Onboarding & Guidance: Ensuring a Seamless Start

Understanding that a smooth onboarding experience is crucial for building users’ confidence and patience with Vividus, I created user scenarios to identify potential pain points during initial use.

Based on these insights, I developed several solutions to help users familiarize themselves with the product:

Initial Onboarding Support: User Manual Documentation

In the early stages of the project, when development resources were limited, I collaborated with the Product Manager and Data Scientist to co-author a user manual hosted on an online documentation platform. This manual covered feature descriptions and FAQs to assist users in understanding the product. We also established an internal group chat to promptly collect and address user feedback, helping users get started quickly.

Iterated Learning Resources: In-App User Manual and “What’s New”

In later iterations, we embedded the user manual directly within the product, allowing users to stay on the site while accessing guidance. Help icons were added next to key features, providing quick access to instructions and best practices. Additionally, a “What’s New” modal now highlights updates whenever users access the product after a new version is released.

By implementing these solutions, we ensured users could onboard smoothly and maintain a pleasant experience, enhancing their confidence and satisfaction with Vividus.

2. Workflow Completion: Post-Generation Refinement

In the initial MVP version, post-generation tasks like viewing, upscaling, variations, and cutouts were disorganized and cumbersome. To improve this, I streamlined the user flow based on feedback and optimized the process.

Users can make all decisions based on the operation panel.

I combined all post-generation operations into a single panel, simplifying the user path. I also introduced a "Personal Favorites" feature, making management and reuse easier.

Operation Panel

Features of the Operation Panel

Management & Usage of My Favorites

After the update, user clicks to enlarge the original image dropped by 68%, indicating they completed filtering and other tasks on the panel. The "Personal Favorites" feature was also well-received for improving management efficiency and speeding up the creation of new tasks.

3. Advanced Coloring Features: Iterative User-Centric Design

To integrate AI into workflows and optimize time-consuming and tedious steps, we chose to automate the "line art coloring" process. Initially, the DS department suggested using user-input color commands or keywords based on technical research. However, after small-scale user testing, I discovered that this process required users to start with a creative idea. Simple prompts led to unsatisfactory and inconsistent color quality, while detailed prompts resulted in limited and rigid color schemes. These poor results came from a technically driven process that didn't fit illustrators' daily work habits.

So, I invited five illustrators to discuss their creative process, considerations, and the rules they follow when coloring. From these discussions, I created a flowchart capturing the creative process from the illustrators' perspective.

Color Creative Process Map

Based on the process map, I found that users spend most of their effort choosing the main color and creating the palette. Therefore, I designed two pipelines to cater to different needs: one for users without a predefined idea who seek color inspiration from mood boards or reference images, and another for users who already have an initial color palette and need AI to expand color combinations and create drafts.

Case 1: Seeking Color Inspiration

Case 2: Creating with Existing Ideas

Pipeline 1: The AI will automatically select some complementary colors and randomly distribute them across the image details to generate a colorized image.

Pipeline 2: AI applies colors to the identified tags in the image following the user's sketched color distribution guide, completing the image coloring.

After finalizing the solution process, I conducted a brief tutorial on color matching and color wheels for the development team, they quickly adopted the suggestions and implemented the new pipeline.

As a result, the usage rate of Vividus’s line art coloring feature increased by 137%, highlighting that an effective usage process design is as crucial as the technical foundation, significantly enhancing the tool’s usability and adoption.

4. Enhancing AI Capabilities: Introducing Advanced Tools

To better integrate Vividus into illustration workflows and reduce manual adjustments after AI generation, we introduced these advanced editing tools:

Quick Drawing

Costume Transfer

The usage process for replacing the target character's costume with the user's provided reference costume.

Advanced Parameters

As users’ expertise grew, we introduced optional advanced parameters to the image generation command panel to better support their evolving needs.

🖼️ Use Case

After the project launch, we encouraged users to share their experiences. One widely discussed case was:

Community post showcasing a user’s experience with ‘Clone Generation,’ shared via group chat.

As shown in the image, an illustrator involved in a game project used the "Clone Generation" feature to create the game's main loading screen poster in about one-third of the usual time. This feature enabled precise reproduction of the reference character based on a reference pose, requiring only a full-body image of the character and a pose image. The user roughly designed the poster's character positions and poses, used a 3D figure to create precise pose screenshots as reference images, and quickly generated accurate results.

Showcased the AI Tool’s Potential: This case quickly generated multiple high-quality characters, saving significant time and effort while ensuring character design consistency. It demonstrated the AI tool’s flexibility and practicality.

Encouraged Other Users: The case sparked lively discussions in the community, proving that proactively controlling parameters could significantly reduce subsequent modification efforts. Other users also began actively trying the "Clone Generation" feature, sharing their results and experiences.

🏆 Achievements

🚀 The Launch

The project launched in June 2023, with three major updates by May 2024.

📈 The Impact

Even though our users are skilled illustrators with mature and efficient commercial workflows, we still achieved significant improvements, a remarkable accomplishment by the team:

37%

Character illustration production increased by 26%, while icon and background illustration production rose by 45%.

Efficiency Boost

4.3/5

Improved from an initial 2.9 to 4.3. Users have largely integrated Vividus into their workflows and expressed high satisfaction.

Satisfaction

6 CP

2 recently started using Vividus, and out of the 4 initial partners, 3 have continued to use it long-term.

Partners

🤝 Feedbacks

"Currently, character refinement can only be done manually, but I enjoy using Vividus to complete SD character parts after the exhausting refinement work. It’s like a pleasant break while saving a lot of time."

– Illustration Department

“Character designs often have specific color requirements. Initially, the AI coloring results were too random, like drawing an SSR card. The new color palette and image color reference feature allow for precise color ranges and targeted area assignments, greatly improving results. I can now achieve ideal color schemes in half the time compared to traditional methods.”

– Illustration Department

“For advertising, catching attention is key, and the artistic requirements aren't as high as in-game. I used Vividus to generate ad images and, despite having no artistic background, I successfully created highly effective ads based on my commercial experience. This is amazing.”

– Marketing Department

“Previously, communicating game asset needs with the illustration team meant spending a lot of time blindly searching for reference images online to create instruction manuals. Now, with the Vividus system, I can get near-expected character images in just over ten minutes, making the most tedious part of communication the most enjoyable.”

– CP Partner

  • For confidentiality, the project name and logo used here are fictitious. Additionally, some details in certain images have been blurred, and actual metric values have been obscured.

  • All content in this case study is my intellectual property and cannot be reproduced without permission.

Next Project

OneQR Restaurant →

Thank you for stopping by! I'm always open to collaborating or simply saying hello.