VOLUME 10 | ISSUE 10

TECHNOLOGY
YOUR HANDY GUIDE TO EVERYDAY

To

UX Design

1 Introduction to UX Design 5 Design Principles

2 The UX Design process 6 Design Philosophies
3 Modelling users 7 Resources you’ll need
4 From defining to designing 8 Future of UX Design

A 9.9 Media Publication

 FAST
TRACK
to

UX DESIGN

powered by
CHAPTERS
UX DESIGN
OCTOBER 2015

06 Introduction to UX Design
What is UX design exactly? What are it’s origins? Find out the big
picture in this chapter.
PAGE

16PAGE
The UX Design process
A comprehensive walkthrough of designing UX

31 Modelling users
Know thyself. Or better yet, know thy end user
PAGE

41 From defining to designing the product

Now that you know what your users want, how do you give it to
them? These three steps will take you closer to your finished
PAGE
product

EDITORIAL Sahil Dawka Associate

CREDITS
The people behind this book

Anand Narayanaswamy Art Director

Executive Editor Anil T
Robert Sovereign-Smith Copy Editing
Infancia Cardozo Sr. Visualisers
Managing Editor Shigil Narayanan
Siddharth Parwatay DESIGN Sristi Maurya
Sr. Creative Director
Technical Editor Jayan K Narayanan Visualiser
Jayesh Shinde Baiju NV
Sr. Art Director
Writers Anil VK Sr. Designer
Ashish Panigrahi Pradeep G Nair
Kshitij Bedekar
 CONTENTS 3

54 Design Principles
Now that you know what your users want, how do you give it to
them? These three steps will take you closer to your finished
PAGE
product

64 Design Philosophies
Ever wonder why designs of a particular era start looking similar?
We’ll tell you why.
PAGE

77 Resources you’ll need

A grand vision is nothing without the tools necessary to implement
it. With that in mind, this chapter lists some of the best books,
PAGE
videos, software, and courses you need to check out in order to
become a master of UX Design.

87 PAGE
Future of User Experience Design
Let’s look at what the future holds for User Experience Design

VOLUME 10 | ISSUE 10

TECHNOLOGY
YOUR HANDY GUIDE TO EVERYDAY

© 9.9 Mediaworx Pvt. Ltd. To

OCTOBER 2015

Published by 9.9 Mediaworx

No part of this book may be reproduced, stored, or transmitted in any form
UX Design
or by any means without the prior written permission of the publisher.
COVER DESIGN: PETERSON P

October 2015
UX DESIGN

Free with Digit. If you have paid to buy this Fast Track from any
source other than 9.9 Mediaworx Pvt. Ltd., please write to
[email protected] with details
Free With Digit October 2015

Custom publishing 1 Introduction to UX Design 5 Design Principles

If you want us to create a customised Fast Track for you in order to 2 The UX Design process
3 Modelling users
6 Design Philosophies
7 Resources you’ll need
demystify technology for your community, employees or students contact 4 From defining to designing 8 Future of UX Design

[email protected]
10 A 9.9 Media Publication
4 INTRODUCTION

Interaction
unlimited
‘B
eauty is in the eye of the beholder’ and ‘the first impression
is the last impression’ are two popular adages that need no
introduction to be honest. We’ve all heard them umpteen
times. However, this month’s FastTrack topic has a lot to do
with both the above expressions. Allow us to explain…
From the dawn of basic intelligence, it has not always been the fastest,
highest or strongest that has prevailed – especially in the world of tech-
nology. Many a times it has been the best designed or best presented. One
of the reasons why the world adores and swears by Apple products is
their attention to unflinching detail when it comes to designing products
and systems that just work effortlessly and intuitively without forcing
their users to scratch their heads in frustration. And the essence of this
we experience in a myriad things we do on a daily basis, unbeknownst to
us – from interacting with the television, computer, ATM machine, smart-
phone, reading a train time table or even going through a candidate’s CV.
In the non-analogue world, if there exists a digital system that’s for mass
consumption, chances are that it’ll have something unique that differenti-
ates itself from its competitors – the User Interface. Having said that what’s
most important about designing interfaces for human interaction? It has
to be more than aesthetically appealing, it has to be more than functional,
and it has to be more than intuitive to create the best first impression. This
is where User Experience or UX comes into the picture.
Confusing? That’s why the need for this booklet.
In here, we start off with a much needed introduction to UX design
concepts (form vs function and all that jazz), moving on to breaking down
the design process into various stages, including how to design an interface
 INTRODUCTION 5

to its intended user base and how do you get from defining to designing a
product around your concept. In between we also analyze historic design
principles and philosophies to see if there’s a holy grail that binds UX
design through the ages – if there’s value there, we’ve tried hard to find it.
If this FastTrack has piqued your interest into UX design, there’s an
entire chapter on recommended books, tools, and other resources. In
short this book is a revelation and a guiding light to anyone looking at
advancing their knowledge in the design domain.
Happy reading!
6
CHAPTER #01

INTRODUCTION
TO UX DESIGN
What is UX design exactly? What are
it’s origins? Find out the big picture in
this chapter.

U
X Design is often described as today’s burgeoning field in all
things tech. Though talk about UX is often interspersed with
terms such as UI and Usability, each define a unique niche, and
are just facets of what constitutes the overall User Experience.
UX is inherently user-centered, and thus UX Design is collection of research
methodologies and design strategies, principles and philosophies that pave
the way for modern elegant efficiency.

The Emergence of UX
A mere decade and a half ago, the most advanced technology available to
consumers was the mighty Desktop PC, which people used to maybe play
some games or send e-mails over dial-up connections. Fast forward to today,
the world around us is inundated with technology, even the local paan-wala
is often seen chatting away on his smartphone. Moreover, technology con-
tinues to penetrate deeper into every facet of our lives. All our appliances are
becoming intelligent, and our facilities moving online. It’s common experi-
 INTRODUCTION TO UX DESIGN 7

ence that there seems

to be an app for just
about anything! Today
almost all businesses
have a technological
aspect, even if just a
website. As the main
aim of businesses is to
attract a large number
of consumers, UX has
lately become a really
big deal, to say the least!
To tell the story of
UX however, we must
begin with Usability.
According to the ISO
definition, Usability is
“The extent to which
a product can be used Edward Bernays
by specified users to
achieve specified goals with effectiveness, efficiency, and satisfaction in a
specified context of use.” Usability emerged when the number of businesses
in the domain of technology began to saturate. Soon, everyone had access to
similar technologies, and no one had a clear competitive edge. The business
leaders asked, “How can we make our product better?” but didn’t get con-
vincing answers. This served to drive technology-oriented product develop-
ment and design towards user-oriented development and design.
As far back as the World Wars, Edward Bernays had begun to invent the
field of Public Relations, and developed the methods of swaying the masses
via ‘engineering of consent’. Businesses couldn’t improve their products
that much over their competitors, and so they used these techniques to
focus on the perception of their product rather than the product itself. As
time progressed, various branches stemmed and grew thicker and well-
defined, such as Marketing and Usability. When the Users got the spotlight,
those concerned with Usability asked questions like, “Is the user achieving
his goal? What can we do to help the user achieve his goal faster and with
less effort?” Many businesses started considering Usability to be the most
useful metric, and started making designs and decisions accordingly. Some
8 INTRODUCTION TO UX DESIGN

even trusted Usability enough to scrap multi-million dollar projects based

on this metric (most notably, cosmetics giant Avon, who ditched four years
and $125,000,000 based on a Usability study).
As time passed, and progress became exponential, these designers and
product developers being human, naturally got bored and wanted to take
things to the next level. This time they asked, “Does the user like using our
product to achieve his goal? What can we do to make it a more pleasant
experience?”
Thus was born User Experience Design. Which brings us to the meat of
the matter..

UX Design- The Meat Of The Matter

User eXperience (UX) encompasses all that a user experiences when inter-
acting with your product, service or brand. This includes everything, whether
they like the background color of your website, the speed with which it loads,
the speed with which they receive their delivery, how the delivery guy talks
to them, even what the user feels when looking at a billboard bearing your
logo! The experience itself, however, is a stream of consciousness in the brain
of the user, and is always a subjective perception of your product, be it an
application, website or anything! Thus everything that contributes to this
experience is your design, whether it be purposefully planned or not. Even
though users don’t actively remember, or even think of, the whole experience
of interacting with your design, the experience does leave a mark. Unless they

The basic form of user centered design

 INTRODUCTION TO UX DESIGN 9

have a malfunctioning amygdala, any human being feels something after an

experience. Your users are all human, and at the very least your design should
make them feel like using your product or service again, rather than drive
them away from it. However, UX design isn’t about creating or designing that
experience itself, rather it is about designing the framework that allows for
the experience to take place. It is for the people, and by the people, as you will
see. You, as the UX Designer, will merely be the enabling medium through
which the magical process happens. That was a bit of an exaggeration, but
the fact remains that it doesn’t matter what you think will work or look good,
because testing your design will soon change that. UX Design is a continuous
process, a design cycle by design, as we will see in the forthcoming chapters.
As long there are consumers, there will be businesses, and businesses
will make products and services that the consumers will interact with, to
use. Interaction will occur at customer touch points, the majority of them
being the interface of the product. Furthermore, the experiences that we are
so concerned with, will always occur at these interfaces. So why then, is this
Fast Track about UX design, and not UI (User Interface) design?

UX != UI
Many design professionals, when asked to describe their work or profession,
interchangeably use the terms UI and UX. Maybe they think they know what
they are talking about, but clearly they don’t. Is it just nomenclature? Where
are they going wrong?
In short, semantics. User Experience design and User Interface design are
not the same, just as Muay Thai and Mixed Martial Arts are not the same.
They do not mean the same things. User Interface designers deal with the
visible parts of the product that the users interact with. They design the
framework for the input and output of information, basically everything that
you actually see, or click on. This sounds a lot like UX, and that is because it
is true that they share a lot in common. UI is a part of UX, but UX is so much
more. Like UI, UX also has facets of Human-Computer Interaction (HCI),
Visual Design, and Information Architecture. However, UX doesn’t only
deal with the interface, it deals with the relationship between the customer
and the business/organization as a whole. UI is different from UX in nature,
objective and scope. UI meets user needs, but UX has to align user needs with
business needs. UI creates (the visual elements of) the product, UX creates
(the emotional perception of) the brand. Just as in the case of Muay Thai
and Mixed Martial Arts, UI is but a tool in the arsenal of UX. Interface is a
10 INTRODUCTION TO UX DESIGN

UX design and UI design

subset of Experience. If a product looks good but is a pain to use, it has great
UI and bad UX, whereas if it works great but doesn’t look too good, the roles
have changed (bad UI, good UX). They are different, but both are important.

UX != Usability
Though it may appear that UX was born out of Usability, they too are separate
concepts. By focusing on Usability one tries to make the product easier to
use, but that does not necessarily translate to the product becoming better
to use, which is the domain of UX. Also, a good looking interface (good UI)
doesn’t necessarily imply ease of use or user-friendliness (Usability). A good
UX takes far more effort to create than good UI and Usability by themselves.
Thus Usability, UI and UX are all different and not always causally related.
Making a good UX design is about more than just making the design Usable.
It should also make the design pleasureable, seductive, and if possible, down-
right addictive (sounds a lot like *ahem* time). Sometimes the design needs
to made less Usable in order to have a better user experience. After all, in
certain contexts people do get satisfaction from discovering things on their
 INTRODUCTION TO UX DESIGN 11

own. Context is king. You cannot create the experience, but you have a say in
forming the context. Most importantly, good UX design ensures that using
the product has meaning to the user, which will only happen if they form an
emotional connection, which in turn will only happen if every aspect of the
design is rooted in the rationale and needs of your users. Read Chapter 3 to
understand how to understand the user’s needs and rationale. If we compare
a user using a product (to achieve a goal) to a road trip, we can metaphorically
say the following:
Usability is about making the journey short, smooth and as straight
as possible.
UI design is about putting display screens on the windows and windshield
so that the journey looks awesome (maybe even going through a wormhole..).
UX design is about making sure you have fun during the journey, by
showing you whatever you would like to see, and letting you choose which
road you want to take, be it a plain highway or winding mountain pass. (For
consistency, imagine it was a self-driving driving, thought controlled car.)

Assembling a UX Design
Much like a Desktop PC, a great UX design can be assembled from a few high
quality components. These are:

1. Psychology: Your users are people, and people have complex minds. Being
a person yourself, you should know! Since you are designing for their subjec-
tive experience, you have to focus on their needs, their motivations and their
expectations, every step of the way. Consider their level of prior knowledge,
and keep in your mind a representation of what would be on their mind. Use
this to see how you can condition them or form habits. Above all, make sure
you are designing according to their psychology, not yours!

2. Usability: This aspect will be readily apparent to your users, especially

if the design is confusing and hard to use. Don’t use your own logic, try to
mimic the user’s intuition such that even an unnamed ignorant celebrity
could use it. Try to pre-empt user-made mistakes and plan your design
around them. Give the user as little to do as possible without taking away
control or interest. Use conventions and conform to widely adopted stand-
ards if that is what the user subconsciously expects. Lastly, base all your
decisions on solid research (as you will learn in the coming chapters) and
not your own logic!
12 INTRODUCTION TO UX DESIGN

3. Design: Ditch your personal notion of art and aesthetics, in UX design, it

is only about how it works. Functionality and feel are the stars of the show,
style and fashion aren’t even in the picture! Make the visuals as intuitively
obvious as possible. Capture and channel the user’s attention. Be consistent
in your design and follow the other design principles, as you will learn.
Make the design trustworthy and test users to know if you are conveying
the intended message in the intended manner.

4. Copywriting: This is an often overlooked ingredient of UX that can make

