UI/UX Design
My college education has provided me with experience with designing interfaces for a variety of use cases. While most of these involve designing video game interfaces, I have also contributed to mobile and hardware interface projects detailed here.
Character Customization Menu
Game Design Project
This project focused on menu design for a video game customization screen. I was required to sketch an interface mockup and explain my design decisions, as well as a reflection following the design process.
Mockup
Design Intent:
My design is a video game’s character clothing selection system, similar to those found in Animal Crossing: New Horizons and Pokemon Sword and Shield. The system will have multiple pages of clothing options separated by the category of clothing (one page for shoes, one for shirts, one for pants etc.) Each page will show a preview of the pieces of clothing with an image and a title/description (no longer than a word or two). I think a well-designed clothing interface should allow the user to preview how the clothing selections will look on their character before committing to the choice and leaving the menu, so a preview of the current clothing selections will be featured front and center regardless of the current submenu the player is on. There will be the opportunity to rotate the character model preview, and the option to focus on the specific piece of clothing in question (zooming in on shoes, hats etc.) There will be no distinction or restrictions on clothing based on the character’s presented gender.
In terms of audience, the game in question is aiming to appeal to all ages. The audience is looking for a form of expression through clothing and the interface allows them to do this easily. Due to the wide target demographic, the interface needs to be simple enough for a child to understand, while providing enough depth to keep adult players interested. This results in a delicate balancing act in terms of how much information is shown at any given time. The complexity of the interface will lean on the simple side, but will hopefully be interesting enough to adult players. Depending on their play style, the player’s amount of time with this interface will vary wildly. The clothing customization menu is entirely optional, though, so the design team does not have to worry as much about the users that do not really care about their character’s appearance, as they can skip the interface altogether. That said, it is still important to value the player’s time, and not include too many unnecessary animations or processes. For example, it would likely put off players if an animation of their character going in and out of a changing room played every single time they changed a piece of clothing. Flourishes are nice, but letting it get in the way of an efficient interface is bad design.
Since this is an interface for a game that does not include in-game purchases, the intent is not tied to any financial motive. However, in order to make the game appealing to potential buyers that value character customization, a wide variety of options must be made available, and the overall interface must be appealing. The character customization could be a significant part of the marketing, showing characters wearing many different kinds of clothes. Therefore, it is in the best interest of the company funding development to represent different types of styles and clothing options, regardless of whether or not they profit from purchases past the initial sale of the game.
Design Analysis:
This design emphasizes usability while also taking aesthetics into consideration. The first thing I did was choose a color palette, one that was vibrant enough to depict a wide variety of clothing options while being muted enough to serve as a menu that does not overwhelm the user. After selecting a few candidates on lospec.com, I eventually settled on this 32-color palette:
I chose this palette specifically for its variety. Other palettes focused on one or two different hue shifts, while this had enough contrast in its content to not only provide a good base for the menu design, but also provide a consistency between the colors used in the clothing designs. With a few alterations, I could see using this palette for an entire game’s aesthetic direction.
Focusing on the composition, I decided early on to split the interface in four parts: a navigation bar at the top, a control explanation bar at the bottom, a preview of the character wearing the chosen outfit on the right, and the actual clothing selection menu taking up the majority of the space. This decision allowed me to fit all the necessary information on screen while remaining cohesive and simple. To this end, managing whitespace was important. I resized the clothing icons themselves up and down trying to find a good balance between having enough information on one screen, and having enough space between each selection so as to not overwhelm the player. This was especially important considering the wide age demographic of the game. Ultimately, I settled on 28 options per screen, with icons below the clothing options clearly showing the player there are several screens of options available while showing them which screen they are on in comparison to the rest of them.
Hierarchy is defined by color in this design. Thanks to the large range of contrast in the chosen palette, I was able to select two main tones to differentiate menu sections. The lighter tone is used generally as a background as featured in the light gradient behind the clothing selection section of the menu, while the dark blue color is used in the top and bottom bars. This clearly defines where one section stops and the other starts, while retaining unity by only really relying on two different tones. A slightly darker shade of the tan background color is used behind the player preview to differentiate it more from the clothing selection part of the interface.
Repetition was very important as the purpose of the menu is to allow the user to select something from a list. As such, each selection is given roughly the same amount of screen space so as not to subconsciously coerce the player toward one selection over the other. Neutrality is important in this kind of design, it should be up to the player what they choose to wear without input from the designer. The repetition is only broken for the other parts of the menu, due to the changes in color it is very clear where one part ends and the other begins.
In terms of alignment, the design is both horizontally and vertically aligned. The top and bottom bars have their content aligned to the center of a specific section rather than the center of the entire interface, a choice that I think specifies what exactly the shown controls will do to affect the menu. For example, the controls that control the rotation and focus of the player preview are centered below the preview itself, implying that they affect specifically that part of the interface. Similarly, the top bar that controls what type of clothing the user can select is centered above the clothing selection section. The clothing selection portion itself is arranged in a grid, which was just the logical choice when needing to present several items at the same time with the same level of significance.
I had issues with proximity, as this was the most difficult part of the balance of too much vs. too little information. I think I found the balance, but I think I leaned closer to too much than too little. That said, I think it’s definitely a decent balance of proximity.
Unity and balance are closely related in the case of this menu. The design is unified by its color palette, and the balance roughly splits the screen into thirds, two thirds are taken up by the clothing selection portion while the last third shows the preview. The bars on the top and bottom balance each other out and provide a frame for the rest of the design. There is symmetrical balance horizontally, but the way the screen is split into thirds makes it so the balance on the vertical axis is asymmetrical.
Design Reflection:
Reflecting on the design process, I feel that proximity and balance were my two biggest issues. I did my best to figure out what the best balance between too much and too little information was, and while I think I did a good job I could see how users could have an issue with it. There isn’t much indication of how to move on to the next page of selectable clothing, but adding arrows in the sides of the section would have pressed the selections together even more. Finding the balance was a challenge. In addition, on smaller displays the icons on the bottom bar could be too hard to see to be helpful. The easiest part was creating a cohesion, as utilizing a unified color palette provided a strong groundwork with which to design the rest of the interface. The font was chosen to get across the idea that this was a hand-drawn interface and was meant to emphasize this through its hand-drawn aesthetic. In terms of goals for the future, I think I focused too much on designing a cohesive singular screen and didn’t as much take into account the fact that this is an interactive, multi-screen interface. I think I could solve this problem by designing a diagram of how all the pages go together before even thinking about the layout of a single screen.
Music Streaming App Design
Intro to Design Project
This project for my Introduction to Design class was a group project mockup for a music streaming app. The design takes the core design for music streaming apps codified by apps like Spotify and Apple Music, and tweaks the core design to better fit our specific use case.
This assignment required us to create mockup images for our app as well as a short written section in which we were to explain our design decisions, in addition to a self-critique written following completion of the project. These are shown below:
Analysis of Design:
Whitespace:
In our design, we used whitespace to ease the audience’s eyes from the screen’s content. Providing the audience with a break from the eye will make it more enjoyable for the user to use the app over an extended period of time, or while exercising and the user cannot stop what they are doing to try and comprehend the text and information on the screen. We chose to make our whitespace blue not only for originality, but because blue creates a calming sensation.
Alignment:
Our app has everything aligned to make it look organized and simple to use. We knew if the user wanted a quick and easy way to get around the app whether it would be to find their playlist, a new song or podcast, or anything else, we would have everything lined up neatly so that users can feel at ease. A simple block by block pattern is used to avoid confusion and keep everything tidy.
Typography:
Our app was made to compete with the leading music apps in the industry so we knew that typography would help our app stand out from the rest. We downloaded and used a custom font for the logo’s to prevent the audience from recognizing it anywhere else. We want our audience to see the orange “Odio” and immediately comprehend that it refers to the app that we made. Something I would like to point out is the different kerning in each logo. In the full logo, the kerning is much more together and compact to create a professional and minimalist feel whereas in the more simple logo, the letters are spaced out more so it can be interpreted at first glance.
Balance:
To maintain a professional-appearing application, we paid close attention to the balance of objects in terms of size, color, and even in things like symmetry. We avoided falling into the habit of making everything the same size and arranged in the same way to prevent a boring app. By switching up the proportions of text blocks and categories, we were able to create a uniform interface that remains professional and effective.
Color:
For color, we knew that we couldn’t replicate or use colors from other media apps like Spotify, SoundCloud, or AppleMusic; so we came up with our own color palette that we would abide by as we created our interface. We used natural and warm colors to create a soothing and relaxing vibe that will please the audience as they launch our app. We used contrasting colors to group things together or separate things from one another to avoid confusion and provide easy navigation. We knew that using a bunch of different colors would distract our audience so we aimed to keep everything uniform in terms of color and avoided wandering away from our chosen palette.
Proximity:
We executed our design well in terms of proximity. The spacing between displayed music is uniform and equal to promote professionalism. The banner at the top of the screen is not too close to anything else and remains big enough for easy use.
Repetition:
We effectively repeated elements of design to create patterns so that our audience finds it easier to navigate throughout the app because related things share things like color and shape. When we wanted to make a certain tab or text block stand out, we would break the existing patterns by switching up the layout, shape, color, or proximity of said block to attract the audience’s eye.
Design Process Reflection:
While working on our design, we found it very easy to split up the work according to our strengths and give feedback to one another. As a group, we were able to communicate our ideas through a google document and created an in depth sheet of exactly what we wanted. This included the write up, design ideas, fonts, color pallets, and overall layout of our design. It was very easy for us to stay organized throughout this process. The design was straightforward to create because we were able to get inspiration from many existing music streaming sites. One challenge we faced was picking the right color pallet. This was important because it would set the overall mood for our design. We sampled over twenty different color pallets until we found the perfect one. Another challenge we faced was designing and naming our brand. It was difficult to create a simple but straightforward design to let the user know what our design is about before opening it. We decided to go for the Japanese translation of audio which is "odio".
We learned a lot from designing our own interactive interface. First is that teamwork and communication is crucial to success. We all gave each other constructive criticism that enhanced our final design. We learned that everyone has a different outlook. This was helpful because we were able to see flaws in our design and fix them. The google document we had was successful in splitting up the work. In addition to having a shared google document, we also had a shared google drive. This was useful for us to upload our own custom designs from photoshop and mockups for our final design.
Designing for mobile interfaces represents an entirely different problem set than designing for more desktop-oriented devices. Priorities become visual clarity and the ability to interact well with a touch interface. Clarity in text becomes essential, and icons must be large enough to be recognized and used properly on a touch interface. Through a mobile design philosophy, the most important segments should be the largest. This is reflected in our design by making the icons for albums and playlists large and clear. In addition, the “currently playing” section is always present at the bottom of the screen. The most significant challenge regarding the design was deciding how much information to show at once. Finding the balance between overwhelming the user and not showing enough was difficult. Ultimately, we decided on a 3x3 grid to display on one screen, cutting off part of the final row to demonstrate the fact that the user can scroll down to see more. I feel that we may have fallen short on visual consistency, we chose a specific color palette but I feel the unity could still be stronger. Additionally, the visual hierarchy could be clearer, it might have been a good idea to make the bottom bar more clearly separate from the rest of the interface. This design process was a learning experience in terms of designing for mobile, something we had not had as much experience with.
Existing Design Critique & Revision
This project was a critique and revision of an existing design that was intended to get us to look at user interfaces that we previously took for granted with an analytical eye utilizing the design concepts we learned in class. I chose to analyze the character select screen of Mario Kart 8 Deluxe.
Character Select Screen
Vehicle Customization Screen
Analysis of Original Design
Overall, the design has some glaring flaws that could have easily fixed with some slight changes. Considering this is a re-release of an already released game, the issues are all the more problematic, as they had the time to re-consider the UI.
The whitespace in the design consists of the scrolling blue background. The background feels slightly too active to really be ignored, and considering that Mario Kart is played by players of all skill levels, including those that may not be familiar with the game, it ends up being too distracting, especially to beginners that may feel overwhelmed. They could improve it by either making the background static or making the moving pattern more simple.
Hierarchy is difficult to follow in the center section of the character select screen, as the markers for the selectors are not distinct enough to easily identify. It’s hard to see at a glance which character you are currently highlighting. When playing on a smaller display like the switch’s built-in screen this becomes a significant issue. Additionally, I feel that the text representing the name of the selected character should be bold once the selection is confirmed. Other than that, it’s quite clear what is contained in what, especially in the vehicle customization screen.
In terms of alignment, the menus are symmetrically balanced right down the middle.If mirrored on the middle line, the composition would look exactly the same. This provides a pleasant overall layout. Symmetrical balancing is consistent over the entire Mario Kart series, and for good reason. It provides an overall layout that is instantly appealing.
I really don’t have problems with the proximity in this design, the character icons are far enough apart to distinguish where one ends and another begins.
As far as repetition goes, the design for each player’s selection is consistent, with different colors differentiating them enough. In the vehicle customization screen, each player has the same options which simplifies the design.
The typography is basic and uninteresting, which I suppose is better than it being more frantic and hard to discern. That being said, I feel they still could have done something more interesting with the design.
The unity is well-designed. The icons and fonts are consistent and the overall aesthetic is appealing. Nothing appears out of place.
The color design is overall average, nothing really stands out about it other than the slight problem of the text of the blue player’s selection being slightly harder to read than the others. Any brighter shade of blue may blend in with the background too much, but any darker would just emphasize the issue.
The balance of the smaller UI elements is where most of my issues with this design come in. In my opinion, emphasis is put on the wrong things. As previously stated, the background already complicates things and contributes to the issue of not enough clarity of where the player’s selection icon is. It blends into the background elements and given that it’s perhaps the most important part of the design since the player needs to know what character they currently have selected, that is a significant issue. Simply putting a border around the selection icon to highlight it further would have done wonders to remedy this. On the vehicle customization screen, not enough visual weight is given to some of the most important portions of the UI, being the control options. The control options for each player are located underneath the vehicle stats, which is a menu that already required the player to press a button to show up in the first place. Hidden this way are important options that dictate how the kart controls, such as whether the steering is controlled via motion or joystick, and whether or not the auto-drive mechanics are enabled. Why such important icons are so small and missable is beyond me.
Revised Character Select Screen
Revised Customization Screen
Analysis of Redesign
This redesign consisted of a few slight changes that, despite their subtlety, fix nearly all the issues I had with the initial redesign.
The most significant change came to the balance. In moving the controller options to the screen before and no longer hiding them behind a menu that requires a button press to show up, more weight is given to them. They remain the same shape and size, but simply removing them from the more cluttered real estate of the second screen does wonders to make them more clear. If I had to redesign this again, I would probably make them bigger now that I think more about it.
Additionally, the weight given to the icon that shows what character is currently selected has been increased, by changing it from 4 chevrons to a full outline. Again, this change is subtle but does a lot to make the current selection more clear.
Alignment has been changed to allow for the controller customizations to fit while still making it clear which settings belong to which player. Upon reflection I could have made the backgrounds of the settings color-coordinated to the nametags of each player, but I decided against it as I felt that would interfere with the unity of the piece, something that was already quite effective.
Whitespace has had a subtle change (not clear in the static images) of slowing down the background scrolling. This has the effect of decreasing distraction from the main content while still making it relatively exciting to look at.
In terms of color, I attempted to make the font on the blue background clearer, but in improving the contrast this ruined the aesthetic unity. I still think there’s a better way to do this, but I was unable to figure it out.
In redesigning this I realized that actually implementing a design is much easier said than done. It’s much easier to critique and not do anything practically, but in reality actually implementing the design even in a mockup is more difficult than I gave it credit for.
In the future I think maybe designing an interface from the ground up might work better for me.