Chemistry Craze – Jennifer Collins

- overview -

CREATING AN EXPERIENCE TO HELP HIGH SCHOOLERS LEARN CHEMISTRY

While at Filament Games, one of the two projects I worked on was creating the UX and UI for the HUD of a chemistry game to help inspire high schoolers to want to study chemistry more. This project was a client project, with a strong idea in mind for its chemistry games. While the game designer worked on creating the gameplay, I took to the menus, trying to design a UI that both fit the theme of chemistry and the other main theme of the game - a cyberpunk inspired game show.

TAKING A POPULAR GAME AND GIVING IT A BRAND NEW LOOK

I was playing games with my friends one night, and one of them started complaining about he wants easier access to his champions. I asked him more questions about his struggles, and he explained some of the things he wished he could change. After hearing his feedback, I decided to take upon the project of doing a complete redesign of a game client. From coming up with a survey to find issues from real users to the redesigning and prototyping, I took on all steps of the project.

CREATING AN EXPERIENCE TO HELP HIGH SCHOOLERS LEARN CHEMISTRY

- problem -

CHOOSING AN ART STYLE

When we started the project we knew that one of our biggest struggles other than making the game itself was going to the art style. The asset pack had been chosen, and the client had decided on a cyberpunk but still slightly cartoon inspired style. From this I knew the UI would need to be something that matched the style of the assets we had picked out.

Level Select Wireframe – Player Front Bottom

Level Select Wireframe – player in front isometric ui

- process -

FINDING INSPIRATION

We drafted out the initial wireframe options, experimenting with different camera angles. One key point of this design is that the team wanted the user to be able to see their character while interacting with the level select screen. We played around with the idea of a curved menu centralized around the character but this ended up being out of scope.

- process -

ITERATING ON THE DESIGN AND INCLUDING ACCESSIBILITY

Once we had decided on a layout for the level select screen, we decided to start making a kit of assets to use. These assets would be what lead the rest of the UI inspiration later. I thought of two possible inspirations for the art style that we could go with. One inspired by ZZZ's poppy yet futuristic style and Cyberpunk 2077, with its simplistic, glowy interface. From here, I drafted up ideas inspired by both art styles, before the team reached an agreement that the more poppy style inspired by ZZZ was a better direction to go for the games overall visual style.

We were also planning on having the three different game modes included in the game represented with different colors. While designing, I took it upon myself to choose three colors with largely varying color values, so that regardless of your type of color blindness, a player would be able to easily differentiate the different game modes based on color. I have included these different color options we tested at the bottom of this project overview.

Full UI – Periodic Table Button Text Mode

- process -

WORKFLOW

Once all the pieces of the menu UI were done, the gameplay was ready to be touched up with UI art. From here, we were working back and forth on different parts of the project. While the engineers and designers were working on the gameplay, I could be working on the UI for the menus. Then, once the gameplay was in a workable space, I could work on the front end of the gameplay while the engineers were refining the games gameplay and working on the front end menus.

GAME UX VS WEB/MOBILE UX: FIGHT!

Although both boil down to making a user interface successfully, they demand very different requirements. Game UI must portray information without overwhelming or distracting from the game. They should compliment each other. Take Persona 5 for example, the game and the UI work together to make a fantastic experience.

- process -

DESIGNING A PERIODIC TABLE

Now since this is a chemistry game, it was really important for us to include a periodic table that users could refer back to. When it comes to choosing a design, there is a lot of variety in periodic tables out there, and quite a few of them feature different traits. Our client was no exception to having personal requests for the visualization of it. In the end, we decided the best way to recreate the clients vision as well as have full control of the look of the table was to make one from scratch. I decided to take to figma for this, however a tool like Illustrator would have also been applicable for this.

- reflection -

TRULY A FUN DIVE INTO CUSTOM UI

From creating a periodic table to designing a futuristic but colorful and fun design, this project had a lot of new firsts for me. It was a great experience getting to try new techniques and develop more skills in creating UI, and I think the final style fit well with the gameplay. We also got to create different colors of the level select menus to suit the gameplay modes that also took into account accessibility.

- green full saturation interface -

- green monochromatic interface -