a big difference. UX copy is different from the normal copywriting that you
use in advertisements and on websites to convey the brand message and
company image. UX copy is only concerned with being functional, saying as
much as necessary in as little words as possible. Short and sweet. A good UX
copy sounds confident and motivates the user. Now go out and write some!
(After you’ve read the rest of this Fast Track..)

5. Analysis: Often this is the weakest spot of most UX designers, as it is also

the most powerful weapon, so sharpen your analysis skills well. Analysis is
done not just on the subjective user research, but also on the objective data
collected after the first run, as they each answer different types of ques-
tions. Be careful to be honest with yourself, and avoid the confirmation bias,
where you are just using the numbers to prove yourself right. Look for bad
results as well as good results, and use relative numbers to track the effect
of changes over time.

UX Design - The Myths of the Matter

1. The User comes first.
While this is one of the key ideas of UX that is thrown around so much that
it borders on propaganda, there is one missing fact. The business goals come
first. Though you aren’t being asked to pick sides, you have to align the ful-
fillment of the user’s goals with the business goals, not vice versa. After all,
if the business doesn’t sustain itself, how will you get paid? And if you don’t
get paid, how will you delight your users?

2. Ask the Users what they want.

The problem with this idea is summarized in a quote by the late, great, Henry
Ford. “If I’d asked my customers what they wanted, they’d have said a faster
horse.” You can’t directly ask your users what they want, because people
 INTRODUCTION TO UX DESIGN 13

don’t know what they want. You need to find out what even they don’t know
that they need.

3. You don’t need to test a good design.

Granted, you may be talented, vastly experienced, and you know what you’re
doing. NO ONE is good enough to create a great design the first time around.
Even if you got lucky, the users will change over time (as all humans do) and
then you’re out of luck. Testing is absolutely necessary!

4. UX design stops at the edges of the product.

You probably already know the magical feel of posh packaging. Extend that
to things like customer service. That is all a part of the user’s experience too!

5. Testing is done at the end.

Testing can be done at any time during the lifecycle of the product, even
before the prototype is ready. Have your sketches and wireframes ready and
head over to a few users and ask them to interact with your design while
you simulate the outputs for their chosen input. Testing early helps catch
potential errors as soon as possible, saving time, money and effort. It also
helps the product evolve faster.

6. Be original with your Design.

While being original is a good thing, there are many advantages to using well-
established designs. The design elements are probably the result of testing
for usability and users may be familiar with the design and it’s layout if it is
a popular convention. Also, nothing is truly original anyways, so don’t try
to re-invent the wheel.

7. People will use your design the way you thought they would.
It would be more fun to have you learn the folly of this thought from practice,
but we are kind souls, we seek to educate. When users aren’t clear on the pre-
scribed ways to use your product, they will begin to use it in unconventional
ways. Sometimes, they will use it unconventionally just because it was the
only thing available that they thought could solve their problem. This is a
good thing, embrace it.

8. UX Design is a step in your project.

Successful UX design needs to integrate the business goals (not necessarily
14 INTRODUCTION TO UX DESIGN

monetary) with the user’s goals, and as such it should be included in the
project as early as possible, right from creating the business model. It is
an iterative and continuous process that never really ends and will help in
making changes every step of the way.

9. White space is wasted space.

Hardly any artists leaves a portion of his canvas blank. However, on the
internet, it is a different story. White space is powerful, it is a strong framing
tool. It gives a sense of space, and can be used to direct attention to relevant
text and pictures. It is “an active element, not a passive background.” to
quote Jan Tschichold. Use white space to enhance your visual layout and
position your brand.

UX Design shall set you free

As of now, UX design is just about beginning to sound like black magic.
However, it is even better than black magic, because UX design isn’t only
about design for technological products and digital interfaces. UX design
can be applied to anything in life, just like quantum mechanics, and we
aren’t even kidding. In quantum mechanics, like in life, everything is uncer-
tain. There are many possibilities, until we measure a particle to obtain
an outcome. The important part is that the outcome of the measurement
also depends crucially on the basis taken for the measurement, which is
chosen by the observer (you). To put it simply, the observer plays a major
part in how reality forms, and that applies to life as well. Similarly, you
can use UX design in just about any facet of your life that involves other
people interacting with something you made. All you have to do is get into
the mind of the other person (the user) and try to imagine the world from
their perspective, though that is much easier said than done. You can even
user test over time by trying out different variations and noting which
gets the best results. You can apply UX design to your homework, your
presentations, your CV (curriculum vitae), or even to your personality
if you’re being particularly ambitious. Be warned, that would also mean
changing your personality according to what you want other people to feel
when they interact with you. In essence you are manipulating your Self
just to manipulate others’ perception of you. Though you aren’t radioac-
tive (hopefully), be careful you don’t decay! Puns aside, even if you aren’t
a UX designer, you can learn the tools and techniques in this Fast Track
and apply them in your life. Here is a way to use UX to slightly mess with
 INTRODUCTION TO UX DESIGN 15

a person’s behaviour. The next time you are talking to a friend (who talks
a lot), give a slight nod every time he/she says an ‘s’ sound. Then notice the
frequency with which those sounds occur, it should rise. Whatever you
do, your work definitely interacts with people in some way (else no one
would be paying you for it) and you can use UX design to make it better,
even if your work is writing fiction!
16
CHAPTER #02

THE UX DESIGN
PROCESS
A comprehensive walkthrough of
designing UX

Y
ou can take the horse to the water but you can’t make it drink.
With UX design processes, you can certainly increase the
chances! Now that you see the big picture of UX Design, it is
time to delve into the actual process. What are the steps of the
UX Design process and why are they necessary? What does a UX Designer
actually do, and why do they do it?

Understanding Goals
As a UX Designer you will encounter two main types of goals User goals
and Business goals.

Business Goals
Everybody does things for a reason, and that includes organizations and
companies. Businesses set goals for measuring success, and keeping eve-
ryone on the same page. The reason they want to develop the website, appli-
cation or product is to achieve those goals. Business goals can be a variety
of things - Money (the most common), Propaganda or Brand Enhancement,
or acquiring a new User Base. The specific type of business goal will greatly
affect your strategy on how to make use of users achieving their goals.
 THE UX DESIGN PROCESS 17

User Goals
As long your Users are people, they will be in want of something, and usu-
ally that is what your website, application or product is offering. Often,
there may be things that even they don’t know they want, but they want
when they see it. Whether it is social connection and recognition or even
purchasing used cutlery, you need to identify the User goals, because that
is the minimum you have to give them in order for them to be Users of your
product in the first place.

The UX Designer’s Goal

The UX designer’s goal is to successfully align the business goals with
the user goals. This should work in a way that the business benefits when
the user reaches his/her goals. If the goals are not aligned then there are
two possibilities. If the users are achieving their goals, they may be happy
using your product or service but it will still not be a success for the busi-

A Basic Process
18 THE UX DESIGN PROCESS

ness. If the users aren’t achieving their goals, then you have no users and
obviously no success.
Moreover, you have to design within a context, such as technological
or resource limitations that provide a constraint. Not to mention, during
the whole process of UX Design, you must communicate effectively with
the client or stakeholders, as well as the various members of the team who
may be playing very specific roles, such as the programmers, UI designers
or copy writers.

The Basic Process of UX Design

UX Design always begins with Research, and ends with Research, with a
little bit of Design in between. A UX designer must be involved in the devel-
opment process from the start, while conceptualizing using the requirements
of the client and assembling a capable multi-disciplinary team. This is the
Analysis phase. This is accented by some field studies to get some real world
info on potential users that will help decide on a design strategy, along with
creation of user profiles, use case scenarios, et al. This will help in the next
phase which is the Concepting and Design phase. Using the information
gained so far, the team brainstorms the working and features of the product.
This is accompanied by the creation of lo-fi prototypes and other deliverables
(sitemaps, wireframes, mock-ups) which are useful for usability testing
and some more user research. Next comes the Implementation phase with
some real world usability tests of the almost finished product. Even though
the product will forever be ‘almost’ finished, we move on to the next phase,
Deployment, once the usability objectives are completed. The final product
is deployed and more user feedback is collected which is used to further
improve the product in successive iterations or in the form of updates. All
of these stages consist of particular methods and deliverables which we
will now discuss in detail.

The Basic Process of UX Design: In Detail

Since this is a Fast Track to UX Design, why not picture yourself as a UX
Designer already! This will make it easier and more literally like a Walk-
through. The deliverables start with a Capital Letter..

Analysis
You have just taken on a project from a client, so the first thing you do is
meet with them. Once you have set the vision you need to get yourself a
 THE UX DESIGN PROCESS 19

Card Sorting - Bringing order to chaos

team of competent professionals, unless you are the master-of-all trades

Swiss-Army knife of software/web development. Next you should conduct
some formal Stakeholder Interviews, so that you can gain further insight
on their goals and decide on the Key Performance Indicators (KPIs). The
KPIs are just established criteria that will help you measure your success,
like milestones of progress towards strategic goals (or it can also be a refur-
bishing of operational goals). The next part is the Field Studies that can be
in the form of Surveys, Focus Groups or User Interviews, that give you the
raw data for assembling your user profiles (Personas), which is covered
in Chapter 3. You can sift through the (hopefully) large amounts of data
using techniques like Card Sorting, which is writing down related pieces
of information on cards and then physically grouping them into categories
based on the information on them.
As a rule of thumb, the more comprehensive your research, the better
your product is likely to be. The Personas that you end up fabricating in
turn help with creating a Customer Journey Map or a User Story. A Cus-
tomer Journey Map is a visualization of the progression of touchpoints
as the user uses the product or service and the motivation behind the
decisions, while a User Story is almost the same thing, but documented
20 THE UX DESIGN PROCESS

in words rather than visually. Additionally, you can draw up an Eco-

system Map, if the company you are designing for already has various
technological products, to see how the current project can add to their
value, or leverage their existing user base for a better start. You should
even do a Competitive Audit, which is basically comprehensive research
and analysis of any and all competing products in that market. This will
allow you to compare your product with theirs on a feature-by-feature
basis. Moreover, you can capitalize on any shortcomings or opportuni-
ties you might discover in that process. You can familiarize yourself with
the industry standards and have the opportunity to innovate at the same
time. Now it is time for a comprehensive Value Proposition, which is an
opportunity for the whole team to decide on the product - mainly who
is it for and what it should be. It is the intersection of your customer’s
needs and what your product is going to offer. Finally all that’s left to do
is a Task Analysis, using the features decided on in the Value Proposi-
tion. The Task Analysis documents the required information and actions
needed to perform each Task that a user can perform to achieve his/her
goals. This wraps up the Analysis phase and as a checklist, you should
have physical documentation of at least the Usability Goals and Objec-
tives, some User Profiles, and User scenarios (in the form of a User Story
or Customer Journey Map) and the Task Analysis.

Brainstorming - planning the plan

 THE UX DESIGN PROCESS 21

Concepting and Design

Now that you and your team have a general but firm idea of what the product
should be like, it is time to Brainstorm the exact features and designs that
communicate the intended experience to the Users while providing the
expected functionality. At this point you can create a Moodboard, which is
a collection of pictures that convey the ‘feel’ of the product. The Moodboard
is also useful to confirm the intended communication (to the users) with
the client. Next, it will be helpful to sketch out a few Storyboards so that
the programmers and designers can empathise with the users and get a
virtual idea of real-world usage.

Drawing a Storyboard

After everyone on your team has a concrete idea of the functionality

and thus, the features required for the users to accomplish certain tasks, it
is time to create a User Flow, which is basically a visual representation of
the actions the users have to take while performing those tasks. This also
gives a rough idea of the organization of the site, which can be used as a hint
while designing the Information Architecture later on. This is a good time
to finalise on a Features Roadmap, which is a diagrammatic representation
of the intended features and evolution of the product. Now it is time for a
22 THE UX DESIGN PROCESS

Wireframe, which is a visual schematic of the various pages or screens

that the user can interact with, their key elements and also their hierarchy
(Information design, Interface design and Navigation design respectively).
It is discussed deeply in Chapter 5. The Wireframe, being a low-fidelity
(possibly paper) prototype, roughly displays the arrangement of content,
roughly demonstrates the interface, and roughly captures the navigational
flow and information architecture of the website or application, although
that is covered by the Sitemap later on.

A Comprehensive Sitemap

Actually, why save it for later, make the Sitemap in accordance with the
Wireframe, since it is an essential deliverable that defines the information
architecture of your application or website. Some Use Cases and Scenarios
will help further refine the Wireframe, as they are meant to document
detailed usage in every conceivable circumstance, making sure that no angle
of product use is missed. Now for the first time, it is time for a Usability Test,
which involves sitting with a User and asking them to perform tasks using
the low-fidelity prototype (the Wireframe) and their imagination. You can
ask them the most important questions that you can think of, and especially
make note of the tasks they couldn’t achieve. The feedback you get should
be used to redesign the product by revisiting any of the previous steps if
necessary. Next, create a higher fidelity prototype like a Mock-up, which
 THE UX DESIGN PROCESS 23

contains as much of the design elements as possible and also some of the
functionality. Once again, it is time for more Usability Tests.
Be careful not to prompt your Test subjects as the Mock-Up is supposed
to contain all the visual elements, and thus should convey the message or
functionality to the User. If you find that the User is in need of prompts,
conclude that your User Interface is in need of redesign. Keep Testing and
Redesigning. You can even use tools like Eye-Tracking software to see if your

Prepare to be doing this.. A lot!

visual design successfully guides the user’s attention as you planned, or

even to visualize their scanning or reading patterns. High-fidelity prototypes
can be created to demonstrate the function of the product, which might be
useful to show progress and confirm satisfaction with the client. Once you
have successfully tested your best prototype, document your Guidelines
and Standards and create a Design Specification so that you don’t have to
do all that research again. On to the next phase!

