Skills

Process

1. Client Acquisition
2. Receive design request
3. Wireframes
4. Information Architecture
5. UI style moodboard
6. Present first pass to client
7. Iterate on first pass based off client feedback
8. Present final pass to client
9. Create UI blanks and provide client with all relevant files

Trailer

Client Acquisition

While browsing through Reddit one day, I chanced upon a job posting seeking a UI Artist for a tabletop RPG. I sent an email to the poster and the next day, I found myself on a Discord call with two of Mythiary Studios’ founders. They gave me a more in-depth brief of the project and explained that the only things holding their pitch deck back were 1) a couple of UI mockups for a HUD system and 2) a visual scripting editor known as their ‘Homebrew System’.

Wireframes

At our next meeting about a week later, I presented my clients with wireframes for both the HUD and Homebrewing screen. These wireframes indicated the placement of UI elements, whose functionality I verbally explained to my clients. 

For the HUD, I wanted the UI to take up as little space as possible, so that the player’s focus could remain on the gameplay in the center of the screen. However, my clients pointed out to me that certain icons and buttons could still be enlarged to provide greater accessibility for players. 

Meanwhile, the Homebrew screen would look somewhat similar to the visual programming language, Scratch. Players could drag and drop blocks of code — with the appearances of runes — into the editor to create complex cause-and-effect scenarios for their characters. 

Information Architecture

Since my tasks were only to create singular mockups for each screen — and did not include showcasing interactions — I found it personally helpful to create some rudimentary information architecture charts. This allowed me to keep track of necessary features and where they would be placed beneath expanding UI elements.

Moodboard

To ensure that I properly understood my clients’ vision for the UI art direction, I also created a moodboard consisting of UI screenshots from several different games. During the wireframe call with my clients, I went through the screenshots and explained which UI art elements I felt could best be applied to my high fidelity mockups. Through this moodboard, my clients and I were able to narrow down the art direction for the screens.

First Pass

I presented my first high fidelity UI pass to my clients at my subsequent meeting. While they felt it was good overall, I still received some great feedback on my screens. 

For the HUD:

•The hotbar was not optimally placed, and could instead be placed at the bottom-center of the screen
•There needed to be a hotbar key for each numerical button input on the keyboard, as well as the ability to toggle through multiple sets of hotbars
•The chat UI could benefit from clear visual separators between chatting players
• The Initiative Tracker had too much unnecessary space left over in its current iteration, and could be redesigned to showcase more of the game behind it

As for the Homebrew screen:

• It was visually inconsistent with the UI from the HUD, as if the two screens didn’t belong to the same game
• The highly rendered runes were too visually distracting

Final Pass

With this feedback, I iterated on my designs and presented a final pass to my clients.

In the HUD, I moved the hotbar, added opaque boxes behind each individual chat bubble in the Chat UI, and redesigned the Initiative Tracker to take up less unnecessary space. Additionally, I designed UI elements — such as frames, arrows, and scrollbars — to have an Art Deco style, in accordance with my clients’ design specifications.

As for the Homebrew screen, I changed the overall color scheme to match the aged-paper aesthetic of the HUD panels. I also simplified the runes to be closer to a flat design style. 

Takeaways

Overall, this was an incredibly positive freelancing experience, and I continue to have a good relationship with these clients. This project challenged me to design a little outside my comfort zone, as I had never experimented with the Art Deco style prior to this experience. In the future, I would like to play around with UI styling more to create even more unique visuals.