UX/UI Process

Design and Methodologies


Introduction

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.


PLAN YOUR ROUTE
AND DO YOUR RESEARCH


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

FOCUS ON SIMPLICITY


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.


ORGANIZE AND ASSEMBLE


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.


INFORMATION ARCHITECTURE


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.


DESIGN, PROTOTYPE AND ITERATE


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

VALIDATE AND EVOLVE


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

DEVELOPMENT AND USER TESTING


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

OBSERVE, LISTEN AND LEARN …AND WATCH FOR BUGS


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.


INDIVIDUALS PERCEIVING
A UNIVERSAL EXPERIENCE


Conclusion

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.