Mary Huang
Star Wars: Tales From the Galaxy's Edge

ILMxLAB
2020-2021
UI/UX, Lead UI Artist

"Star Wars: Tales from the Galaxy's Edge is an action-adventure virtual reality experience from ILMxLAB that lets you travel across the galaxy to the planet of Batuu and live out your own unforgettable story."

ILMxLAB Experience Launch Page

As the UI Lead, I was responsible for end-to-end design for all in-game UI features. Menus, typography, icons, AR-in-VR hud elements, custom UI shaders, tutorials, localization, settings, motion graphics. I also maintained technical documentation for all mission content, challenges, inventory, journal, and worked with game designers to untangle the spaghetti of nonlinear story progression. Shipped in Unreal Engine.

I was the first UI/UX designer ever hired at ILM. I shipped all the UI for the first launch in November 2020 in just 5 months, working mostly with the art director, game director, and engineering leads. For our follow-up release 10 months later, I maintained and improved core features and also expanded on augmenting storytelling with more in-world UI.

    Key design pillars:
  • Practicality: Legibility, Rendering Perf, Comfort
  • Lo-Fi minimalism: Don’t distract from the story, keep to the Star Wars aesthetic.
  • VR comfort and accessibility, spatial navigation.
  • Balance needs for new players as well as experienced VR players.
  • Communicate game features to encourage exploration and replay.

Initial tutorial introducing key mechanics. I worked with the level designer to build this sequence and the 20+ tutorials spread across this level. The player character had a lot of 'gear' and core VR actions that needed to be paced out for comprehension. And we had one month to do it all.

New VR players vs. Experienced players.

    Things we keep in mind for New Players:
  • People get motion sick.
  • People want to play sitting down.
  • People need to learn the controllers.
  • Game mechanics need to be paced out so they can get the VR basics like locomotion.

    Experienced Players:
  • Are much more vocal online.
  • Have played Half-Life Alyx.
  • Expect much more detailed control over things like locomotion settings.
  • Will progress through levels and gameplay much faster.

All-Kit 'augmented' tool controls and in-world helper icons for puzzles.

In-world shop UI, with player credits display, item descriptions, and multiple queued items function.

Spatial UI System for "AR in VR"

I built an in-world spatial UI system using a collection of shaders with different parameters. The primary goal was to keep it minimal and avoid too many elements visible at a time. Being selective with these parameters allowed me to create differentiation between game mechanics.

  1. Distance culling. Most elements were set to only be visible if the player was within 3 meters.
  2. Overlay. Some elements (like the compass target marker) needed to be visible on top of all geometry.
  3. Stay contant size in viewframe = scale up the element from a distance.
  4. Small animation: fade in on approach or constant rotation.

Inventory Pouch

The number of inventory items increased in the second release. Working closely with the gameplay engineer, we designed this expandable inventory that balanced the need for quick access with the need to hold many quest items.

We gave priority to weapons in the 'mini' slots. Later we also added an 'organize' mode to make those actions more efficient. I also gathered feedback about desired improvements, and worked with our gameplay engineering lead to ship the shoulder holsters feature, allowing an item to be stored on the player's back.

The inventory pouch was one of the most complicated UI mechanics. The fun idea of turning a conventionally 2D UI element into a 3D object doesn't scale well. Diagetic elements have to follow laws of reality and industrial design, thus inheriting all the problems of real-life objects. If we had more inventory items in a future release, we would have moved most of the feature to the 2D Pause Menu.

Compass Navigation

An important game element to guide the player to the objective, this feature proved extra problematic as a diagetic VR element.

Challenges:

  • A 3D arrow mounted to your wrist is way more complicated than a 2D element on a flat screen.
  • Our levels have a lot of winding paths and ‘doglegs’ due to rendering and level streaming requirements. No long clear sight lines.
  • This feature had to work across every single mission across multiple different levels.


    • Shipping It:
  • I condensed a wide range of ideas from different game designers.
  • I removed competing features and made an objective marker that is located in world space at a target point.
  • Audited all the missions and collaborated with level designers to get it all working.

    • I also improved usability and ergonomics on the 3D gauntlet design, working with our gameplay engineering lead and art director.

    Settings...Everyone's favorite menu feature!

    I made the settings easily accessible from both the main menu and the pause menu. Many settings have states dependent on other setting states, so keeping the design files well-documented saved a lot of engineering headache.

    We shipped some highly requested settings in a patch after launch to appease experience VR players who expect much more detailed control over their play experience.