Chain of Jewels

Publisher: DigiPen Institute of Technology

Length: 3 months, ended April 2024

Role: Visual Designer

Type: Group

 Game Overview 

A game focusing on strategy and combat, this mobile game enables the player to feel smart and sreal-timekilled, showing their opponent who’s the best. Once they’re done with the real time strategy portion, they can cool off between battles by stocking up at the store.

Though this game could be made into a full experience, it is so far only a .fig as it was a UX class group project. I will only be displaying my own work.

my mood board collage

Preparations

Personas

After studying the market and Game Design Document, my group and I surveyed twenty individuals to create three personas.

I created the secondary persona, basing her personality on the players who liked the more expressive portions of the game.

I tried to get to know her and personify her as much as possible.

Mind Map

Shortly after the personas, we made a mind map as a group, noting every part of the UI that we would need to include, where it would be attached to, and what function it would perform.

These images depicts one third of the mind map I completed on the shop portion of the game.

Figma Prototyping!

The actual design of Chain of Jewels was done in Figma in the form of medium-fidelity mockups. I was in charge of four of the eight sections of gameplay and set the bubbly, family-friendly tone.

To start, I designed the layout and animations played on the home screen. The glinting diamonds reinforce the title as the buttons stand out as the only interactable objects

The second section I added was the shop. There were three types of items a player could buy so naturally there were three shops. Though the transition and resting animations could be better, I had fun designing the button animations and evolution/destruction overlays.

The last sections I completed were the main hub just past the home screen, the PvP arena, and the arena shop. These were the most time-intensive because I was still learning Figma. I didn’t have much time left, but they are the most cohesive of my designs. There are some technical errors like the weekly reward popping every time the PvP menu opens, but the visual design feels open, fluid, and bright.

In the final week, each group member chose a screen to create a high-fidelity mockup. Before doing so, I found it helpful to create a mood board, pictured at the top of this page. Researching mobile games with similar screens and games that match the aesthetic and audience on the Game UI Database proved to be a productive starting point. From there I found a vibrant, energetic image to draw the color palette from. The result is on the right.

Reflection

This was the first time I worked on a solely UI project. After learning how to prototype with Figma, I’ve found it to be a powerful and extensive way to iterate through my designs. I’ve found that working in a group of drastically different designers, it is hard to find cohesion in the complete design. If I were to redo this, I would improve my communication and discuss the direction in more depth.

Another roadblock I faced was interpreting the Game Design Document. Because it was unclear and at times contradictory, I found it hard to follow along. My group members felt this, yet we hardly communicated about this problem. In the end, this affected the final product, as the combat was unclear.

Overall, this project impacted my way of thinking as a UI designer and illuminated both soft and hard skills in which I can improve on.