LEGO Hidden Side is a television show, toy set line, and exciting mobile game that brings LEGO sets to life with the power of Augmented Reality. In the story, high school students and online streamers Jack and Parker must save the small bayou town of Newbury from an evil and ghostly presence known as Gloom.
This game was a huge challenge for me as it was my first time designing UI/UX for an AR experience, as well as my first game for kids. I learned a lot about coming up with simple, elegant, and highly visual solutions, and had the benefit of conducting numerous play tests at LEGO's L.A. headquarters with local kids from the Los Angeles Boys & Girls Club, and writing up detailed reports and analyses on best practice solutions for the team. Additionally, I not only designed all UI/UX, but built all UI prefabs and created all UI animations/menu transitions myself.
UI Design
Although LEGO gave us a style guide with some inspiration and minimal marketing art direction (logo color scheme, fonts, and emphasizing "murkiness" and "duality") I was given creative control over the look and feel of the game's UI.
I knew right away that I wanted to emphasize the murkiness of the Hidden Side's atmosphere by using a lot of dark colors punctuated with pops of bright neon, which you can see in my Frontend UI kit.
For ghost related UI/themed items, I used neon greens, while purple is the color of all ghost-catching technology created by JB, the scientist/mentor of the player in game.
The main menu emphasizes the duality of Newbury while also delineating the two modes of the game. Tapping on one mode causes a panning animation to play, as the player literally chooses a side.
The pre-start screens for Hunter Mode (AR play), Ghost Mode (online multiplayer game mode), and special promotional minigame in which players can catch exclusive ghosts from depossessing special minifigs in store displays.
UI for the AR portion of the game. Players begin by lining their set up with a 2D outline of it on their screen. One of the key gameplay elements is detecting color on a small turnable color wheel built into each set.
Once players successfully scan one of three colors, they can "see" in that color spectrum. A radar minigame plays in which they must reveal all gloomy points on the set.
Once a Gloom point has been found, it shows up on the set persistently. Players can then "Degloom" it using the Degloominator tool. Players must tap the screen when a revolving pointer touches light segments on the tool, which zap the gloom away.
The third tool in dehaunting Newbury is the Minifig Scanner. Before this UI pops up, players must first place a minifig on a designated hotspot on the set, and then scan them for gloom. Minifigs have a 50/50 chance of being possessed by a ghost (a Gloombie).
After revealing a Gloombie, players must battle the ghost that possesses that minifig. The ghost must be targeted in a large circular reticle that shrinks a little bit with each hit. If the reticle shrinks too much before it can regenerate, it will overheat and disable shooting for a short period.
Boss ghosts spawn periodically and have a cool intro and titles sequence animation. After dehaunting the set, the player receives subscribers (XP), currency, and a run down of all the ghosts they caught in that session.
The Collection menu is like a pokedex of all the ghosts in the game. Collecting and upgrading ghosts is a big element of the game, as players can only catch new ghosts from AR experiences, but using ghosts is used in the multiplayer game mode.
XP is themed as subscribers to the player's Ghost Hunter/online streamer's channel. When players reach subscriber milestones, they can claim a reward. These reward screens are designed to be queued when needed, and are used for all rewards throughout the game.
The Workshop menu is where players can claim a daily freebie from JB, and purchase research XP for ghosts in their collection. Research slots are unlocked as subscriber milestones are hit.
I had a lot of fun writing colorful Southern dialog for JB in the tutorials and FTUE of the game. I used a lot of highlighting, vignetting, and animations to draw players eyes toward key UI elements on screen during tutorial tips.
Some miscellaneous screens from the main UI. The Loading Screen in the center animates in section by section and contains extremely helpful tips for playing the AR game, which has tricky technology that can fail easily if the conditions aren't right.
UX Design
Perhaps the most challenging part of this project was keeping up with the ever-changing design of the game. The meta and game modes went through many drastic iterations before becoming the game it is today, and it was also made more difficult by the fact that LEGO was developing this IP simultaneously and still coming up with theming, story, and branding. As a result, I have lots of unused wireframes, UX, and UI designs, but it was interesting and a great learning experience to see the process of what was successful.
The very first wireframes I did for the project, some basic black and white art made in Illustrator. Initially we wanted to showcase the sets as a means to navigate to the level you wanted to play the AR game with.
Three early UI design directions. LEGO expressed great interest in doing a "neon punk" modern and unexpected look for this IP, which I used for the example on the left. The middle is a more traditional mobile game approach, and the third is a retro futuristic 80s type display.
LEGO loved my neon punk mockup, but the kids responded the best to the center mockup. LEGO asked us to dial up the "murkiness" and scariness of the entire game. I also got my hands on some early box art concepts, and decided to try a parallaxing scrolling layout.
At this point, the team decided to pivot in a new direction that added a robust 3D multiplayer game mode that worked in tandem with the AR game via the meta game progression. LEGO also provided some of the early graphic design for the box art and finalized the font which I used to develop the final UI art style.
Early wireframes for the Upgrades menu, which was a brand new game design. The theme of our upgrades was installing apps on the player's ghost hunting smartphone. Originally we were going to have apps be the upgrades for Hunter mode, and chips or hardware as the upgrades for the multiplayer game mode.
My first step toward the final UI design, featuring a map with destination pins representing the different set locations of the town of Newbury. At this point we didn't have separate menus for game modes, and were instead sorting by set location.
A page from my AR UX storyboard doc, detailing a normal AR game session flow.
In this portion of the flow, I defined and concepted a key mechanic called Hands-On-Brick (HOB), which is a major component of AR gameplay in which the player manipulates the set in real life, and something happens in the game in AR.
On this page, I defined another key gameplay mechanic known as "gaze". We wanted to try to get away from tapping the screen, and used Gaze Indicators, or 2D art placed diagetically in AR space to let the player know where to look.
Early iterations of the Colored Visor Radar, Hands-On-Brick hand indicators, and the Degloominator. We wanted to drive the concept of players using different ghost hunting tools to indentify and clear out gloom on the set.
An early form of ghost battling, which was more like a fishing game. The reticle still shrank with each successful hit, but there was no overheat mechanic, and instead the light beam (or fishing line) would break if too many shots were missed.