Implementation
In this phase your team builds the actual product, which should be a piece
of cake after all the prototypes that must have been made. This is accompa-
nied by a Heuristics Analysis and a Content Audit. The Content Auditing
process is basically listing all the content available on your website. The
24 THE UX DESIGN PROCESS

Heuristic Analysis evaluates the product features and design according

to Nielsen’s well-established design principles. Again, follow this up with
a Usability Test.

Deployment
After the product is launched, conduct Surveys of your users and do addi-
tional Field Studies to gauge the real-world usage of your product. If any
mistakes in the design of the User Experience become apparent, revisit the
previous phase and remake the final product. You can also use analytics tools
to get quantitative data on your product usage. Once again, do a Usability
Test to check if the product fulfills all the Usability Objectives from the
Analysis Phase. You can never do enough Usability Tests. Remember, the
product is forever ‘almost’ finished.

Software Development Methodologies

Any industry, being large scale, must be appropriately managed to ensure
there is no compromise or variance in quality. That is why we have industry
standards. They provide a framework for creating products consistently
and reliably. Before the software industry grew to its current size, in fact,
before the seed even sprouted, there was the hardware industry. Along
with the hardware industry, there were its standards. When the software
started booming into a full-fledged industry, they just adapted and adopted
the standards of the hardware industry. Of course, this changed over time
as industry processes evolved, but let us not get ahead of ourselves. The
standards are defined by various phases or stages of development, and
expected outcomes or criteria that define the beginning and ends of the
various stages. The standards for creating software are in general known
as Software Development Processes, which are considered to be a subset
of the Systems Development Life-Cycle.

Waterfall
Waterfall development is named so because of the linear flow of water in a
waterfall. This methodology has clearly demarcated phases and the process
always and only flows from one stage to the next, in a linear fashion. It is
considered the more ‘traditional’ approach, probably owing to its similarities
to hardware standards. It was also promoted by the United States Depart-
ment of Defense in their publication of project standards, DOD-STD-2167A
in 1988. The different activities are popularly categorized as : Require-
 THE UX DESIGN PROCESS 25

The Waterfall Model

ments, Design, Implementation, Verification and Maintenance. Although

sometimes the different stages are also divided into: Analysis, Design,
Implementation, Testing, Documentation and Execution, and Maintenance.
(Notice that these are the basic steps of production that any methodology
has to follow at some level.)
It is a planning oriented methodology as a lot of emphasis is placed
on deadlines, time schedules, and budgets. Having all of this information
beforehand is favourable for the client as it boosts the client’s certainty.
Moreover, in the case of an unfortunate incident such as a designer quit-
ting the job, he can easily be replaced and the new designer can carry on
where he left off, with everything being clearly laid out at the beginning of
the project. However, waterfall development is a very rigid process, being
so strictly sequential. Changes to the design can only be made at the design
stage. Any mistakes or bad planning at the top end of the waterfall trickles
down to the end and so there is basically no room for error, which is why
this process is accompanied by a lot of formal documentation as well as
strict and frequent audits and reviews. Moreover, the testing phase is near
the end of the sequential process, and so the discovery of bugs (let’s face it,
no programmer is Godlike) often happens at the last moment, causing the
additional expenditure of significant amounts of additional time, effort and
26 THE UX DESIGN PROCESS

money. The additional expenditures are also incurred if there is a change

in the needs of the client or end users.

Iterative/Rapid Application Development

The Rapid Application Development methodology evolved from the Incre-
mental and Iterative Development methodology of the 1980s, by James
Martin in 1991. Though they are often classified differently, this general class
of methodologies has the same features and relies heavily on prototyping.
In terms of actionable stages, it contains the same basic ones, i.e. Planning,
Analysis, Design, Build, Test and Deploy. The major portion of the body of
the process (Analysis -> Design -> Build -> Test) is carried out iteratively,
over many runs, to slowly build the product. Since even the iterations occur

Rapid Application Software Development

in a linear fashion within themselves, this method is also referred to as

Iterative Waterfall Development.
The main objectives of this type of development method are to reduce
production and development time, deliver a high quality product that
satisfies the business needs, and achieve this at a lower total cost. As the
process centers around the evolution of the prototype, changes are easier
to incorporate at every level, and the mistakes of a cycle serve as a lesson
for the next iteration. Rapid Application Development is managed by a
Project Manager, who’s job is to ensure that the iterations are produced
within the delivery deadlines or timeboxes. When potential delays are
apparent, the requirements are reduced to fit the timeboxes but the deadline
is never extended.

Agile Development Methods

In February 2001 a group of seventeen software developers met at a retreat
in Utah with the aim of creating the one methodology to rule them all. There
 THE UX DESIGN PROCESS 27

was chaos in the software development methodology space (and even a

methodology called the chaos model), and they wanted to find the most
efficient way to clean up the mess by incorporating the best of the methods
such as Extreme Programming and Scrum Development, among others. It
was meant to be faster and incorporate change better than even Iterative
or Rapid Application Development. This resulted in the publication of the
Manifesto for Agile Software Development.

The Process of Being Agile

Agile Methods are very similar to Lean Methods, which originated

in the Manufacturing Industry (1950s, Toyota). They focus on breaking
down the software solution into its individual components or features.
These individual features are concurrently developed over many iterations
(called sprints) by cross-functional teams who are given free reign. In this
methodology, the clients are highly involved in the development, and the
teams also need to meet frequently in order to incorporate feedback. There
are mainly 12 principles of Agile Software Development Manifesto :
1. Customer satisfaction by early and continuous delivery of useful software
2. Welcome changing requirements, even late in development
3. Working software is delivered frequently (weeks rather than months)
4. Close, daily cooperation between business people and developers
5. Projects are built around motivated individuals, who should be trusted
6. Face-to-face conversation is the best form of communication (co-location)
7. Working software is the principal measure of progress
8. Sustainable development, able to maintain a constant pace
28 THE UX DESIGN PROCESS

The Scrum Process

9. Continuous attention to technical excellence and good design

10. Simplicity—the art of maximizing the amount of work not done—
is essential
11. Self-organizing teams
12. Regular adaptation to changing circumstance
The Agile Methodology works better than Waterfall methods at ensuring
customer satisfaction because usually, when it comes to software, the ini-
tially specified requirements are mostly off the mark. Though better than
it’s predecessor, Agile methods are still not as close to perfect as they would
like to be for their lack of user research and user testing.
This leads us to the latest, greatest methodology in recent years - a mix
of the best of both worlds (Agile and UX).

The Basic Process : In the Real World

From interviews with various real-life UX Designers, we can see the fol-
lowing structure and differences from the ideal process:

Analysis
The early stages of the project always involve collecting more information
about the problem. The actual activities performed by designers in this stage
are meeting with the client and identifying the product’s requirements,
benchmarking concepts and trend analysis. They seldom perform user
interviews, but writing User Stories is one of the commonly accepted attach-
ments to the Product Requirement document. User Stories are sometimes
created based on Personas which are almost never backed up with data.
Field Studies and Task Analysis are hardly used by any of the designers
 THE UX DESIGN PROCESS 29

that were interviewed. At least they were being truthful, but take this as a
negative example.

Concepting
This is the creative ideation part of the process. Despite the many digital tools
available online, paper rules! There is hardly any designer who doesn’t use
quick messy sketching or some other paper prototyping form at the early
stage of a design process! Designers utilize the information gathered in the
first step of the process and find a design worth refining. “This stage is about
artistic fury and creative explosion”, where designers must formulate the
intended User Experience.

Design
In contrast to the anti-documentation Agile approach where teams start
building features from the start, most designers create wireframes and pro-
totypes to document the experience and then hand them to the developers to
create. To put it simply, the UX designers create the form, while developers
and visual designers symbiotically create the matter. According to popular
opinion, Heuristic Evaluation is definitely out of fashion, and instead, expert
review backed up with a cognitive walkthrough is quite popular.

Approval
This is surprisingly an important part of the real world UX design process.
Research documents and deliverables are found to serve as persuading fac-
tors in the ‘buy in’ process. A lot of UX designers actually create a special
presentation to tell clients the design story, because it is extremely important
for them to buy into the product, both physically and psychologically. The
presentation shows stages of the process, deliverables and interactions, and
aims to give clients easy access to as much comprehensible information
as possible. If the stakeholders don’t ‘buy in’, then there is no product, no
project and most importantly, no pay.
These differences mostly arise from constraints on time, budget, and
other practicalities that come in the way of the ideal UX Design process. To
cope with this some people follow a Lean UX methodology that combines
some of the principles of Agile software development with UX design.
Ultimately, the aim is to create a product which people would want to
use, and these are all the ways to create. Everyone has their own constraints,
be it a budget, deadlines or even their own laziness, and it isn’t possible to
30 THE UX DESIGN PROCESS

overcome all of them. Thus take the best techniques that help you empa-
thize with the user, conceptualize your product, and communicate with
the stakeholder as efficiently as possible. There may be times, when all you
need to do is go from Wireframe to Mock-up to Prototype. Your selection of
tools and techniques depends on your judgement, and only you can judge
your situation!
Case Studies
http://www.freshtilledsoil.com/case-studies (/incantor)
 31
CHAPTER #03MODELLING USERS

MODELLING
USERS
Know thyself. Or better yet, know
thy end user

U
X design has one primary focus – the end user. It’s only logical
that the experience be designed with the end user in mind, since
it’s being designed for the end user after all. While the concept
may sound simple, this logic is paramount to all things UX. This chapter
will teach you about the techniques available to model your end users and
their behaviour for the purpose of implementing a successful UX design.

Understanding a Persona
In the world of UX design, a “persona” is not just a deliverable. It’s a fictional
character invented for the purpose of simulating the needs, behaviours and
limitations of the end users of a product, service or brand. To ensure your
UX is a good fit to potential customers, you must tailor it to the persona.
Obviously, while designing the intended experience, you must think about
who you’re designing for: that is the persona. The persona represents a group
of individuals who’ll use the product, service or brand in a similar way, or
who constitute a similar target audience segment. To predict usage in the
beachhead target market, at least one persona must be created (Although,
more than one persona is usually created for a product). As a deliverable,
personas are a way of manifesting a deep understanding of your customers.
32 MODELLING USERS

Since much of the research and sub-

sequent design changes hinge on this
archetypal fictional character, how the
persona is created is very important.
In this case, the last thing “fictional”
means is off the top of your head. It’s
quite the opposite, since the persona
has to represent all the different people
who will eventually use your product
or service. Therefore, each character-
istic and trait of your persona depends
crucially on the actual end users, and
as such must be fiction based on fact.
So yeah, a persona is a detailed fic-
tional character, whose raison d’être is
effectively modelling and communi-
cating observations from research on
a group of people. This will enable you,
the designer, to focus on one person
instead of the thousands of users that
the persona represents. This will pre-
vent you from being overwhelmed by Fill in the person
the notion of designing for the eventual
swarm of users. Personas are great for this very reason as they convert
this generic “everybody” into specific “somebodies”. Our brains are wired
to think in terms of people, and giving a face to the homogenous masses
utilises this heuristic to its fullest. It builds empathy for the end users.
Moreover, the whole market can be accounted for with a few personas,
which are definitely more manageable.
Personas also help keep the whole team on the same page, as they’re
the antithesis of ambiguous “end users”. They help build focus on the key
audience segments. By being specific, they ensure consensus on important
aspects and make disparities in views apparent. So, they greatly reduce
communication gaps and ideative dissonance between functionally dif-
ferent roles further down the product pipeline. Further, besides stream-
lining additional features and ideas, they also help measure effectiveness of
designs. Best of all, they inherently promote and provoke discussion about
end users, ensuring a deeper understanding of the audience. They’re much
 MODELLING USERS 33

easier to talk about as they’re referred to by names. For example, it’s much
easier to ask (and answer) “Will Alice be attracted by a red background?”
than “Will a red background be attractive to our end users?”
A persona, as a deliverable, is typically a character profile, which includes
a name, age, profession and lifestyle, i.e. specific habits, frequently performed
tasks, daily routine and other such key attributes that affect the usage of
the product or service.

Persona-fication
Do your research
There’s only one way to gather these facts, and that is to go out and collect
them. User research is the crux of persona creation. While there are many
ways to go about getting the data, sadly, there are no shortcuts.

Research methods
While there are many research methods, the utility of the information ulti-
mately depends on the quality of questions and number of people asked (as
many as possible). We can never stress enough on research. (So we won’t.
Studious children never result from nagging parents.) Here are a few tech-
niques for obtaining the raw material for your personas:
ŠŠ Surveys: Surveys involve form-type questionnaires that are filled out
by carefully selected individuals.
ŠŠ Ethnographic Field Studies: This involves studying relevant partici-
pants in their environment, where they would naturally come across or
use the product or service.
ŠŠ Contextual Inquiries: This is a cross between interviews and field
studies, where you can either simulate the context or ask the participants
to imagine them, after which you either ask questions (subjective data)
or ask them to perform a task (objective data).
ŠŠ Web Analytics: You could find a lot of answers to your questions – right
from usage trends such as the number of Google searches for a certain
keyword and the frequency of such terms to web trends.
ŠŠ Focus Groups: A few (3-15) participants are led through a discussion
and/or exercises, while they give written or verbal feedback.

Creating a Persona
Once you’ve done your homework (see previous sub-section), and done
it well, you need to pull a persona out of it, like pulling a silicon crystal
34 MODELLING USERS

At least as many people as possible

