UX: Games To Web
I spent years creating UI for games I have always been proud of but had no way of showing my process. I worked on refining the UI in games, my resume, and my business card but the website was the one thing that always felt disconnected. I had no real way of showing my process or really showcasing at first glance that I do UI in everything! So I took up redesigning my website and documented my process which I use in all my design work.
March 28, 2019
First lets go through a quick before picture of what my website used to look like:
As you can see, it does not scream UI DESIGNER! I used squarespace as a quick way to just display my work but quickly I came to the realization that it's not just about what is displayed, but how as well. As a UI Designer, it is important to design everything even if it isn't in games. It shows a dedication to your craft. I was never satisfied with it so I took up the task of overhauling the entire product, using my development process to do so.
Old Landing Page
Old Project Page
The first step in any product I am working on is research. Pages and pages of research! I spent weeks going through different portfolios online, collecting pros/cons of the designs and compiling it all into a format easy to reference. Additionally, I met with industry professionals, reached out online to other UI designers, and collected people’s thoughts and reactions to the websites I visited in my research. The research I did for weeks before even touching my website’s design allowed me to gain a ton of information on what UI/UX
professionals are already doing and focusing on.
Performing this step is an important way to prevent mistakes.It is a vital part of building a strong foundation in any project I work on whether it be websites, business cards, resumes, or games! Researching helps you filter great and not so great ideas that people have tried and tested. As you go through and gather more data your product becomes clearer in your mind. It filters out a lot of iterations before you start your own unique design.
After I do my research I produce wireframes. For this project I used MockFlow to create wireframe samples for every page. This was a long part of the process which is good before it was early on! The wireframe will serve the rest of the project and since it is early in development it is really easy to change. Using the research gave me aspects and ideas to work with and piece together creating my own unique product. The goal of the wireframe is to find the user flow and organization of all the information I needed to show.
Wireframes is the first step to having a product and immediately after creating it I start test. I show people different pages, ask them to navigate it, and gather all the testing data to make quick iterations. Again, it is important for me to get the wireframe to a great user flow state because if the boxes and lines can't communicate information then the high resolution will fall.
Wireframes
Once I decide the wireframes are pretty much set and things look like they are grouped correctly and the flow of the pages feels natural I go and make the high-res mockups. High res versions of wireframes is a vital step before actual implementation because a lot can and will change here. Once you start putting color and images on the page you find things get lost. Information is unclear and some layout decisions do not make sense with assets or the palette.
As you can see a good amount of things changed from the wireframes to high res. I had to do a lot of different versions of the high-res mock ups until it got to a point where I found the art + information worked together. Having a brand before hand with an established font, palette, and style helped speed this process along but it was still a lot of iteration and, again, testing! For other products this is the point where I would work directly with an artist, going through my wireframes and creating the mock up together since I do not have the best art skills!
High-Res Mockups
After research. After wireframing. After testing. After high-res. After testing again. After all those steps it is finally time to start development! By the time I get to development I have a clear and tested vision ready to be created and tested even more! There isn't much to say or show about this step because you are looking at and using the website right now!
What I will go over is the obvious changes and problems going into development for my website. The first real issue I had was after all the design was done I decided to switch from Squarespace to Wix. This decision was mainly due to knowing Squarespace wasn't going to allow me the functionality and flexibility to create my own template and layouts. I already created all of my designs however so as I am developing a LOT of things changed. During the research step I should have pivoted my website builder early on so my designs could match the functionality Wix had. Another problem was not knowing how to program websites! When designing I knew what I wanted but always designed with a back up plan due to knowing this limitation. Luckily, Wix did provide a lot of the functionality I needed and my back up designs came into play when it didn't.
Some of these issues also occur in game development related to technical difficulties or changes in requirements for things like HUD or menus. That is why it is always important to create a flexible and stable design that can change organically!
Design Process Screenshots
This was my first time entering the web field of UI design and I can say it was a rewarding and exciting experience. The most interesting aspect was that much of my process did not change. I use the same design flow and steps for all the products that I work on. So even though this was the first website I designed it was easy to translate my game development UI/UX practices to the web. There were some hills and valleys when going through it, but at the end I created a product that really showcases my skillset, work, and brand!
