UX UI: MY PROCESS

General / 29 December 2017

The approach for each project is relatively the same. With the main difference being the time I join the project. For example, if the game already has some screens and user flows implemented then I like to play through it and see where the blockers are. I'll do a fresh new user flow to minimize pain points with the goal to create a quick intuitive design for the end user. This will keep the user engaged which is what we want.

Depending on the type of project the process for the user experience design may be a bit different as each platform and goals can determine the flow. Here are four core questions I like to ask that will help me see the entire project as a whole.

What kind of project are we working on?
FPS, HOG, RPG, SPORTS, CARDS, etc.

The setting/theme of the game?
This will give us an idea of art direction for UI style.

The device it will be played on?
This will give us an idea of user interaction, art style, layout, etc.

Features of the game?
This will help with figuring out hierarchy as a whole.

I find the best way to work is to be integrated with the development team this includes all stakeholders, designers, engineers, producers, etc. The goal is to produce a scalable interactive experience that does not disconnect the user to engage players throughout the core loop. When done effectively this will directly increase monetization and player retention.

User testing is an important piece that can determine the success of the product. I typically like to do this after user flows are completed and implemented which includes all call to actions to minimize redundancy.

Here are the five phases of development I follow.

Phase 1

Research: Find similar products currently on the market to improve product experiences.

User Experience: I look at the entire product as a whole to determine user flow and how the product will function. Typically using UX app such as Adobe XD.

Visuals: Experiment and create multiple visual styles for the front end which includes motion graphics.

Phase 2

UX/UI Design: At this point, I create several layouts that can remain consistent throughout the screen flow and apply the approved user interface visuals to the layout.

Animations: Create screen loads and transitions within the engines limitations. It is preferred to work within the engine limitations to avoid surprises.

Phase 3

Implementation: I prepare all user interface assets to be implemented within the engine. Depending on the current project and engine I will build each screen with the engine. (Unity, Unreal, etc).

Phase 4

User Testing: To evaluate player experiences and polishing the product.

I make available a style guide with UI state changes and hex color codes to keep the UI/UX consistent as the product grows and develops further.

With every passing year technology and processes change. My goal is to adapt to the current needs of the project and continue to expand my skills to meet the demands.



UX Has Changed: Let's Catch Up!

General / 22 December 2017

My passion is user experience design and the production of user interface aesthetics. I am driven by user experiences which helps me to develop an intuitive interface design.

I definitely do both, and I enjoy doing the user interface aesthetics once I am happy with the prototype and user experience. Once that is done, then I focus on layout and create the visual art assets. I take a practical approach. When done properly both are enjoyable.

When I started in web development in the early years I focused on the website logic using paper mockups. From what I can recall 16 years ago the terminology for UX never existed. That term was later coined by Don Norman while he was Vice President of the Advanced Technology Group at Apple. In his own words: “I invented the term because I thought human interface and usability were too narrow."

Back then we simply called it web development or graphical interface design. It isn't until much later that terms such as UX, UI, IA, IxD came to be. As I kept focusing on the entire product as a whole my primary concern was how the product feels. My goal has always been to deliver a great experience from the flow and feel, getting the user to where they need to be in a quick intuitive design. If they have a great experience, they’re more likely to come back. If my design confuses the user as they try to navigate through the product then they will likely not come back and may not spend on your product.

Creating the user interface design prior to figuring out the prototype is a painful process and makes creating the visual interface a none enjoyable experience. Once the prototype through tools such as Adobe XD is fleshed out with user testing we can proceed with the asset creation to really make the product sing. Without focusing on user experience design prior to user interface creation you are really putting the product at risk for failure.

As is found on Wikipedia “User experience design (UXD, UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional human-computer interaction (HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.”

If you are like me you wanted to develop user experiences for various studios and the only way to do that was to learn and improve user interface aesthetics, motion graphics, including learning how to code and adapting to the studio's needs. Things have changed a lot over the years with new terminology separating UX, UI, IA, IxD so it's time to catch up with these terms.

User Experience Design: UX

User experience design (UX, UXD, UED or XD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.

User Interface Design: UI

Author and founder of Adaptive Path — a user experience consultancy, Jesse James Garrett, defines interface design as being all about selecting the right interface elements — like text, buttons, text fields, color-coded lists, etc — for the task the user is trying to accomplish and arranging them on the screen in a way that will be readily understood and easily used. The goal is to make the user’s interaction as efficient and simple as possible.

Information Architecture: IA

Information architecture (IA) involves the way a website/app is structured and how the content is organized. The goal is to help users find information and complete tasks. “In other words, information architecture is the creation of a structure for a website, application, or another project, that allows us to understand where we are as users, and where the information we want is in relation to our position. Information architecture results in the creation of site maps, hierarchies, categorizations, navigation, and metadata. When a content strategist begins separating content and dividing it into categories, she is practicing information architecture. When a designer sketches a top-level menu to help users understand where they are on a site, he is also practicing information architecture”- from uxbooth.com

Interaction Design: IxD

“Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world.”- from ixda.org

Is it possible to do all of these on any given project? Yes, it definitely is. There are many overlaps. At times the UX won't change until you do the UI and are inspired by new solutions that the UI presented to the UX. This goes with interaction design as the device you are developing for will determine how you do both UI & UX.

For example, on a mobile device the call to action, button styles, states changes, among many other variables will be developed completely different than sitting at a desktop computer with a keyboard and mouse or navigating through your favorite game console.

Prior to working on a new product I always ask these three questions. What will the product be used on? What genre/style is it set in? What is the goal?

Answering all three questions will determine how everything is done for  UX, UI, IA, IxD as a whole for the product.

Thanks for reading!