ingot from the melt (If you’re aware how the Czochralski process works).
To do this, first map out all the characteristics you could obtain from your
user research. Do this visually. Sticky notes are a great tool for this, as
they also make the next step easier – grouping those characteristics into
categories. Needless to say, these should be groups that pertain to your
product. For example, if you were creating personas for a weight loss
application, you might categorise groups based on “current weight” and
“intended weight loss”.
An important tip. The next couple of steps should definitely involve the
whole team because now you must decide the boundaries for the finalised
critical characteristics. These boundaries are important to prevent you from
going down the rabbit hole of trying to design for “everyone”. To continue
with the example of the weight loss app, let’s exaggerate it a bit to drive
home our point. It would probably not be a good idea if you made a persona
called ‘Jumbo’ and tried to design your application for elephants as well.
Now that we have that out of the way, let’s focus on the next step – placing
characteristics within your categories. This will be followed by developing
a few key personas, who need to be very realistic. In our example, within
the “current weight” group, you may categorise into “light” (40kg - 60kg),
“middle” (60kg - 85kg) and “heavy” (85kg - 120kg). Further, you may create
such groups within the “intended weight loss” group and start to create
 MODELLING USERS 35

Make sure they aren’t variations on the same persona

personas by cross-referencing. For example, a persona with a “light” cur-

rent weight will, of course, not be looking to lose a LOT of weight, and so
“light” current weight wouldn’t match with a high “intended weight loss”.
Get the gist?
If a few (2-3) primary personas don’t cover most of your target audience,
you begin creating secondary ones, but first make sure the primary ones
are good! They should be absolutely believable and indistinguishable from
real people for those who didn’t know better. Unless the persona feels like a
real person, you and your team won’t be able to develop adequate empathy.
Add a memorable name and an apt photo for your persona in the deliver-
able document, similar to the way you’d create a profile. The profile should
NOT have unnecessary details, like the name and breed of their fictional
pet dog, unless it’s relevant to the intended use of the product. Don’t modify
36 MODELLING USERS

Mental Model for Situational Awareness

the persona to make the design process easier. For best results, make the
persona fit the characteristics (from your research) and then make the design
fit the persona. Most importantly, different personas should have different
personalities, like different people! Not “Fat Alice” and “Thin Alice”. Yeah,
you get the gist...

Fun with personas

Role-playing
Think of the personas as real people, but also as your dolls, for whom you’re
building your doll house. There’s so much you can do using your cast of
personas. In fact, you can use them just about everywhere! Even in the real
world to find real people for user-testing.
Mainly though, they’re meant to guide your design process. Create a
storyboard (i.e. a visual interpretation of a scenario) starring your primary
personas, and you’ll see how your product/service fits into this persona’s
life. Create various scenarios that might occur in the day-to-day life of
your personas. Doing this may help you identify new design challenges
and product features. Have a lot of ideas for features already? Throw them
at your personas, imagining how they would use these features (and if
they’d even want to) in order to hone in on the essentials. Evaluate, test and
prioritise designs by having your personas interact with them, keeping in
mind these end users’ needs, abilities and habits. If it’s too difficult to do all
 MODELLING USERS 37

of this in your head, you can make things fun with some real life role-play!
Surely, someone in your team will have dreamed of the silver screen at
some point in their life. Ask them to get into the character of the persona
(once they’re familiar with it, of course) and throw some questions at them.
Or ask them to perform some tasks as the persona. You’re only limited by
your imagination here!

Creating Mental models

A “Mental Model” is a tool for understanding the underlying reasons why
a user does something, like go to a club or buy a pet. It examines the root
motivations of why a user would want to accomplish a certain task, by
visualising their thought processes in detail. They can be used within the
context of personas using your product, or even in the context of the daily
life of a persona, in order to identify design opportunities, or problems
that need solving.

Experience Maps
Experience maps are a type of deliverable that documents a use-case sce-
nario involving a persona. This map records the persona accomplishing a
goal using the product or service, in the way a process diagram would, but
in more detail. For example, a persona using an e-commerce application to
buy something. It includes all the “touchpoints”, that is, the moments the
persona interacts with the product or service, as well as their feelings at the
time – how they’re feeling, what they’re thinking and what they’re doing.
This can give insight into possible causes of frustration as well as ideas for
improving the experience.

Usage lifecycles
Lifecycles showcase the various stages of use/interaction with a product
or service. They’re important because after having used the product over
time, users’ goals and behaviours will change over time. The usage lifecycle
can be broadly categorised into five stages:

1. First Contact: This is when people become aware of or learn about your
service or product for the first time. They form their first perceptions, but
not first impressions as they haven’t yet decided whether they like it or
not. At this stage, the users only have to decide whether they want to try
the product/service or not.
38 MODELLING USERS

2. First-time Use: This is where users form their first impression. It’s the
most critical stage of the lifecycle, as the first impression dictates whether
your product or service warrants their time and attention. This is the
stage where your design must convert your first-time users into long-time
users. Of course, they make the decision, but your UX design will influence
them subliminally!

3. Continued Use: This is the stage for most “converted” users. By this
stage, they’ve already decided that your product/service is useful enough
for them to use regularly. Here psychological techniques like conditioning
play an important role.

4. Passionate Use: Users in this stage can almost be called fanboys. This
stage is characterised by high efficiency and increases in productivity. The
users are passionate about your product (and hence your UX design) and
spontaneously share that passion with others, as they believe it truly helps
them. Though it sounds like an ideal stage, it’s rarely ever reached.

5. Death: This can happen at any stage of the lifecycle, when users stop using
your product/service. It can happen for a variety of reasons: they found a
better or free version, the learning curve was too steep or the interface was
too cumbersome, among other things. Either way, doing a post-mortem
following this stage is a good way to gain insight into shortcomings and
necessary enhancements.
The behaviours of the personas must be considered in every stage of the
usage lifecycle and their needs and goals should adapt accordingly. This
process is commonly called “storyboarding”. It’s very important to consider
the lifecycle, because the same persona in a different stage has different
capabilities, needs and problems, and hence a different experience with
the same design. Therefore, they pose a different design challenge in every
stage, and each provides a unique context on its own. In essence, they’re a
different person at each stage!

Data
This data isn’t a repetition, or the results of User Research. It’s collected
post launch. Post launch of the prototype, at least. We’ve already seen how
the UX design process is a repetitive cycle – collecting data is towards one
end of that cycle.
 MODELLING USERS 39

Data measures the user’s behaviour in a quantitative manner. Simple

things such as: What did they do? What link did they click on? How many
times did they repeat a certain action? How long did it take from action A
to B? And so on...
There’s a very low margin of error since data is measured and recorded
by a computer. The collected data is quantitative user behaviour. It consists
of easily measurable and well defined criteria such as number of clicks, time
taken for an action, browser used, etc. Also, data from millions of people
can be measured at the same time, using analytics software. This greatly
reduces selection biases in a systematic manner. The more people measured,
the more useful and unbiased is the data!
Most importantly, data never lies. Users cannot influence data, though
they compose it. However, it’s us erroneous human designers who interpret
said data – and that’s where most mistakes happen, if any. Further, data
comes to us in the form of numbers, so we tend to treat it as just that. Not
much different from using a chainsaw to snip off some cellotape.
The numbers represent the behaviours of thousands (or however many
measured) of complex human beings. Do not fool yourself into examining
the causes for the numbers being what they’re, thinking you can comprehend
it to mean something. Rather, look towards the effect on the numbers, since
that’s the substance of the data. Use that to guide your decisions. As a rule of
thumb, the more important the decision, the more data you should collect!

Heatmap of terrorist informants across the globe

40 MODELLING USERS

Statistics to measure
Some common statistics that you can collect for your website are:
ŠŠ Sessions: The total number of visits to your site. This number shouldn’t
just be high, it should be higher than it was previously.
ŠŠ Users: This is the number of unique visitors to your site. The number of
sessions can give you an idea of the quality of your site and its stickiness.
ŠŠ Time-per-visit: The average amount of time a user spends on your web-
site. This is also an indicator of quality, but whether it should be high or
low depends on the purpose of the website. (ex - it should be high for a
content focused website, but low for a utility website)
ŠŠ Pages-per-visit: This is the average number of pages a user navigates
through per visit to your site. Again, whether the number should be
high or low is contextual.
ŠŠ Pageviews: Similar to the previous metric, this is the total number of
times any page was loaded on your site for any user.
ŠŠ Bounce rate: This metric measures the number of visitors that leave
your site without clicking on or doing anything.
Of course, each of these statistics must be interpreted according to the
context and your needs (business goals).

Tools to collect data

Here are some commonly used tools to collect objective statistics and data:
ŠŠ Analytics: Many companies (such as Google) provide software that
track everything a user does on your site. You can even design your
own criteria!
ŠŠ A/B Tests: This refers to launching two versions of the same product
simultaneously and observing how they fare in comparison. This may
or may not be a controlled test.
ŠŠ Heatmaps: Some vendors provide software that records the whole
interface while the user is interacting with it, thus you can later analyse
everything from scroll speed to where the mouse hovered.
ŠŠ Search logs: To know what’s not easily accessible on your site, look
at this simple, but powerful tool that lets you know what users have
searched for the most.
 FROM DEFINING TO DESIGNING THE PRODUCT 41
CHAPTER #04

FROM
DEFINING TO
DESIGNING
THE PRODUCT
Now that you know what your users
want, how do you give it to them?
These three steps will take you closer
to your finished product

T
he second step in User Interface (UI) Designing after identi-
fying the needs of the interacting user is UX Designing. This
design is based on the “how, who, when, where, why and what”
of user interaction. For example, if you’re designing a website for
a clothing line, which is women-centric, you’ll optimise the UI to cater to the
needs of the target women. So you’d want the colors to be a little cheeky and
vibrant, rather than bold and dark which usually appeals to men.
To enhance user interactivity and experience, we use three techniques,
i.e. Prototyping, Wireframing and Mockups.
42 FROM DEFINING TO DESIGNING THE PRODUCT

In the sections that follow, we’ll tell you how to use these techniques and
the basic differences between the three.

Wireframing
The first step in UX designing is creating a ‘wireframe’. A Wireframe is
simply a sketch of your UI before any kind of design elements or devel-
opment even takes place. In this stage, you’ll be creating a basic visual
representation of the elements – buttons, menus, footer, sidebar, etc – in
your interface to define the basic layout of your interface. You’re creating
this wireframe to arrange elements in such a way as to best accomplish a
particular purpose. A purpose that’s usually informed by a business objec-
tive and a creative idea. For example, if your objective is to showcase the
special products of the day, you’ll place these products on the homepage
of the website or in a banner near the app’s menu bar, which is the the best
way to highlight them.
The way you place the elements in an interface, which also includes
navigational systems, gives you an idea of the page layout and the way the
various parts of the website/app work together. This step focuses on what
a screen does, not what it looks like. Wireframes can be pencil drawings or
sketches on a whiteboard, or they can be produced by free or commercial
software applications. When you create a wireframe of any website or app,
you’re basically creating the UIs layout followed by outlines of shapes like
boxes of the most important pieces and colours (but only in grayscale, to
keep it really simple).

Why do we need wireframes?

The wireframe lays out the basic blueprint or skeleton of an UI. It may

A simple wireframe to highlight the basic layout of a UI

 FROM DEFINING TO DESIGNING THE PRODUCT 43

necessarily lack typographic style, color or graphics, since the main focus
points at this stage are functionality, behavior and priority of content.

Prototyping
A ‘prototype’ is a simulation of the final interaction between the user and
the interface. It might not look exactly like the final product, but will be
vastly similar.

Why do you need prototypes?

Disruption occurs when you encounter an idea that is outside of your comfort
zone. We have patterns of thinking that make us perceive the world in certain
fixed ways and our mental frame of reference highlights some things and
deletes other things from our awareness. Habits, frames of reference and
comfort zones are very familiar blocks to creative thinking. When others,
say, from a different industry, display new ways of thinking, and you think,
“Hey, that’s really cool!”, it provides a disruption and breaks open a new
way of thinking. However, don’t mistake thinking for innovation. You don’t
innovate through powerpoints, you innovate by building prototypes of the
product of service you intend to take to the masses.
Prototyping has several values. First of all, it makes your thinking
tangible, so you can see what you think, you can see what your solution
could be. Secondly, it provides other people with a chance to see what you’re
thinking and lets them contribute to it, even if it’s a digital model. Thirdly,
prototypes not only reveal what you know, but also what you don’t know.
They provide insight into the problem that you’re trying to solve and the
feasibility of the solution you’re trying to apply. This provides deep engage-
ment in the project to bring out the best of your creativity.

Prototyping can be done via two means:

1. Paper prototyping: As the name suggests, this method involves proto-

typing on a paper-based wireframe itself that has no digital interface. It
involves creating rough, even hand-sketched drawings of an interface to
use as prototypes, or models, of a design. While paper prototyping seems
simple, this method of usability testing can provide a great deal of useful
feedback, which will result in the design of better products.

2. Rapid prototyping: This is the formation of a scalable model of the

44 FROM DEFINING TO DESIGNING THE PRODUCT

A prototype of an interactive UI

product using a digital environment. It can be an interactive or non-inter-

active model of the actual interface.

Mockups
A ‘mockup’ is a realistic representation of what the final product will look
like. It’s used for demonstration, design evaluation, promotion and other
purposes. Mockups are basically functional prototypes built on top of
wireframes that go further into detail to show overall appearance of a design
including type and color choices, among other things. It provides at least
part of the functionality of a system and enables testing of a design. While
some people prefer to draw the mockups using graphic software, others do
it straight away in HTML/CSS. What matters is the goal of a mockup – to
show, as closely as possible, how all final appearances will be rendered.
The final interface can look exactly like the mockup, or be a variation of it
after version revisions.
 FROM DEFINING TO DESIGNING THE PRODUCT 45

Why do we need Mockups?

Mockups don’t have the resistance of low fidelity deliverables, which do
not allow user interaction and are much quicker to create than prototypes.
Further, due to their visual nature they’re effective for gathering feedback
about how users interact with the interface.

A mockup of a UI

Basic Differences Between the Three Techniques

