Return

Redesigning UI

For User Testing

This assigment doubled to see how well I could handle developing assets that match up to an existing game's style, while also gathering user feedback and using that to correct an existing game. I chose Super Mario Maker 2, as it has a creative UI setup that would be fun to replicate but also has a reputation for being somewhat troubling for people to understand on a first viewing.

The backgrounds were ported straight from the original game, alongside the maker tools from the item selection remaining, as this test was just for redesigning the UI rather than the full game. Everything else though was made by me from the ground up.

These were new pieces made from the ground up to act as the icons for the copy tool and multi selection that lacked one in the base game. I named them "Copy Cat" and "Multi-Krab" respectively to play off the other names.

Preexisting buttons also got reworked so they were more visually clear for what they did. This went from simple changes such as UndoDog now having an undo tongue, to the Save Tool being redesigned to reflect an actual save icon.

I did more than just add to the current UI layout for Course Maker though, as I also took those same assets and made a second layout that favoured a touch screen setup. This was not intended to replace the other layout, but rather to have both present in the same game to optimise the work layout for either type of player.

Nintendo is not known for having full customisation in their games, but on occasion they do include multiple choices for players to use to play their games. This takes inspiration from TellTale games on the Switch, which will switch you to the layout used for their games on PC if you hit the touchscreen, only mine is connected through the press of a designated button.

The level editor was not all that got touched though, as I also gave some changes to the main menu. Not much was changed directly, as most feedback gave criticism to the course maker, but what I did change was streamlining the setup so everything was now on one selection screen rather than divided up into two.

To look at additional changes made for the UI, alongside some deeper explanations as to why I made certain objects as they were, you may find them in this video:

Software Used

Figma

Used this for a canvas to apply all of my UI assets into for showcasing images.

Inkscape

Designing all UI Assets.

Adobe Premiere Pro

Used it to edit the full video

What I gained

The first half of this project was all about doing User Testing, which I cannot share on here for privacy, alllowed me to learn to conduct interviews with potential customers and work through a multitude of feedback to determine what they would want to see to overall improve games I would make. The design side itself, I further improved on my base knowledge for developing User Interfaces by working replicating the feel of an existing game, as it is important for me to be able to follow a set in stone style when working in a group based project with multiple visions at the base.

There was also the work done towards the video at the end of the project, as I did a lot of work to ensure the video made everything clear so people would understand what was going on and why, while also being appealing to listen to. That editing I can see get applied to help with marketing games I work on in the future.

Return to Projects

Page updated

Google Sites

Report abuse