Major Project - Prototyping

With my previous projects before this having tight timelines and little room for iteration and experimentation, I originally began the creation of interfaces in Figma premtively, starting out with Mid-Fidelity wireframes.

However, consultation that followed after, as well as the reminder that I actually did have time to spare, allowed for me to stand back and reevaluate what I wanted out of an interface. Thus, I scaled them back to the most basic point.

Low Fidelity Wireframes

In creating Low Fidelity wireframes, I began with a rather uniform layout, though one that was inspired by the concept I had previously made.

Unsatisfied with this section, I then created another set, this time with a more unique button placement. I did this to help hone in on the maximalist feel I wanted my interface to have, to have a unique display of buttons while still being consistent and easy to navigate, in accordance with the Law of Similarty, where the "human eye tends to perceive similar elements as a complete picture, shape, or group, even if those elements are separated".

I also received feedback in regards to the layout, where it did not seem consistent. It was through this feedback that I learned of Figma's layout function, where you can set how many columns and rows you want, in order to more effectively lay out your interface. I found this a huge help, as I was previously relying on Figma's rather inconsistent guide lines.

Finally, I put this together by attaching it to the other interfaces. Additionally, I whipped up a hypothetical interface for Dialogue, Main Menu and Level Select, though I understood that I planned to make these 3D interfaces, instead hoping to get a general feel for their layout all the same.

I then put out a Google Form, which my friends very kindly filled out.

I recieved rather substantial feedback on this, with the layout of the Main Menu, Level Select and Dialogue being praised for its readability. The pause menu did recieve some criticism, such as a lack of understanding as to the interface's function, the font being excessively big and the wheel being confusing to people. One point I took from this was to make the wheel exclusively controlled by the arrows, as the option to press the buttons in the back led for many to be confused as if there were correlation between the two, which is a justifiable confusion due to

I also recieved some feedback on my general prototyping skills, as many complained the grayscale made the black text too hard to read, allowing me to see that I should use a varied use of colours.

Beyond this, I then went on to Mid-Fidelity wireframes.

Mid-Fidelity Wireframes

Where I recieved feedback on the lack of clarity around the wheel, I decided to research into different ways for the next prototype to ammend that, as a few people expressed their dislike of the choppiness of the original prototype.

After finding a Figma-based reels UI Artist by the name of Zander Whitehurst, I figured out how I could use smart animations to create a carousel-like effect. This is through renaming the widgets.

Having used the research from my pre-production, I tried to give it the atmosphere of a band poster, with the 60s groovy psychedelic being what I most closely referenced. Having not established a style guide at this stage, I did more experimental versions of my mid-fidelity wireframes.