I had the opportunity to design an interface for ART (abbr. of Assets Rendering Tool). This tool streamlines the preparation of graphic materials needed for game releases on the GOG platform. ART is designed to provide users with a seamless and efficient experience, enabling them to create all necessary materials by selecting from predefined templates.
The main goal of this browser-based tool is to make it easy to create marketing visuals for games. Users can crop the main image and position the game logo in a template to create a cohesive and appealing design. Additionally, users can upload files from their computers and use them in the templates. This flexibility allows users to customize their graphics to their specific needs.
ART's main window in its initial state
Key Features
Predefined templates: To ensure consistency and quality, choose from a variety of templates designed specifically for the GOG platform.
Key Visual cropping and logo positioning: Intuitive controls allow for easy cropping of key visuals and positioning of game logos within the template, maintaining effective visual hierarchy and branding. Conveniently position and scale elements within the workspace to ensure alignment and proportion.
File upload and layer management: Upload images and other assets from local storage, with support for layering to stack, arrange, and manipulate these assets within the template.
User-Friendly Interface: The tool is intuitive for both experienced and less experienced users, drawing from standardized conventions and solutions in well-known graphic applications. Zooming and panning capabilities allow for detailed adjustments and precise edits. The available tools are grouped into convenient palettes for file import, layer management, scaling, and positioning, enhancing usability and workflow efficiency.
To demonstrate the tool's practical functionality and its capability to utilize various materials, I will use graphic assets from one of my favourite video games, which is exclusively available on the Nintendo console and not on the GOG platform.
Using the power of the ART, these two graphic files can be seamlessly combined to create the beautiful and ready-to-use asset you see below.
As illustrated in the image above, the application supports both dark and light modes, catering to user preferences and enhancing usability in various lighting conditions. This feature ensures comfort and reduces eye strain, providing an optimal user experience regardless of the environment.
For user convenience and to ensure optimal preparation of graphic materials, the user can activate the safe area preview on any layer at any time. This ensures that no essential elements, such as logos, are cut off when the graphics are used on the platform.
Asset with safe-zone preview enabled for the foreground layer. The logo is perfectly positioned and will not be cropped.
User Benefits
The tool is available to business partners of the online game store, granting them full control over the appearance of their game's graphic materials. This autonomy accelerates the process compared to preparing these materials through the platform and engaging in multiple rounds of communication to achieve final approval for publication.
By providing this browser-based tool, we empower partners to produce high-quality visuals efficiently, ensuring their games are presented in the best possible light on the GOG platform.
Development Process
The tool originated within the organization as a bottom-up initiative, starting as a working proof of concept aimed at improving part of the game release process. It identified the lengthy message exchanges required for final material approvals, which were created manually by a small team of graphic designers based on materials provided by partners. The manual work often revolved around appropriate cropping and positioning.
The first version of the working tool was released to a narrow group of users, and feedback was collected. Based on this feedback, key areas were addressed, such as better marking of mandatory materials required for game release and adjusting the image positioning tool to meet expected behaviour.
Closing words
This project demonstrates how user-centric design can enhance productivity and creativity. The graphic preparation tool for GOG simplifies the design process, enabling users to create high-quality materials easily. The development process benefited from leveraging design expertise to support and foster grassroots initiatives within the organization. This case study highlights the importance of addressing real-world needs through effective user experience and interface design.
Disclaimers:
The absence of information regarding metrics is due to the company's policy of not disclosing sensitive data.
The user interfaces and design elements showcased in this portfolio are my original work. The content, such as images, logos, and trademarks, belongs to their respective owners. These materials are used solely for the purpose of demonstrating my design capabilities and are not intended for commercial use or to imply any affiliation with or endorsement by the respective companies.