Fidelity Use General Traits
WIRE- Low Documentation and Grayscale models
FRAME quick communication
PROTO- Middle to User-interaction May be interactive
TYPE high testing mostly or static
MOCKUPS Middle to Gathering feedback Interactive
high visualisation
46 FROM DEFINING TO DESIGNING THE PRODUCT

Tools to build your product

Now let’s look at the various free and commercial tools available to create
Wireframes, Prototypes and Mockups. Some of the UX designing software
are as follows:

1. Balsamiq: ‘Balsamiq’ by Balsamiq Studios is one of the more basic

software around for this purpose. We tested out Balsamiq Mockups version
3.1.9, which comes with a 30-day free trial. The interface is highly visual
and allows you to give rein to your artsy side (Sketch mode, which you can
switch off if you like). It comes preloaded with a wide array of widgets,
which can’t be customised much except for size and content. Balsamiq
lets you add assets from Flickr too. If you’re working in a group, then the
wireframing and mockup tool lets you upload the document to the cloud
to be accessible by other users.
Cost: $89 - Single use license
Link: http://dgit.in/DownBalsamiq

Balsamiq runtime interface

 FROM DEFINING TO DESIGNING THE PRODUCT 47

2. Pixate: Want to design only mobile or tablets apps? Try out ‘Pixate’. We
tested Pixate Studio version 1.7.0. It’s highly customisable and helps design
mobile, smartwatches and tablet apps. There are a bunch of preset resolu-
tions for popular devices such as the Nexus 5, Nexus 7, Apple smartwatch
and so on. You can also customise the resolution as per your requirement,
but there are no preloaded widgets available. You need to create your own
assets and add them to the interface. Pixate will help you add the required
interactions and animations to create the run-time interface of the app.
Cost: Free (Studio version), $5/month (Cloud sign up)
Link: http://dgit.in/DownPixate

Pixate runtime interface

3. UXPin: Don’t want to download desktop-based design software? Just

use ‘UXPin’, the cloud-based design tool which comes with a 7-day trial.
It has all the functionalities of a traditional desktop-based mockup tool
– from preloaded widgets to asset addition. The highly interactive “smart
elements” are the main highlight of this design tool. The smart element
feature lets you create complex, recurring element combinations once and
just transfer them to your prototype with the single click of a button as
many times as you want.
Cost: $19 per user/month (Basic), $29 per user/month (Pro)
Link: http://dgit.in/UseUXPin
48 FROM DEFINING TO DESIGNING THE PRODUCT

UX Pin runtime interface

4. Justinmind: Buying software is going out of fashion! So here’s a free

design tool for you: ‘Justinmind’. We tried out the Justinmind Prototyper
Pro Edition Version 6.8.0. It’s a complete Wireframing, Prototyping and
Mockup set. You can create high fidelity prototypes and simulate them to

Justinmind runtime interface

 FROM DEFINING TO DESIGNING THE PRODUCT 49

create fully functional mockups in Justinmind. While it comes preloaded

with a basic widget library, you can download more. It supports web pages,
Android apps, iOS apps as well as Google Glass apps. For enterprise users,
there are certain in-app purchases that allow them to collaborate via their
servers and synchronise their UIs. If you’re a team working on the same
project, then just share the document via the desktop application itself.
Cost: Free
Link: http://dgit.in/DownJustinmind

5. Axure: One of the most intensive visual design tools for UX designing
is ‘Axure’. If you want to create a complete and functional high fidelity
mockup of a web page or app, use Axure. We tried Axure RP Pro version
7.0.0.3184, which has a 30-day free trial. It has the basic preloaded web
widgets library. You can download more iOS and Android widgets and
even templates. Its interface takes time to get used to, but it lets you use

Axure runtime interface

fully functional dynamic panels, unlike Justinmind. You can add cases like
hide, show, swap and move content in the dynamic panel contents to make
it more interactive. It also lets you create team projects. It lets you convert
the prototype into Word document or CSV files or html document.
Cost: $289 per license (Standard), $589 per license (Pro)
Link: http://dgit.in/DownAxure
50 FROM DEFINING TO DESIGNING THE PRODUCT

6. Pencil Projects: If you own a somewhat old version of Windows,

Android or iOS or are simply a retro fan, then ‘Pencil Projects’ is your
one-stop solution. The standard widget pack of Pencil has XP widgets,
Android ICS widgets and a “sketchy” widget to make the wireframe a bit
more funky. However, Pencil can only generate a wireframe or a low fidelity
static prototype unlike Axure or Justinmind.
Cost: Free
Link: http://dgit.in/DownPencil

Pencil Projects runtime interface

7. Adobe Fireworks: If you’re a fan of Adobe, then here’s another Adobe

product for you. It creates low fidelity prototypes and static mockups of the
interface. If you’re an avid Photoshop user, then Fireworks is your go to
UX designing tool as the latter smoothly integrates Photoshop, Illustrator
and Dreamweaver.
Cost: ₹22,113 for the complete Creative Suite
Link: http://dgit.in/DownFireworks

While these UX designing software are great, most of them can’t be

accessed on the go. So here are some apps that let you create and/or share
wireframes on the go:
 FROM DEFINING TO DESIGNING THE PRODUCT 51

Adobe Fireworks runtime interface

1. Wireflow: ‘Wireflow’ is an
Android app which lets you
create low fidelity wireframes,
with shapes only. We tried version
1.1.9. The interface is really simple
to use with its shapes and prede-
fined interactions only.
Cost: Free
Link: http://dgit.in/GWireflow

2. Marvel: Have an idea on a piece

of paper and want to convert it
into a prototype? ‘Marvel’ to the
rescue! It can help you create low
fidelity prototypes. We tried ver-
sion 1.8.5. The functions are really
Wireflow runtime interface simple, all you have to do is take
an image of the paper wireframe
or import it from Dropbox or other cloud service and add interactions to
it by creating hotspots.
Cost: Free
Link: http://dgit.in/GMarvel
52 FROM DEFINING TO DESIGNING THE PRODUCT

Marvel runtime interface Pixate runtime interface

3. Pixate: Yes, it’s the same as the desktop app. We tried version 2.8.1 on
Android and version 2.8 on iOS. It isn’t a fully-fledged wireframing app
on mobile devices. However, in combination with the desktop software,
the app has a feature distinguishing it from other apps, i.e. its ability to
let you see real-time app changes to the interface design on the desktop
application and vice versa.
Cost: Free
Link: http://dgit.in/GPixate (Android), http://dgit.in/iPixate (iOS)

4. Justinmind: This is also an add-on app like Pixate. We tried version

1.0.2 on Android and version 1.0.5 on iOS. It doesn’t have the “live update”
option like Pixate, but allows you to share your prototypes from the desktop
application which can be viewed in the mobile app. If you’re worried about
the security of your prototype, worry not. To view it on a device, you must
download the prototype every time from the Justinmind cloud.
Cost: Free
Link: http://dgit.in/GJustinmind (Android), http://dgit.in/iJustinmind (iOS)
 FROM DEFINING TO DESIGNING THE PRODUCT 53

Justinmind runtime interface Axure Share runtime interface

5. Axure Share: Don’t have Justinmind? Then try out the ‘Axure Share’
mobile app. We tried version 1.0.1 on Android as well as on iOS. It lets you
view your prototypes within the app as well as offline, after having down-
loaded them onto your mobile device.
Cost: Free
Link: http://dgit.in/GAxureShare (Android), http://dgit.in/iAxureShare (iOS)
54
CHAPTER #05

DESIGN
PRINCIPLES
It’s not what you say, it’s HOW you say
it! Although, first you do have to decide
what you want to say

V
arious schools of thought use UX Design as a means to achieve
different ends. Until now you’ve been informed of the meta-
phorical tools. However, to build something using those tools,
you need to have an idea of what it is that you’re building and
some guidelines on how to go about building it. To point you in the right
direction, here are some of the majorly accepted principles of UX Design.
 DESIGN PRINCIPLES 55

If people didn’t have principles, even subconsciously, then everybody

would just do whatever they wanted, and no matter what they did, they’d
be right! Needless to say, there would be utter chaos everywhere! This is
why we have principles, in order to guide our behaviour. Similarly, there are
principles in UX design to guide the product or service’s design behaviour.
After all, that’s what a UX designer does!
At its core, every principle contains questions that focus on some aspect
of UX design and provides a basis for further changes. Each of them guides
development of the User Experience in different ways, based on the analysis
of data obtained during user research. A good UX design incorporates
most of these principles, if not all. This ensures that a good UX design
can be replicated using these guidelines. These principles affect various
factors of the design in different combinations that ultimately impact
the product, service or website. Mainly, there are five factors. These are:

ŠŠ Discoverability/Learnability: How easy is it for the user to find controls

or accomplish basic tasks the first time they come across the design?
How soon can they use it at the intended level of utility? How easily can
they navigate the information?
ŠŠ Efficiency: Once users have learnt to accomplish basic tasks, how quickly
can they perform the task? If they need to perform the same task multiple
times, at what speed can they accomplish it?
ŠŠ Memorability: Can repeat users maintain their proficiency at utilising
the design after an extended period of time of not using it?
ŠŠ System Performance/Errors: How responsive is the interface during
user interaction? What kind of errors do users make and how crippling
are they? How can users recover from these errors within the framework
of the design?
ŠŠ Delight/Satisfaction: How much pleasure do users get by using the
design? Is it enough for them to have an emotional connection?

The Fundamental Principle

“One cannot not communicate: Every behavior is a form of communication.
Because behavior does not have a counterpart (there is no anti-behavior),
it’s impossible not to communicate.” - Paul Watzlawick
One cannot not communicate: This fundamental principle is often called
the “First Axiom of Communication”. This is followed by one’s inability to not
influence, as every communication constitutes an influence on the receiver.
56 DESIGN PRINCIPLES

Trying hard to not communicate.. Les amants, by Magritte

Thus, every part of the product, service or system is a communica-

tion, as it’s a part of the user’s experience. “Every part” literally refers to
everything – from the font used on a button label to the number of clicks
it takes to get to some particular content – all of this sends a message. If
you don’t explicitly know the message being sent, consider each design
element in the context of the five factors discussed earlier to know what’s
being communicated.
Now that we know this principle, we must apply it. The next step is asking
ourselves, for each element: is it communicating the intended message or a
contradictory message? Enforcing this principle vigorously allows us to
refine every little detail, even the minutiae that go unseen or unsaid, that
ultimately contribute to crafting the whole User Experience.
Simple? Yes, but also fundamental.

The Consistency Principle

A successful UX design involves consistency across a latitude of multiple
levels, keeping in step with both, de jure and de facto standards. The evil twin
of consistency is confusion, and as UX designers, we never invite confu-
 DESIGN PRINCIPLES 57

Consistency in Architecture - communicating futurism

sion to our parties. However, the strictness of consistency required varies

across the cross-section of levels. These levels include (in decreasing order
of required strictness):

1. Interpretation of user behaviour: UX design involves programming

product behaviour in response to actionable user behaviour (shortcuts,
gestures, etc). This subconsciously creates learned scenarios of cause and
effect in the user’s brains: “If I do this, that happens.” You do NOT want
to mess with that, unless you’re sabotaging the company you work for.
Having to unlearn something is extremely frustrating, and is sure to drive
away users rather than attract them and reinforce their usage. That said,
conforming to an existing product’s usage behaviours makes it easier to steal
that product’s recurring customers! Either way, within your own product
cycles, be consistent with the interpretation of user behaviour.

2. Invisible structures: ‘Invisible structures’ refer to elements that are usu-

ally not apparently visible in the interface, but allow control and interaction
with the program or product. These may be hidden scroll bars or a menu
58 DESIGN PRINCIPLES

that appears on hovering over a certain area. Adding too many invisible
structures may hinder the discoverability of your product’s features, so
make sure frequently used features are visible structures.

3. Visible structures: ‘Visible structures’ refer to everything on the screen –

buttons, icons, menu bars and the like. The appearance of a particular visible
structure should remain consistent throughout your product or it’s sure
to confuse even existing customers. Also, visible structures (and even the
invisible ones) should be consistent in terms of their location, for the same
reason. It adds to the efficiency of the product and enhances learnability.

4. Products: If your company puts out a lot of related products, say, as part
of a suite, it’s imperative to maintain the general look and feel across all of
them. For example, design all of the logos in this suite with the same font
(unless you want to emphasise the difference in their logos, in which case,
be consistent in the differences). This helps in creating and maintaining a
brand image that is communicated subconsciously to your users.

5. Platforms: Today, almost every product is multi-platform. Every other

website has an app, and every other app is available on every major platform.
Keeping your design and user experience consistent across these platforms
is essential and not easy, as every platform has its limits and advantages
(desktop websites have screen space, mobile applications have portability,
etc). Yet, being consistent across platforms is necessary, because it ensures
easy adoption of your products.
At times, however, it’s necessary to be inconsistent, when changes need to
be emphasised. Nothing grabs attention like visual inconsistency, but only
if it makes sense. It will make sense if the user is given the opportunity to
develop an appropriate rationale, such as witnessing a behavioural incon-
sistency accompanying the visual inconsistency. That is, you want the user
to think, “Oh! It looks different because it works differently!”
Are you maintaining the standards you’ve set?

The Simplicity Principle

This principle is actually complex, because it involves simplifying complex
things. It isn’t as simple as merely hiding the complexity, as that can ironi-
cally add to the complexity by making features less discoverable. Keeping
your design as simple as possible involves walking a fine line, where you
 DESIGN PRINCIPLES 59

Balance in simplicity

