VISUAL BUILDER
A bespoke visual building tool dubbed "Forge" built for gamers to build custom UI
COMPANY
GameGlass
ROLE
Founder, Chief Creative Officer
EXPERTISE
Product Design, UI/UX, Engineering
YEAR
2022
Project description
The GameGlass Forge is a bespoke visual editor that enables users to build custom interactive UIs to be displayed on their phones or tablets. The UI connects to the GameGlass Hub application installed on the users PC, and when an interactive component is pressed, the defined set of actions for that component are executed on the PC.
UIs that are created can be shared with others via a share code, or by allowing users to remix the UI directly from the application installed on their PC via a robust community ecosystem.
Challenge
When we first started GameGlass, we built all of the user interfaces directly using a standard method of design -> code. Even though these were well received and highly performant, this practice was not a scalable one.
We needed a way to allow users to build their own UIs in a simple to use tool if we wanted to scale.
Process
Research & Planning
Based on user feedback and initial prototyping we started our planning phase. This involved looking at a variety of design tools, video games that had building mechanics, and competitor products.
Desired functionality was written out with a clear goal for an MVP.
We needed to find a good UI framework to work with for this project and at the time one of the top ones was ChakraUI.
Once we had a good understanding of what was and wasn't going to be possible, I was tasked on creating a promo video for the Forge for one of our updates.
Design & Prototyping
Once we blocked out the visual layout for the builder based on our plans, I got to work creating a design system for a variety of different elements the builder would need. Most parts of the Forge were comprised of these building blocks, but some were modified due to code constraints.
Once the majority of basic building blocks were completed, I moved into the assembly phase for some of the most important aspects like the inspector panel. This is one of the most critical components of any visual building tool, and ours had a variety of nuances that other builder products didn't have, so we had to come up with clever solutions based on those problems.
At this point we decided to do another demo for our users to show off what we had been working on and how our progress translated into a fully functional product.
A lot of the Forge is based around components that our team creates in house. While users are able to build out their own components using simple building blocks and modifying the properties, using layering techniques, filters and effects to create interesting designs - we always knew that the more prebuilt buttons we had the better.
Our target audience isn't designers, so it was crucial that we gave our users many options that fit many different themes.
These components serve are what make up the vast majority of users creations, so they needed to be modular, responsive, and aesthetically pleasing.
Once users had set their layout and component placement, they would need to be able to define what actions those components did when interacted with. We decided that each component would be able to have a tap, hold, and double tap state, so a single component could perform multiple sets of actions based on the input type.
They would also be able to chain different actions in a macro format, to achieve desired functionality.
Development & Implementation
We had three engineers working on the Forge and I was the sole designer. Handoff was handled in a more traditional sense for this project, as there were just so many individual design components we needed to make this work.
The Forge was built in about 10 months and a short beta was followed by a full release.
Results
The resulting product was incredibly well received by our users and fundamentally changed how we approached building UIs. From this point forward, our team would also build our premium UIs directly in the Forge.
