How does it work?

A gross simplification of how the UX/UI process works

What is the difference between UX and UI design? Sometimes it’s hard to define. While they overlap in many areas, there are also aspects of each which are completely separate from each other. As a designer with expertise in both fields, it’s often my job to educate and inform clients and stakeholders to how the design process works.

 

 

 

 

Step 1. Discovery

What are you making? What are your requirements? Who are your customers/users? Let’s find out what your goals are and what you want to accomplish.

Step 2. Throw shi*t at the wall!

Let’s brainstorm and come up with some ideas! At this stage everything goes. You want a fully autonomous AI assistant? Customizable dashboard with animated avatars? Self contained app that predicts what the customer wants? Put it all on the list!

Step 3. Oops, we gotta clean that wall

Ok, so we have an idea of what we want and all the bells and whistles that will go into it. Time to start figuring out how you can do it all. How much time and money do we have? How many resources? This is often the most arduous part of the process.

Step 4. Where does the snout belong?

Ok, now we know what we can do and what we need. Time to start putting this thing together! Let’s start with some rough wireframes that can be tested.

Step 5. That’ll do pig

Let’s test this prototype! Oh, it turns out we need to add filtering options? Good thing this is only a rough wireframe that we can easily adjust. Back to Step 6 then!

Step 6. Pretty it up

Great, we’ve finalized all the functionality and placement of elements! Time to apply some style to this thing! Good thing we’ve got a style guide to work from! Right? … uh, right?

Step 6b. Make a style guide

Ok, again this is another gross simplification. The visual design and styling of a product can be just as involved as the previous steps. And often it is a very detail oriented task. To keep this short and sweet let’s just say this step is where visual designers activate the ‘art’ filter in photoshop.

Step 7. the Loop (aka Goto Step 1, repeat)

Sometimes things get forgotten. Sometimes we miss requirements. Sometimes customers change. The point is: we should always be looking to improve through iteration and that requires a constant loop of ideation and development.

A note about testing. Where does it fit into this process? Everywhere. We can and should test be elements and aspects of a design whenever possible. Do the users want personal information prefilled? Test it. Not sure if users want a drop down or slider? Test it. What color log in button resonates best with our audience? Test it. Testing is a great way to solve these design questions as it gives us direct data on what direction we should take as opposed to guessing and hoping for the best. Testing also does not stop when the product is shipped. I consider users interacting with the final product a form of testing. We should always be listening to the user, asking for feedback because most modern digital applications should not be treated as static items that never change once they are ‘done’. Think about some of your most used online applications: Gmail, Instagram, Amazon, etc. What did they look like last year or even 6 months ago? The point is, digital products are constantly evolving entities that adapt to the ways users interact with them and the surrounding social and political climates. 

 

And that’s about it! My process in a nutshell. There is one last thing that I would like to mention. My design philosophy (and tenet in life) is this: the only constant in life is change. Trust me, I hate change and I would love nothing more than to carefully craft a product which I can put out and walk away from. Confident that it is the best possible version that could ever be, and will be, designed. But alas, life is not so simple. Things change. Users change. And we must constantly evolve to meet those changes or risk falling behind and becoming irrelevant.