don’t leave out anything essential while streamlining your design. To take
the case of functional copies, a button label that says “OK” is too simple
and says too little, compared to a button label that says “Send This Message
Now”, which says too much. The optimum label in this case would be “Send
Message”. It’s not just about minimising volume, but also about maximising
clarity. We need to find the sweet spot where it wouldn’t make sense to take
away anything or add something.
This principle doesn’t only apply to writing, but to functional design as
well, say with control structures such as menus. Another thing to remember:
If the user cannot find it, it doesn’t exist. Complex features are sometimes
the most useful, and the feature or its presentation doesn’t always have to
be simplified, only its experience. While it’s acceptable to aim for cleanli-
ness and elegance, the design shouldn’t hamper discoverability. As always,
when in doubt, user-test!
If you think some feature is too complex to be detected by a novice user,
you can incorporate methodologies such as ‘Active Discovery’. Remember
“Clippy”, the Office Assistant from the old versions of MS Office? Well, if its
makers were able to make its presence known way back when, you can do
better! The main point of Active Discovery is letting the user know about
features as and when they need them, instead of waiting for users to find
them themselves. You can call their attention to these features by displaying
60 DESIGN PRINCIPLES

“Are you in control?”

a relevant message. Of course, this message should stop once the user has
adopted the intended usage of the features.
Saying little while saying enough involves finding a balance. Zen-
like balance.
Are you saying too much, or are you saying too little?

The Control Principle

The “experience” in ‘User eXperience’ belongs to the user. As UX designers,
we don’t create the experience itself, we create the framework for the users
within which they have the experience. When they make their own choices,
users feel in control, but here too, there’s a need for balance. Too many
choices can leave a user feeling helpless, unable to decide on the next step,
while no choices convey a total lack of control. According to the Hick-Hyman
law, the time it takes to make a decision increases logarithmically with
the number of alternatives. Thus, the number of choices available and the
degree of control also affects the design’s efficiency. Did you give the user
enough control to feel autonomous?
Sometimes, it’s better to allow multiple paths to exist towards a common
overarching goal, including a path of least resistance. Can the user do the
same thing in another way? It’s also advisable to let the user have a sense
of where they’re in the workflow, and allow them the opportunity to move
both, backward and forward. Does the user always know where they are
within the system? Think of how useful the undo and redo features are.
Making actions reversible gives users confidence and reduces the chances
 DESIGN PRINCIPLES 61

of errors. Another important feature, almost a must-have, is an exit strategy,

like the Cancel button. It promotes a feeling of safety and conditions the
user to feel confident when using your product or service. Does the user
always have a way out?
While you’re giving the user control over their visible experience, as the
UX designer you should have control over their subconscious experience.
Sounds like a tall order? Well, it’s certainly not, and this is what separates
the best from the rest. Does your design ensnare the user’s attention? Does
it make him/her want to come back for more? It’s as simple as applying a
basic technique from human psychology, you read a few lines ago: “Condi-
tioning”. Want someone to do the same thing again? Reward them after they
do it. Want them not to do it? Punish them. (Hey, don’t grab that whip from
your closet. That’s not what we meant.) The key thing to remember here is
to keep the rewards and punishments subliminal. A pop-up saying “Good
Job!” invokes no feelings, but watching your crops grow does, somehow.
After mastering the art of inducing feelings of reward or punishment,
promoting addiction is only a matter of creating an appropriate feedback
loop. Think Facebook: Feel like posting -> Post -> Get likes -> Feel good ->
Post again. The social media giant capitalised on one of our basic needs –
societal recognition – and now you can do it too! If you don’t want to take
advantage of this particular need, there are about thirteen other commonly
accepted ones! It’s up to you to use them.
Are you in control?

A few more lamp posts – Dieter Rams’ 10 principles

1. Good Design Is Innovative – It contains just enough novelty.
2. Good Design Makes a Product Useful – It solves currently
existing problems.
3. Good Design Is Aesthetic – It’s pleasing to the eye.
4. Good Design Makes a Product Understandable – And thus more
widely used.
5. Good Design Is Unobtrusive – It fits without displacing anything.
6. Good Design Is Honest – It doesn’t appear to be more than it is.
7. Good Design Is Long-Lasting – It doesn’t follow fashion.
8. Good Design Is Thorough Down to the Last Detail – Everything has
a purpose.
9. Good Design Is Environmentally Friendly – As everything should be.
10. Good Design Is as Little Design as Possible – Painstakingly made simple.
62 DESIGN PRINCIPLES

Top 5 Don’t Dos:

1. Say less (or as much) with more. The title of this section is a prime
example of using unnecessary content (the redundant “Do”). Except, in
this case, it wasn’t completely unnecessary, having served as an illustrative
example. There is already information overload in our world, it doesn’t need
more fluff. Make less more.

2. Add flair. While design does involve looking good, a trendy style shouldn’t
trump usability. Anything that isn’t strictly necessary must go, and this
applies to design elements as well. Don’t go overboard on the visuals. There’s
a time and place for being artistic, but this isn’t it.

3. Take away control. Users should be given the feeling of being in control,
with a logical correspondence between their actions and the usage of the
product/service. Things that surprise users like auto-playing videos or
links opening in new tabs take away the feeling of control, so don’t employ
such devices unless absolutely necessary or if the behaviour is expected.

4. Make users wait. Human beings, especially the internet generation,

have limited patience. Every design choice will have an impact on the
performance speed, so keep this in mind when using high-res images on
your website! Don’t sacrifice speed and efficiency for anything. Usability
is more important than aesthetics.

5. Hinder content with design. Design is meant to complement content, if

not enhance its readability, and not hinder it. Design shouldn’t be at war with
the content, so don’t be conceited when it comes to design. Color schemes
that decrease typographical contrast and busy backgrounds that detract
attention from the text are prime examples of what to avoid.

Top 5 Do’s:
1. Ensure everything functions. Nothing kills the joy of usage more than
unresponsive links or buttons. They’re like being led turn after turn, to a
dead end. Even you wouldn’t appreciate that experience! Ideally, it should
all be working after your last round of user testing, however, since there’s
no real last round, check everything before deploying!

2. Minimise confusion. A human has limited attention. Avoid competing

 DESIGN PRINCIPLES 63

elements like the plague. Proper UX design is meant to channel and focus
the user’s attention, as opposed to a design with multiple focal points that
sends attention helter-skelter and confuses the user.

3. Standardise across platforms. These days, in order to reach as many

users as possible, almost everything is cross-platform. This means visitors
will access your service over many different devices and browsers. A good
UX design needs to ensure a similar experience across all platforms.

4. Focus on the main point. Directing focus is a well known principle even
in magic (misdirection), and not for naught! Most users will only skim over
and not read every last word in every last corner. The main content should
be the central focal point, such that it draws attention at a glance. It’s all
about trapping ‘em eyeballs!

5. Create easily navigable Information Architecture. Users come looking

for content. Then, they get drawn in by related content, which amplifies
usage. Interest is generated by the content, however, continued usage criti-
cally depends on the ease with which the various content can be accessed.
Make your content structures easy to navigate around. It’s the hallmark of
good Information Architecture.
64
CHAPTER #06

DESIGN
PHILOSOPHIES
Ever wonder why designs of a
particular era start looking similar?
We’ll tell you why.

T
he story of skeuomorphism, in a convoluted way, starts with
Xerox. This is because prior to Xerox developing the graphical
user interface, computers were command-line driven. To operate
a computer, you needed to be a geek. Computers weren’t for
members of technical proletariat, like most of us. In 1973, before we had
graphical user interfaces (GUIs), before Steve Jobs had even thought of
the Macintosh, Xerox produced the first personal computer – a humble
machine with 128 kilobytes of internal memory. Of course, back then, the
term “personal computer” only existed in the pages of geeky magazines
and journal.

Why is any of this relevant?

The story of skeuomorphism is almost as old as the story of GUI. We’ve all
heard the anecdote in which Steve Jobs, on a visit to Xerox PARC, had an
epiphany about the power of GUI while watching a demonstration of the
Xerox alto. He went back to Apple and demanded that his team of engineers
 DESIGN PHILOSOPHIES 65

The Xerox Alto – birth of the GUI

start working on something similar right away, and thus began the story
of the Macintosh. Jobs wanted people to be as comfortable with computers
as they would be, say driving a car, or using a can opener. He wanted the
process to be as intuitive as possible. He wanted the interaction between man
and his creation to be friendly. The tales of his obsession over minor design
elements are legendary. The release date of the Macintosh had to be pushed
back several months because Steve Jobs wanted the computer monitor to
look as close to a human head as possible. He wanted the calculator appli-
cation on the Macintosh to look as close to a real life calculator as possible,
complete with clickable buttons. The engineers at Apple, exasperated, had
to make a “design your own calculator” kit just so that Jobs could get the
shape, size, and contours just right.
The Apple Macintosh revolutionized the personal computer market,
and with the weight of any revolution comes ideological inertia. For
many years hence, skeuomorphic design dominated the world of per-
sonal computers, and smartphones after that. At its best, skeuomorphic
design was delightfully tacky. There was a skewed brilliance in the
66 DESIGN PHILOSOPHIES

Steve Jobs’ obsession

design of the icon packs of the early iPhones (think of the compass, or
the metronome app). However, it came with its fair share of drawbacks
(discussed later), which led to a number of design faux pas, like the
infamous Apple DVD player.

The Good, the Bad and the Ugly

To understand skeuomorphism in depth, it is a good idea to start with the
basics. Skeuomorphism is essentially mimicking the appearance of real
life objects. Skeuomorphic design is not a new idea. The earliest instances
of skeuomorphism can be seen in everyday life even today. Think of plastic
chairs. They mimic the functionality of traditional wooden chairs, and also
their shape and design. Similarly, when the GUI was invented, plenty of
time, money, and pixels were invested into mimicking the shapes, textures
and behavior of everyday materials. Some of the commonly used textures
mimicked the appearance of stone, leather, paper, fabric and wood. Apple
products lavishly used these textures, and have even faced criticism for
over using leather textures in their apps.
The argument for skeuomorphism is driven for the most part by one key
word: familiarity. Since skeuomorphic designs mimic real world objects,
it immediately becomes obvious to the user what the functionality of a
particular product is. For example, since the calendar app on the iPhone
looked like an actual calendar, complete with animations for turning pages,
it was quite obvious that it was a calendar. Another appeal of skeuomor-
 DESIGN PHILOSOPHIES 67

phic design is the engage-

ment factor. It is rumored
that leather stitching used
on iCal is based on the
chairs on Steve Job’s pri-
vate jet. Interacting with
these textures via a smart-
phone engages the user. It
reminds them of the real
life experience of touching
and leather and makes the
process more natural.
More recently, with the
rise of flat design, skeuo-
morphism has come under
heavy scrutiny and a fair
amount of criticism. One
of the most common com-
plaints against this philos- Familiarity breeds friendliness.
ophy is that it suppresses
innovation. The argument is that the philosophy as a whole concentrates
too heavily on the aesthetics of the product and not the functionality. For
example, the calculator application on the iOS has buttons which can be
touched, so finding the sum of 2+3 on the application takes more time
than say, keying in 2+3 on your keyboard on Google. While the aesthetics
of a product are very important in a GUI, we must not forget the primary
purpose of a computer is to carry out a task efficiently, and if the aesthetics
gets in the way of this, it is bad engineering. Another common criticism
is that skeuomorphic designs, no matter how authentic they look, cannot
truly mimic the behavior of its real world analogue. This is essentially
misleading behaviour. No matter how exquisite the graphic design is on
your virtual leather, at the end of the day, you are swiping across glass,
and this will never feel natural to you, so why try to mimic leather in the
first place? Perhaps the most valid criticism of skeuomorphism is its lack
of universality. It is not feasible to follow the skeuomorphic design style in
all products. For products and services that were born in the realm of the
internet (like e-commerce sites and search engines), there is no real world
analogue whose behaviour is similar enough to imitate.
68 DESIGN PHILOSOPHIES

Apple’s signature stitched leather texture.

For a Few Pixels More

But before we go forth and denounce skeuomorphism altogether, it is
necessary to nitpick. The truth is that the kind of design we tend to asso-
ciate with the term “skeuomorphism” isn’t all skeuomorphic. Therefore,
it is necessary to clearly demarcate what is and isn’t skeuomorphic. The
Oxford dictionary defines a skeuomorph as “an object or feature which
imitates the design of a similar artefact made
from another material”. Which is to say that
physical characteristics of a skeuomorph are
the vestigial descendants of an original func-
tionality; that have been retained purely for
ornamental purposes. The said ornamental
purposes are what we call “visual metaphor”.
Let us take up the example of the calculator
application again. The on screen buttons of the
calculator application are purely ornamental.
They have been derived from the buttons on
“real” calculators, but they share none of the
hardware functionalities of the original. To
compare, let us take up the stitched leather tex-
Apple’s calculator app. ture on the login page of the “Find My Friends”
 DESIGN PHILOSOPHIES 69

‘Find My Friends’

application. This design cannot be called skeuomorphic, because there

is no real world analogue to the functionality of this application. In fact,
the Apple design “style” isn’t really skeumorphic, the correct term for
this kind of design would be kitsch – the inspiration for these designs is
primarily nostalgia.
So is skeuomorphic design outdated? Is it bad design? The answers to
these questions are inconclusive. There’s a difference between bad taste and
bad design. The purpose served by the aesthetics of a design is to create a
powerful visual metaphor. Take the example of the File Manager app that
most Android users are familiar with. There’s a reason the icon is shaped
like a file cabinet or a folder. It’s a non verbal message to the users that effi-
ciently and wordlessly communicates the functionality of the product to
them. So when used as visual metaphors, skeuomorphs are pretty useful.
However, take the case of the tacky and over used leather textures on iOS,
since they serve only ornamental purposes, they are an example of bad taste
(not bad design). Also, we cannot deny that despite the criticisms leveled
against their designs, Apple successfully sold their products, and built a
signature style that lasted many years. In the age of personal computers
and smartphones, skeuomorphic design was necessary. Skeuomorphs
70 DESIGN PHILOSOPHIES

