UX/UI Process

Design and Methodologies


The road to defining an effective and functional user experience can be a journey. Depending on the complexity of your requirements, there is usually more than one way to reach the desired destination. We’ll discuss some of the more common practices, their intended purpose and what each process should yield.

These are “the basics”. This is not a comprehensive outline of the UX process but more of a general guideline. I’ve found it to be useful when explaining my process to clients and to help manage timelines and expectations.

Discovering Opportunities

Icon made by Freepik from www.flaticon.com is licensed by CC BY 3.0

Discovery is an essential part to developing any product. It can show you where you’ve been and take you where you want to go.


Icon made by SimpleIcon from www.flaticon.com is licensed by CC BY 3.0

An open-eyed approach to any journey is often best — to mitigate risk and avoid common pitfalls. Understand your stakeholders, ensure marketability and establish revenue streams.

User Experience Cartography

Icon made by SimpleIcon from www.flaticon.com is licensed by CC BY 3.0

A journey worth taking, is a journey worth remembering. Wireframing is an important tool for quickly and effectively recording and communicating discoveries.

Photography courtesy of News International Pension Plan


A pencil is
a powerful tool.

It offers the quickest route from one’s mind to paper; allowing you to capture ideas on-the-fly.


Icon made by Freepik from www.flaticon.com is licensed by CC BY 3.0

Throughout the initial wireframing process, you may accumulate a lot of paper work. Discard (just in a drawer) any unnecessary ideation and organize your new found treasure.


Icon made by Situ Herrera from www.flaticon.com is licensed by CC BY 3.0

Wireframe assembly is done primarily using software. Use any tool you’d like to accomplish this task. Assemble one screen at a time and include detailed instructions about it’s functions and flow.

Impressed App Information Architecture
Bon Appé Consumer Site Information Architecture

Keeping it simple.

Use design patterns and primitive shapes where possible to help speed things up.


Icon made by Elegant Themes from www.flaticon.com is licensed by CC BY 3.0

Design and prototyping builds on our existing wireframe foundation. Here we’ll create our production quality user interface. Build in small segments — review, iterate and prototype often.

Photography courtesy of blogs.rsa.com


Testing, testing, 1–2–3

Prototyping is essential to ensure your product’s flow and interface are accessible and intuitive.

Icon made by Freepik from www.flaticon.com is licensed by CC BY 3.0

UI Kits are often built through the aggregation of assets as the design process evolves. It’s important to maintain and update your collection as you progress.

PayQuad UI Kit


Icon made by Dave Gandy from www.flaticon.com is licensed by CC BY 3.0

Having completed wireframing, information architecture, prototyping, flow and design we can begin development. Development is where the magic happens, where all the parts and pieces play and work together.

Impressed iPad and iPhone Apps


Icon made by Freepik from www.flaticon.com is licensed by CC BY 3.0

Prepare a list of actions and behaviours to watch for while testing. These will help you focus on, which functions need improvement and, which functions work well. Be observant and watch for the unexpected.



Thanks for taking this journey with me through the UX process. I’ve illustrated some of the basic ideas that are commonly utilized to achieve a hearty and healthy adventure. Each section outlined here is easily interchangable, reversible and repeatable. The work outlined here is intended to give you a brief glimpse into UX Project Work and — through my personal experience — how to begin and execute some of the processes.

The ultimate goal with any product is to create an experience that is universally accepted by all (ok, let’s say most) users. An experience should be natural, intuative and provide users with feedback; and most importantly it should be enjoyable and convenient to use.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.