MFA Thesis
STARWEAVE
August 2022 - September 2023
PC & Mac — Unity Engine
A squad rpg that utilizes tactical gameplay and allegorical narrative design to the end of encouraging players to exercise compassion when a cast of hurting teens lash out and even revolt against the player’s very tactical commands in a dire and oppressive situation.
Team
Me — UI/UX, Concept Artist, 2D Animator
Rachel Geng — Director
Allena Zhu — Art Lead
Sammy Chuang — Engineering Lead
Nickey Olsen — Usability Lead
60+ members, 8 teams
Tools
Figma
Clip Studio Paint
Photoshop
Blender
Dragonbones Pro
Unity Engine
Github
Skills
User Interface Design
UI Wireframes
Texture Rendering
Environmental Concepts
Bone Animation
The Task
STARWEAVE already had an established aesthetic, and theme with sketched wireframes to follow. So my main role was polishing the existing UI, while also doing layout tweaks as game systems change.
Problem
  • Lack of standard color palette causing the UI to not look cohesive scene to scene.
  • UI assets felt flat, were unfinished, or did not fit the game’s original design/style guide.
  • Placeholder party and settings scene that were outdated and did not reflect the most recent design of the game.
Task
  • Establish standardized color palette for both characters and UI.
  • Visual updates for most UI assets to be align with UI style guide.
  • Create wireframes/mockups to revision the flow of the party and settings, better reflecting current game designs.
Reference
We used League of Legends as our main reference for how we wanted the UI to look and feel. League of Legends has a sense of physicality with their UI that we wanted to communicate with our UI as well.
  • HUD elements stacked upon each other using bevels and drop shadows.
  • Flat gradients with texture to break up the colours.
  • Use ethereal. painterly patterns to match a fantasy, otherworldly feel.
Sketches Into Midfis
There were two screens that still needed to be iterated on further: party and individual member screen. With the help of sketches given to me, I turned them into midfis.
With the individual member screen, I essentially played Tetris as there's a lot of information that needed to be squished into a smaller container. Because STARWEAVE has more focus on aesthetic I wanted to make sure to strike a good balance between looking good and still being readable.
Style Guide
The narrative of STARWEAVE places a heavy importance on the characters. They each have specific hex codes connected to them and I used those hex codes to help create their unique palettes for their combat skill icons. I wanted to make sure the contrast between each shade was enough to create enough depth especially because the icons are relatively small.
For the general UI, I wanted to establish the metal colour palettes. I wanted the metal to act almost like a picture frame that doesn't take away from the content itself but does lead the players eye to the right places. While putting together this palette I also needed to make sure nothing will get lost as the game itself it quite colourful and have varying saturation.
Iterations
On the road of overhauling and creating UI, there were certain aspects that changed and certain screens needed to be adjusted. A lot of it were tweaks to better show off information especially aligning UI elements that utilizes the space much better.
Final
Along with the extra polish to a lot of existing UI, I also visually overhauled any other elements that did not fit within the UI style guide.
  • Battle icons fit the standardized character colour palette.
  • Settings page metal frame further polished to look more physical and sleek.
  • Narrator and character dialogue boxes revised to standardized colour palette. Also made the portrait star background more visually on theme.
  • Redesigned individual party member borders to more unique shape to distinguish it from the party screen.
    • Proposed to let players see the full splash art with a press of a button as it's a relatively easy implementation.
  • Buttons visually updated to be more polished.
Final Thoughts
This project is my first time diving very heavily into UI art specifically. I did not have much to do with the UX design side as most things were already established and it was something not heavily focused on during my time in the team. It is definitely a humbling experience. I really enjoyed going out of my comfort zone, going into a rendering style that I wasn't used to. But with the help of my art lead and director I perservered to achieve a style that satisfied all of us.
A Satisfyingly Long Journey
I never knew I would work on UI art to be quite honest. It wasn't something I entirely planned to jump into, but i stumbled myself in doing it because I really wanted the UI to make a good impression on players. There were definitely a lot of UI that needed to be polished, or given a visual update but it was hard work I'm proud of doing. Plus, there was a helpful burn-down chart to keep be company in managing my work week by week.
The more challenging aspect was being unfamiliar with UI art in general. While I did have the basic understanding of UI art I wasn't sure if I could pull off the quality. Especially when the more painterly style was not something I had a lot of experience with. However, with the style guides and referencing other UI done by the previous artists I was able to communicate the physicality of the UI.
Missed Opportunities
Truth be told, there were times where I believe I could have been more forward about my opinions especially when it came to certain problems I realized. As UX design wasn't heavily focused I believed I did not need to think deeply about it either, but to this day there were certain aspects where I truly wish I still said something even if there was little chance of it being tweaked.
There are still some areas of the UI where buttons or information felt too crowded. This also includes areas of the UI where it could have better visual language for the players especially when it comes to accommodating players who have colour blindness. I also realized that because of the lack of communicate between me and the engineers there were UI states not properly implemented or was not thought of entirely. There were a lot of what if's I had after the fact, making me realizing I needed to more than just put myself in the shoes of the player. I needed to experience the game and think to myself what I would like and see if it aligned with user data we gathered.
Preparing For The Next
While this experience was more UI art heavy, I still appreciated what I gained from diving into it. I got the taste of UI/UX that is fueling me to do even more especially with UX design. It also made me realize that with game development out comes moments where sacrificing an ideal for a better user experience is a decision need making. It's always tough wanting to have something look right, but realizing down the road how much it impacts the player. Even the smaller things like placement or colours. I'm excited to bring what I learn over to future projects I devote myself to.
Apologies!
This page is currently undergoing construction.
Please come back another time.
Apologies!
This page is currently undergoing construction.
Please come back another time.