The file cabinet metaphor

are the training wheels that have ushered us into the new era. Now we’re
familiar enough with computers to do away with painfully obvious visual
metaphors, and roll out cleaner, more functional designs. The training
wheels are finally off, and although this particular analogy has come to
its end, skeuomorphism certainly hasn’t. A good design is a combination
of good visual metaphors and efficient functionality, and if used correctly,
skeuomorphs still have a place in contemporary design.

Flat design
The past two years in the world of technology design have seen a marked shift
away from familiarity and an increased emphasis on functionality. Google
Trends confirms that searches for “flat design” started skyrocketing in early
2013, while by mid-2014, Google’s own “Material Design” philosophy was
beginning to take the internet by storm. Android and iOS – the most popular
mobile operating systems today – both follow a flat design philosophy.

From imitation to flattery

We saw that skeuomorphism involved imitation of real-world counterparts
of on-screen elements. This led to an aggressive emphasis on the three-
dimensionality of objects on-screen. Some of the most obvious examples
are – bulging buttons; shiny, rounded icons; and switches popping up and
down depending on their on/off state. The fact that our screens were two-
 DESIGN PHILOSOPHIES 71

Skeuomorphism – the icons aim to mimic their real-world counterparts for the
sake of familiarity.

dimensional was seen as a constraint. However, once designers decided to

embrace the 2-D nature of our interfaces, flat design was born.
Instead of trying to deflect attention from the flatness, designers began to
capitalise on it. Icons were flattened, switches became sliders, and rounded
edges gave way to cleaner, sharper demarcations. With embellishments like
textures and slopes removed, these elements combine to produce a very
simplistic and clear interface. The clarity of the interface is a consequence
of harmony between the screen and the elements on it – superfluous details
such as gradients and gloss no longer interfere with the user’s interactivity
with the screen, and the consistency provided by the flat design elements
72 DESIGN PHILOSOPHIES

lends a sense of continuity to the

user’s experience.
Flat design draws from sev-
eral ideologies. Its lack of embel-
lishment speaks of minimalism,
its bold and saturated colours
hint at a strong influence of mod-
ernism, and it exhibits a dedica-
tion to practicality and usability
typical of a utilitarian school of
thought. In fact, flat design bor-
rows certain specific features of
skeuomorphism as well.

Less is more – minimalism

Minimalism entails a reduction
of all design elements to their
Flat design – toggle buttons and menu bare essentials. “Art begins with
entries meant to make the most of flatness the getting rid of nature,” said
of the screen.
Adolph Reinhart, an artist whose
minimalist work wouldn’t look
out of place inside one of Google’s own Material Design apps. In terms of UX/
UI design, it means that the removal of distractions is the key to obtaining a
pleasant interface. For example, a website made with flat design principles
in mind will replace garish borders with whitespace padding, use subtle
on-screen animations, and use geometrical shapes uniformly.
Minimalism has its own origins rooted in the early 20th century, with
the emergence of the Dutch artistic movement known as “De Stijl” (Dutch
for “The Style”). It advocated simplicity in shapes and colours- the artwork
largely comprised of horizontal and vertical lines and a there was heavy
preference for primary colours.
Guggenheim Museum’s online collection of De Stijl artwork looks sur-
prisingly similar to the tiled layout of a Windows phone – clearly, the
underlying principles of design have come a full circle in a hundred years.
The description provides great insight into the De Stijl approach. “The
essential idea […] was the creation of a universal aesthetic language,” says
the Guggenheim blurb. Compare that with the goals that Google has laid out
for their Material Design philosophy – “[…] to create a visual language […]
 DESIGN PHILOSOPHIES 73

Minimalism calls for a removal of all but the most important details.

that synthesizes the classic principles of good design with the innovation
and possibility of technology and science.” – and we begin to see the links
between an artistic movement that started out as nothing more than a love
for simplicity and the design ideas that govern the appearance of the most
widely-used operating system in the world.
Another basic tenet of minimalism is the use of empty spaces, or whites-
pace as it is known in tech design. The idea is to bring about emphasis on the
important elements on the screen by removing clutter and not trying to fill
all available space. This is why your home screen widgets leave breathing
space between themselves, and it’s also why your Google Docs document
is not by default zoomed in to fit the entire width of the page. A lack of
whitespace can lend a claustrophobic effect to the interface.

Easy on the eye – typography and colour palette

If there’s one word that encapsulates the intended effect of flat design, it
74 DESIGN PHILOSOPHIES

Flat design goes well with fewer, simpler colours.

would have to be “clean”. A good choice of typefaces is crucial to ensure

high readability. It’s an unwritten rule of flat design that serif fonts are a
strict no-no. The slight projections at the edges of the letters go against the
“function over form” idea of flat design. They are considered a distraction.
Instead, flat design happily embraces fonts having clean-cut lines. Hel-
vetica, developed in 1957, is a popular choice of typeface among websites
that use flat design. Helvetica’s most striking feature is the fact that all the
terminal edges of its letters are all either horizontal or vertical – a feature
that perfectly aligns with the De Stijl ideals.
Flat design’s obsession with clarity and simplicity extends to its choice
of colours. Dropbox’s homepage greets you with a peaceful combination
of blue and white. Google Play Music spreads across your tablet’s display
with energetic orange. Here, the key again is to reduce distractions and
provide a uniform, consistent experience. Most designs use not more than
three colours. Some websites even choose to go for a single colour palette,
with clever use of whitespace and one or two different levels of saturation
to create distinctions between design elements.
 DESIGN PHILOSOPHIES 75

The fundamental principles of Material Design –

Google’s attempt at a unified design language.

Google’s Material Design

Douglas Bowman was the first classically trained visual designer Google
hired. He joined in 2006, when Google was already seven years old. As he
wrote in his blog post after leaving Google in 2009, seven years was a long
time for a company to function purely driven by data. When design decisions
have been taken by engineers for so long, they become engineering decisions.
Google’s obsession with data has not eased up in the past half a decade.
If anything, it has only intensified with the spread of Android. But from
being a company whose logos on different products were several pixels off,
Google is today a pioneer in the field of design as well. Material Design is a
bold new attempt by Google to create, in their words, “a visual language,”
which aims to “develop
a single underlying
system that allows for
a unified experience
across platforms and
device sizes.”
Material Design
builds upon all the
basic principles of flat
design discussed above,
with added thoughtful
touches relevant to its
own user interfaces
across all Google prod-
ucts, most notably Material Design represents the pinnacle of
Android. Every shadow, development of flat design.
76 DESIGN PHILOSOPHIES

edge, and layer is carefully deliberated on. The way the touch inputs inter-
acts with the layers is strictly regulated. The system’s responses in the
form of animations and movement of the on-screen elements follow highly
specific guidelines.

The final word

This shift from skeuomorphism to flat design represents the increasing
degree of confidence with which we are beginning to interact with machines
around us. Earlier, skeuomorphism provided the crutches of familiarity
that we once needed in our interface. Now that our comfort levels with tech-
nological interfaces have increased, this shift away from impressive form
factors towards functionality seems completely logical, even intuitive.
 77
CHAPTERRESOURCES
#07 YOU’LL NEED

RESOURCES
YOU’LL NEED
A grand vision is nothing without the
tools necessary to implement it. With
that in mind, this chapter lists some of
the best books, videos, software, and
courses you need to check out in order
to become a master of UX Design.

F
or your project to succeed, it requires a great and compelling UX
design interface. However, you must keep yourself updated with
the latest trends and best practices in UX Design to build a design
that attracts new generation users. There are plenty of resources
available on a wide range of platforms to enable you to do this. Nowadays,
in addition to traditional books plenty of online tutorials, courses and free
video materials are available at your disposal. In this chapter, we’ll explore
these resources that will help you effectively learn all concepts related to
UX design.

Books
‘Don’t Make Me Think’ by renowned usability guru, Steve Krug helps
78 RESOURCES YOU’LL NEED

you learn the basic

principles of intuitive
navigation and infor-
mation design. This
book has been recom-
mended by UX experts,
Adham Dannaway and
Meredith Alling.
Link: http://dgit.in/
stevekrugux

‘UX for Dummies’

by Donald Chesnut
and Kevin Nichols ena-
bles you to learn UX
and content strategies.
You’ll be able to apply
UX strategies that
align with business
goals. This book will
be useful for beginners.
Link: http://dgit.in/
uxdummies

‘Smashing Maga-
zine’ has published 14
e-books on UX design,
UX Design for better user interfaces
which are available in
both, PDF and Kindle
format. These books are available either individually or bundled and
cover all aspects ranging from design process to creation of responsive
e-commerce sites.
Link: http://dgit.in/smashingebooksux

‘Lean UX’ provides a comprehensive coverage of basic principles, tactics

and techniques relevant to UX design. Authored by Jeff Gothelf and Josh
Seiden, the book received the 2013 ‘Jolt Award’ from Dr. Dobb’s Journal.
Link: http://dgit.in/leanuxJeffJosh
 RESOURCES YOU’LL NEED 79

‘Smashing UX Design’ by Jesmond Allen and James Chudley provides

a comprehensive coverage of UX design tools, tips and techniques. The
book includes real-world case studies and checklists for effective selection
of the correct UX tools for your business – useful for advanced learners.
Link: http://dgit.in/smashuxdesign

SitePoint, a popular online portal publishes a wide range of articles

related to UX design. The site also publishes a few books such as ‘The
Principles of Beautiful Web Design’, ‘Jump Start Responsive Web Design’
and ‘Killer UX Design’.
UX Articles: http://dgit.in/sitepointuxarticles
Books: http://dgit.in/sitepointuxbooks

Other books released by popular publishers:

ŠŠ Creating Flat Design Websites: http://dgit.in/creatingflatdes
ŠŠ Mobile Game Design Essentials: http://dgit.in/mobilegameess
ŠŠ Responsive Web Design from Concept to Complete: http://dgit.in/resweb-
packt
ŠŠ UX Design and Usability Mentor Book: http://dgit.in/uxdesignmentor
ŠŠ Android User Interface Design: http://dgit.in/androiduides
ŠŠ GUI Design for Android Apps: http://dgit.in/guidesandroid
ŠŠ A Project Guide to UX Design: http://dgit.in/projectguideux
ŠŠ The Design of Everyday Things: http://dgit.in/designevery
ŠŠ Ux Simplified: Models & Methodologies: Volume 1: http://dgit.in/uxsim-
plivol1

Book collections recommended by UX experts

ŠŠ Adham Dannaway’s Collection: http://dgit.in/dannarecos
ŠŠ UX Design Collection: http://dgit.in/uxdesigncc
ŠŠ Paul Olyslager’s Must Have Book Collection on UX: http://dgit.in/paulux
ŠŠ UX Mastery’s Collection: http://dgit.in/uxmasterybooks
ŠŠ Top 10 Best UX Books You Should Read: http://dgit.in/top10bestuxb
ŠŠ User Experience Books for Beginners: http://dgit.in/uxboothbooks
ŠŠ Top 10 User Experience (UX) Design Books: http://dgit.in/top10uxdes
ŠŠ Best Free e-Books for UI/UX Designers: http://dgit.in/bestfreeuiux
ŠŠ Actual Insights Best UX Books: http://dgit.in/bestuxactual
ŠŠ Recommended UX Books for Aspiring UXers: http://dgit.in/uxbooks4masses
80 RESOURCES YOU’LL NEED

ŠŠ 30+ Best UX Design and Research Books of All Time: http://dgit.in/best30ux

ŠŠ The Ultimate List of 24 Free eBooks on UX: http://dgit.in/ultimate24ux
ŠŠ The Biggest list of 35 Free UX Books: http://dgit.in/35freeuxbooks
ŠŠ Twitter Booklist to Help You Become Great at UX Design: http://dgit.in/
twitteruxlist
ŠŠ Frazer Cooper’s List of Top 10 UX Books: http://dgit.in/top10ux

Online courses
It’s true. Books contain plenty of useful information related to UX design.
However, sometimes, publications will have outdated content due to
various reasons, usually due to being published as many as 10 years
ago. Such content may or may not be relevant to the current working
environment. This is where online courses come into the picture. In
e-learning, courses are regularly updated to reflect the current industry
trends. Moreover, you’ll have direct access to instructors, which will help
you clarify doubts.
‘Fundamental Design Principles’, a course offered by Pluralsight,
includes nine modules with special reference to aesthetics, legibility and
Metadesign principles.
Some of the other popular courses offered by Pluralsight include ‘UX
Engineering Process’ by Bill Scott, ‘Hacking the User Experience/UX for
Developers’ and ‘Exploring the UX Process with Mobile Game Prototyping’.
Link: http://dgit.in/pluralsightux

LearnNowOnline, a leading online learning service provider conducts

several courses related to UX design. ‘Introduction to User eXperience
Design’ by David Kelley examines the basic principles of UX and includes
coverage of various tools, wireframing and steps required to write a story.
Link: http://dgit.in/learnnowonlineux

Tutsplus.com has published several tutorials and courses on UX design.

The popular courses include ‘Fundamentals of UX Design’, ‘Mastering Flat
Design’, ‘Responsive Web Design Techniques’ and ‘Effective eCommerce
Design’.
Link: http://dgit.in/tutsplusux

Lynda has several courses on the various UX design tools such as Axure,
Illustrator, Photoshop, Balsamiq Mockups and InDesign. You’ll also find
 RESOURCES YOU’LL NEED 81

Learn UX Design from the comforts of your home

several courses on techniques such as paper prototyping, creation of sce-

narios, personas and storyboards.
Link - http://dgit.in/lyndauxcourses

The ‘UX Basics’ course by Treehouse covers all the concepts of user
experience design such as history, foundation and importance of UX. The
course is taught by Lis Hubert, a renowned UX consultant in New York.
The option of text transcripts enables learners to grasp the content quickly.
Link - http://dgit.in/treehouseuxbasics

Udemy has several paid and free courses on UX design. ‘The Ultimate
Guide to Usability and UX’ course has been highly rated by students and
includes 61 lecture sessions. Some of the other popular courses offered by
Udemy include ‘User Experience Design Fundamentals’, ‘Design Your User
Experience in 7 Simple Steps’ and ‘Introduction to Web and eCommerce
User eXperience Design’.
Link - http://dgit.in/udemyux

Webcredible.com conducts full-day on-site classroom training on UX

design. Some of its popular courses include ‘UX Training Fundamentals’,
82 RESOURCES YOU’LL NEED

UX Design learning redefined

‘Lean UX Training’ and ‘Digital/Agile Project Management Training’.

Tools for better UX design

For a website to attract and retain visitors, its user interface should be
designed in a way that ensures smooth and intuitive navigation. To ensure
optimum user experience across all platforms, including desktop and
mobile, you’ll need a couple of tools. Let’s explore a few such important
tools that will come in handy in the UX design process.
Moqups.com is used to create wireframes, mockups and prototypes.
Further, you’ll be able to customise each component – be it color, text size
or icon.
Wireframe.cc enables you to easily create wireframes and share them
with a unique URL to other team members from within the tool.
UXPin.com enables you to view the UI as it would look in mobile browsers
by simply resizing the browser’s screen. The tool helps you to create interac-
tive prototypes and wireframes in an intuitive and elegant manner.
Filesq.com helps you to create not only interactive prototypes, but also
share them with other team members. Designers will be able to retrieve
feedback directly in real time.
 RESOURCES YOU’LL NEED 83

No more waiting. Quick UX design is here

Some of the other popular UX design tools are Pencil, Fluid UI, Solidify,
Gliffy, POP, Desinion, Visual Website Optimizer, Optimizely, Loop11, Sto-
ryboardThat, Memosort and HotGloo.

Popular Recommendations
ŠŠ UX Design Tools: http://dgit.in/uxmastery
ŠŠ 15 UX and UI Tools and Resources for Web Designers: http://dgit.in/
davidwalshux
ŠŠ 10 Cloud-Based UX Design Tools: http://dgit.in/awwwardsux
ŠŠ 30 Essential UX Tools: http://dgit.in/webdesignerdepot30ux
ŠŠ 25 Great Free UX Tools: http://dgit.in/uxforthemassesfree
ŠŠ Ten Favourite UX Tools: http://dgit.in/uxmastools
ŠŠ 3 Best Vector Wireframing Tools for Designers: http://dgit.in/3uxmovement
ŠŠ The Top 12 UI/UX Design Tools: http://dgit.in/12clearbridgemobile
ŠŠ 5 UX Design Tools for Your Next Project: http://dgit.in/5generalassemb
ŠŠ 15 Desktop & Online Wireframing Tools: http://dgit.in/uxbooth15tools
ŠŠ 5 Terrific Tools for Every UX Designer’s Toolbelt: http://dgit.in/deque5tools
ŠŠ 20 Tools Every User Experience Pro Should Know About: http://dgit.
in/20toolsuxpro
84 RESOURCES YOU’LL NEED

ŠŠ Comprehensive Review of UX Tools for Your Website: http://dgit.in/

reviewuxtools
ŠŠ Top 50 iOS Apps for User Experience Design: http://dgit.in/top50iosux
ŠŠ 18 Best User Experience (UX) and Wireframing Tools: http://dgit.
in/18bestux
ŠŠ 20 Best UX Design and Wireframing Tools for Mobile: http://dgit.
in/20bestux
ŠŠ 20 Excellent Wireframing Tools for Mobile: http://dgit.in/20wiretools
ŠŠ 65 Useful Android Apps for Designers: http://dgit.in/65appsdes
ŠŠ The 200 Best Web Design Tools: http://dgit.in/200besttools
ŠŠ 7 Free Cloud Based UX Design Tools for Web Designers: http://dgit.
in/7freecloudux
ŠŠ 6 New UX Prototyping Tools for Designers: http://dgit.in/6newux

Videos and podcasts

There are plenty of websites, including YouTube, which feature videos and
podcasts for effective learning of UX design.
ŠŠ UX Design: An Introduction with Scout Stevenson: http://dgit.in/uxde-
signscout
ŠŠ Advice on Becoming a UX Designer: http://dgit.in/uxdesignadvice
ŠŠ What is UX Design?: http://dgit.in/Skoolux

Mobile learning will soon become a reality

 RESOURCES YOU’LL NEED 85

ŠŠ Fundamentals of UX Design: http://dgit.in/tutsplusuxd

ŠŠ Understanding UX Design: http://dgit.in/Entrataux
ŠŠ UX Design Principles Classroom Video: http://dgit.in/slobodanux
ŠŠ What the #$%@ is UX Design?: http://dgit.in/uxmasterydemo
ŠŠ UX Design Videos - Channel9: http://dgit.in/channel9ux
ŠŠ What Does a UX Designer Do?: http://dgit.in/techcrunchuxd
ŠŠ 5 Brilliant TED Talks That Will Make You a Better UX Designer: http://
dgit.in/uxoslo5ted
ŠŠ UX Channel: http://dgit.in/uxchannel
ŠŠ 5 Lessons in UX Design: http://dgit.in/5lessonsuxd
ŠŠ Fundamentals of UX Design: http://dgit.in/uxdtuts
ŠŠ 12 Interactive UX Design Tutorials for Beginners: http://dgit.
in/12interactiveux
ŠŠ 3 Free UX Design Videos from Patrick McNeil’s New Course: http://dgit.
in/3freeuxdvideos
ŠŠ UX Design for Mobile Developers: http://dgit.in/udacityuxd
ŠŠ UX Fundamentals Training Video: http://dgit.in/infiniteux
ŠŠ The Fundamentals of User Experience: http://dgit.in/bitmethodux
ŠŠ User Interface (UX) Techniques: http://dgit.in/uxjanne
ŠŠ UXpod: http://dgit.in/uxpodc
ŠŠ The 25 Best Web Design Podcasts: http://dgit.in/25bestpodcast
ŠŠ 4 of the Best UX Podcasts: http://dgit.in/4bestuxpod
ŠŠ UX Podcast: http://dgit.in/uxpodcastjamesper
ŠŠ 12 Podcasts from UX Experts Focusing on Mobile Design: http://dgit.
in/12podcastsux
ŠŠ UX Radio: http://dgit.in/uxradiopod
ŠŠ UIE Brainsparks: http://dgit.in/UIEPodcast
ŠŠ 5 of My Favorite UX Podcasts: http://dgit.in/5FavUXPodcasts
ŠŠ Podcasts for Designers and Developers: http://dgit.in/smashinguxp
ŠŠ Best Podcasts for Web and UI/UX Designers: http://dgit.in/bestuxpodcasts
ŠŠ UX Cafe: http://dgit.in/uxcafe
ŠŠ TheUXIntern: http://dgit.in/theuxintern

Conclusion
UX Design is an unavoidable area in software/web application develop-
ment. Useful resources are scattered all over the web and are bound to
continue growing over time as and when new content is added. If you
have any questions, you can post them to reputed discussion forums
86 RESOURCES YOU’LL NEED

such as community.uxmastery.com for quick solutions. Moreover, you

can also search on Twitter and Facebook with the keyword “UX Design”
for real-time updates. Also consider joining groups and lists to gain
more knowledge.
 FUTURE OF USER EXPERIENCE DESIGN 87
CHAPTER #08

FUTURE OF
USER
EXPERIENCE
DESIGN
Let’s look at what the future holds for
User Experience Design
88 FUTURE OF USER EXPERIENCE DESIGN

W
e’ve watched users (sometimes for hours) doing or not doing
anticipated actions. Users form the spine of our interactions.
They interact and hence we design. User Experience design
is thus about winning the user’s heart by designing simple, easy-to-use
interfaces that encourage interactions. Luckily more and more technology
companies are awakening to the need of stunning, precisely designed user
experience. We’re starting to move to whys and hows of user’s behaviour,
instead of sticking to whats. We take time to analyse why users perform
certain actions on our application and how they perceive certain informa-
tion, instead of sticking to what number of people leave that page.
As the demand for good User Design is rapidly increasing, the field of
UX is also growing.
UX has grown from just creating layouts of pages and taking them out
for user research to participating in discussions of UX and digital business
strategy. UX has seen it all, from desktops and tablets to smartphones. I believe
that the future of UX is exploding, and it is bursting to birth its new avatar,
which will be delivered to us in various shapes and numerous dimensions.
Below are some things we think are pertinent to UX and its future:

1. User Experience teams won’t be handed a part of the

product. They’ll lead the product.
UX teams will no longer be handed the part of the product that needs
layouts, graphics and user research. Instead, User Research teams would
lead the product by defining user needs, gaps, iterations, next generation

User Experience teams leading the product

 FUTURE OF USER EXPERIENCE DESIGN 89

versions, etc. In short, user experience teams will achieve sales targets of
digital products.

2. Clicks and interactions will be rewritten

While the focus so far has been on reducing the number of clicks, the future
holds the promise of no clicks whatsoever. Interactions will reach a pin-
nacle with no clicks required to reach the destination. Interactions will be
hand-gestured or voice-activated and experience will revolve around soft
and polite voice versus gruffy voice.

3. Conversational interfaces
UX in future would be conversational. Users would interact with their
gadgets by conversing with them. Say you’re at the airport, eagerly waiting
for your husband, who’s returning from a long foreign trip. The gadget will
constantly update you about his flight status, his seat number and exactly
how far your husband is from the exit of the airport.
We’d talk to our car systems. Instead of turning volumes up and and
down, we’d just say if we’re feeling too cold/hot and the AC will automati-
cally adjust to a comfortable temperature.

4. Crowd-sourced design
Crowd-sourced design or participatory design would take inputs from a

Crowd-sourced design
90 FUTURE OF USER EXPERIENCE DESIGN

much larger audience via the power of the internet. UX designers would
need to be equipped with tools to harness the power of the crowd. Online
and remote testing tools would become important to reach out to a larger
audience and gather their feedback, ideas and suggestions.

5. Customised / Personalised experience

Experience will no longer be generic. My son won’t see what my old, senile
neighbour will see when they open the same online shop. The shops will
recognise and serve them with crafted and personalised products, promo-
tions and graphics based on big data.
I love movies, and if it weren’t for personalised recommendations thrown
at me by Netflix and the likes, I’d never discover movies that I should have
watched but never knew existed.

6. Anticipating user’s needs

The user’s needs would be anticipated and met. For example, if he picks
up a reading app, it will automatically pick up where he left off no matter
which device he was reading on last. He wouldn’t have to hunt for the last
page where he stopped reading.

Anticipating Users needs

If the user entered a kitchen, there would be an automatic alarm on his

phone warning him of rotting vegetables and fruits since they haven’t been
consumed even after six days of purchase.
Predicting user’s behaviour and creating a smooth, enjoyable experience
would be mandatory.

7. Artificial Intelligence
Artificial Intelligence has come a long way, from helping us find a location
when we’re lost on the street (Google Maps) to ordering food from any of
 FUTURE OF USER EXPERIENCE DESIGN 91

Artificial Intelligence

the nearby restaurants and enabling us to chat with whoever is online.

However, a lot of AI is yet to be discovered for use in our daily lives.
Robots who cook, talk and date are all round the corner. User Experi-
ence designers face the challenge of humanising experiences for these
Roombas of the world.
There would always be a debate around the impact of AI on humanity,
but we as UX designers need to be armed with solutions to this puzzle.
Call center IVRs will no longer be automated messages asking to press
buttons in a monotonous tone. There would be unique individuals taking

Experience all around

92 FUTURE OF USER EXPERIENCE DESIGN

Colours and Typograpgy

the caller to his desired path in a faster way with a conversational tone.
These paths, voice modulations and reactions would need to be defined
by UX designers. UX would teach the IVR to recognise signs of frustration
and identify opportunities for empathy

8. Experience all around

Experience will no longer be limited to mobile and desktop screens. With
IoT (Internet of Things) working its way into every nook and cranny of
our lives, experience will be everywhere – in our clothes (yes, even in our
undergarments), glasses, watches, etc.

9. Colours and Typography

Serif or Sans Serif will no longer be a debate. They’ll both rule layouts.
Bold, easy-to-understand and shorter versions of communication will be
the future. Material Design palette defining brighter colours will be here to
stay. Brighter, bolder colours signifying independence of thoughts, actions
and deeds will be the future.
 FUTURE OF USER EXPERIENCE DESIGN 93

Conclusion
User Experience and its body of knowledge is in itself undergoing changes as
is the user and his behaviour towards technology. As more people embrace
technology, the challenge isn’t making users aware of certain functions,
the challenge now is making users unaware of the function and letting the
function automatically happen.
I strongly believe (and I have reasons to!) that with UX taking the fore-
front, the digital world will be a happier and contented place. However, the
future can’t be predicted precisely, and that’s a good thing, because if we were
certain about the future, we wouldn’t be able to change it. The whole point
of forecasting is to give insights, which allow us to make the future better!

Note about the author

This chapter has been contributed on invitation by Neha Modgil, Global Design Head
– Techved Consulting.
Neha (B Architecture, Masters in Design, SPA) began her venture in 2007 with a small
group of design professionals to provide website solutions, however with a sudden boom
in the demand for internet & smart phones, Neha then decided to provide complete
solutions to her clients and included software, mobile app designing & digital marketing
solutions. Neha rose from being a Consultant to an owner of a start-up company of the
few people to an entrepreneur of a company with strength of 100 employees.
94 NOTES
NOTES 95
96 NOTES