100% found this document useful (1 vote)
600 views18 pages

(Latest) Complete UX Guide - 2021

This is a beginner to advanced UX Guide 2021.

Uploaded by

Gaurav Malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (1 vote)
600 views18 pages

(Latest) Complete UX Guide - 2021

This is a beginner to advanced UX Guide 2021.

Uploaded by

Gaurav Malik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Home » Design » No.

1 UX guide -A systematic approach to creating the best user experience

No.1 UX guide -A systematic approach to creating the best user


experience
Aditi Talpade  September 1, 2020  Design

Feedback
UX plays a very important role in designing your applications. An attractive UI is the first
thing that captures your audience’s attention and UX is the one that keeps audience hooked
to your app/site. The fast-changing consumer preferences and growing variety-seeking
behavior among users, the experience you give your user while he is interacting is the only
thing that can help you stand apart.

This growing trend of UX has led many in discovering a career in UX designing. So to guide
your career path we have designed this UX guide for our readers. And we believe that our
carefully designed and detailed UX guide is just a one-stop answer to get all your questions
of UX getting answered.

We have got you sorted by offering you this complete comprehensive UX guide that covers
all the information you need about UX design practices and the latest trends. The UX guide
answers all your questions related to what is UX, it’s principles and design process, tools
available and how you can become a UX designer.

We will go step by step into every detail but if you are short on time you can directly skip to
the section you wish to explore in this UX guide.
e sec o you s oe po e s U gu de.

The UX guide contents


Why UX is needed?
UX Design Principles and process
Design t hinking t o enable UX designing process
How t o creat e enhanced User experience
UX Design Deliverables
UI v/s UX Design
Top UX design t rends
How t o become a UX Designer?

Why UX is needed?
Do you know as per calculations, approximately 380 new websites are created every
minute? However, the actual number of new websites being created every day is probably a
little more. So you might be wondering why we are discussing this and what is the context of
this with UX? Let us understand it.

So for any business, the first thing people get is a website for it then work on great SEO with

Feedback
effective SEO tools to increase visibility. Although these things do make a powerful impact to
gain visitors and users to your site. But later, you may often observe a fall in visitors who are
actually exploring the site after landing.

So even if you are successful in bringing traffic to your website. You may not always retain
visitors to it. To increase your bounce rate, you must ensure that visitors love scrolling and
discovering your app.

Your website should capture your user’s attention completely to keep him engaged.  You
might know about this 15-second rule which states that a user stays on the page for approx.
less than 15 seconds.  And that’s the maximum time you have to capture someone’s
attention on your website.

So If you haven’t generated interest in 15 seconds, then you probably aren’t going to even in
30 seconds. And what happens is the users move on. The user experience is what makes
someone engage with your app and makes them recommend it to others.

UX, or user experience, focuses on the end user’s overall experience, including their
perceptions, emotions, and responses to a company’s product, system, or service. UX is
pe cep o s, e o o s, a d espo ses o a co pa y s p oduc , sys e , o se ce. U s
quite a variable technology as it must change and evolve with evolution and changes in the
end-user.

Due to a variety of things on a platter to explore, customers today want quick and simple
ways to interact with fewer or no pain points. That’s why user experience matters so much.

UX Design Principles and process


UX focuses on offering usability to the end-users. Usability is the ease of use and learnability
of a human-made object. The easier a product is to use and learn, the better the user’s
experience with it.

So when implementing a great user interface and user interaction, designers have to have
all these aspects such as usability, aesthetics, interactiveness, intuitiveness, and clarity of
the design that they will create.

This UX guide gives you the perfect step by step overview of the basics and foundations
used in the UX design process and the principles to create an effective user experience. Let

Feedback
us discuss the steps involved in the UX design process first and then followed by design
principles.

UX Design Process

Before diving in, remember that your business’ UX design process is going to differ from
other businesses. That means you might stray from the stages we outline below and that’s
okay! What’s important is that you find out exactly what works for your company. That
means researching, iterating, and testing.

First let us discuss UX mapping and things included in it. It includes empathy mapping,
understanding customer journey, experience mapping and service blueprinting.

Empathy mapping helps t eam members underst and t he user’s mindset .


Customer journey maps focus on a specific cust omer’s int eract ion wit h a product or
service.

Experience Mapping generalizes t he concept of cust omer-journey maps across user t ypes
and product s.
p
Service Blueprinting are count erpart s t o cust omer journey maps, focused on t he
employees

UX principles

So we looked at the steps in the UX mapping in the UX design process but to increase the
chances of your interface design to become successful enough in attracting the user’s
attention, designers must stick to and consistently follow the UX principle in this UX guide
when creating interfaces. The design principles represent high-level concepts that are
used to guide software design.

As by now, you have understood that UX is about providing meaningful and relevant
experiences to users to increase interactions and retention. Now your pre-design/UX
research work is done so below we have listed the UX principles to follow while creating,
implementing and enhancing user experience design for your applications.

1. Focus on real users


2. Focus on business

Feedback
3. Data-inf ormed design
4 . Design f or the user’s mental model
5. Design f or Learnability, Memorability, Task Ef f iciency, and Human Memory
6. Validate Designs
7. Design Consistency

Design thinking to enable UX designing process


Design thinking, sounds familiar right? A term often heard in context to business,
entrepreneurship, etc. but this theory of design thinking can help you shape your thought
process to develop customer focussed digital interface. And thus this concept can be a
catalyst in shaping your UX design approach. Let us see how.

Design thinking is a 5 step process concept that provides a problem-solving approach


using a human-centered design where the emotional, cognitive, and aesthetic needs of
users need to be fulfilled.
Design Thinking Steps

Let us start with the first principle of design thinking i.e Empathy.

Empathy

It leads you to UX deliverables which are created in mapping an end-user and those are
Empathy maps. Empathizing with users means focusing on their experiences, especially
emotional ones. For that matter, a helpful tool may be the so-called ’empathy map.

Empathy map defines a rough user persona and characterizes your target users to make
effective design decisions. UX specialists from the Nielsen Norman Group (NN/g) and define
this as a tool for understanding every aspect of the user.

This empathy map splits it into four quadrants – Says, Thinks, Feels, and Does.

Feedback
Via NNGROUP.COM

How to create an enhanced User experience? – UX tools


Through the research and testing mentioned above in this UX guide, we can say user
experiences can always be improved. So we gave you a brief idea about the theoretical
views and aspects to develop your UX designs.

But to practically apply and enhance your current UX projects, you require efficient and
advanced software tools that offer a platform for you to experiment with all your quirky,
wild, innovative, or creative UX ideas. As you never know one of your design pieces from your
portfolio may become the next big UX trend.

So it is always better to keep practicing and experimenting with building a great design
portfolio with any of the latest design software listed below. And you don’t have to research
where to begin from, as this UX guide has listed down the complete details of the design

Feedback
tools to get you started with an exciting UX portfolio.

UX Design Tools

Whether you are researching, prototyping, wireframing, storyboarding, or creating graphics,


there are multiple UX tools available to assist you during the design process. There are so
many tools on the market, some free and some that require a subscription fee, that it may
be overwhelming for you when unsure of exactly what you need. 

To get you started, in this UX guide we have listed some popular and valuable tools for
designing UI or UX:

1. Adobe Fireworks

Adobe Fireworks CS6 gives web designers a way to create graphics for their web pages
without getting into the code or design details.

2. Adobe XD
Adobe XD is one of the latest and best design software by Adobe that can design websites
and mobile apps, as well as create prototypes, wireframes, and vector designs. Users can
share interactive prototypes on multiple platforms, including Windows, Mac, iOS, and
Android, so it’s perfect for team collaboration.

3. Axure

Axure RP Pro is another great UX design tool — that’s also free. Axure has several capabilities
including wireframing, prototyping, and documenting. It can even help you create user flows
and sitemaps. 

4. Adobe Illustrator and a Free Alternative

If you’re looking for an affordable alternative to Adobe software, such as Adobe Illustrator
(which is primarily used to create vector graphics). Then there is Inkspace. Inkscape is
known for doing most of what Illustrator does, but for free. This software is open source and
can be used to create impressive vector graphics.

Feedback
5. Sketch

A sketch is an end-to-end software with specific features including non-destructive editing


(meaning Sketch won’t change the pixels in the photo you are working with), code export,
pixel precision, prototyping, vector editing, and more. With Sketch, you can reuse and
update your designs easily.

6. Storyboard Software.

Storyboarder is a free storyboard software option, which has basic features made for
designers of all levels. This software allows users to quickly create drawings and stick figures
to lay out a plot or idea.

You can check out these creative design portfolios created by our designers at RethinkUX
that can better guide you to developing an amazing UX portfolio.

Define
In this phase, you must start thinking about and defining the steps that users need to make
to successfully use a website. (User journey mapping)

1. A ret rospect ive map should be used to track the current moves of the users, the way they usually
behave on the Internet, based on the research.
2. A prospect ive map should be used t o out line how you expect users to behave with a completely
new product.

When you go through the first two stages of the process, the next step is coming up with as
many relevant, fresh, and innovative ideas. So, get ready to brainstorm.

Ideation process

1. Asking the right questions;


2. Thinking unconventionally and beyond obvious;
3. Discovering unexpected possibilities of your product;
4 . Coming up with innovative solutions.

Prototype

Feedback
When creating a UI or UX design, trying out different solutions and designing an interface
that will bring enjoyable user experience is all you should focus on. The best way to visualize
solutions is to start by drawing a website sketch only to proceed with creating a digital
wireframe.

Creating a working model helps in dealing with complex design issues. That is why optimizing
the beta version of a website and making it available to the public can always be a good
decision.  For this phase of the design thinking process in UX designing, you could also benefit
from the so-called Agile methodology, The core Agile concepts include:

1. Iterative development
2. Risk management
3. Transparency

Test

Mistakes during a UI/UX design are inevitable, but the most important thing is to identify
them while there is still time to fix them. Hence the user testing phase after the prototype is
e e e e ss e o e . e ce e use es g p ase a e e p o o ype s
developed is an essential part of every design process.

Design deliverables
UX designers do a lot of brainstorming and execution in the entire process of creating a
great piece of UX. In the end, professionals need to communicate design ideas and research
findings to a range of audiences. For this, they use deliverables (tangible records of work
that has occurred) for this purpose.

For your guidance, this UX guide has got it listed down the things that contain the most
common deliverables produced by UX designers as they craft great experiences for users.
For better readability, We’ve presented the deliverables according to UX activities in a
tabular format:

We can add UX design deliverables separate blog and connect here as there is much more
information available on this topic

Deliverables : Expected documents/prototypes etc required to be prepared

Feedback
UX Act ivit y Definit ion Deliverables

Project Helps UX designers understand the current state of Analytics Audit required by UX
Assessment   the product.  designer
.Content audit and Usability test
report need to be prepared

Compet it or It is an assessment of the strengths and Competitive analysis report


Assessment   weaknesses of current and potential competitors. Value proposition

User Focuses on understanding user behaviors, needs, PersonaUser storyUse


Research  motivations through observations, analysis, and casesExperience
f eedback.  MapStoryboards(Current)Survey

Informat ion It is a practice of deciding how to arrange parts of Sitemap Taxonomy, Wiref rame
Archit ect ure  something to be understandable

Int eract ion It’s a process by which designers create engaging Storyboards(Planned)User f low
Design  user interf aces with logical and thought-out diagram Prototype
behaviors and actions.

/
UI V/S UX Design
The words ‘experience’ and ‘interface’ give an idea of each term’s meaning. In a previous
article, I used the analogy of designing a house to illustrate the process of web design. UX is
best described as architecture (planning, structure), while UI is the interior design (style,
color, look, and feel).

The user experience is the result of their interaction with a product or service, which means
that user experience includes, but is not limited to, a user interface.UI is one of the
contributing factors for the end-user experience.

Basically UX and UI complement each other. Although there are differences in UI and UX
may be in their concepts and principles but they overlap somewhere. And only when this
two complement each other you can have a great working digital product developed that
pleases your audience.

Top UX design trends of 2020


Till now we studied the process and principle for UX design in our UX guide. Now it is the time

Feedback
to get inspired and stay updated with what’s going on in the UX world and know what are the
latest trends to practice and execute.
Dark mode

All top brands such as Instagram, Apple, and Android offer alternative themes in their
products and have embraced this dark mode feature lately or earlier. Here are the core
reasons for the trend’s popularity

by Ananya Roy via 99designs. by Kukuhaldy via 99designs

Immersive 3D elements
e s e3 ee e s

3D design elements have fascinated users for many years. The popularity of this trend is
going to increase in 2020 as VR and AR technologies gain momentum now. So, it becomes a
perfect idea to combine these techniques to create hyper-realistic 3D visuals taking up the
whole users’ screen.

By Pinchstudio

Feedback
Soft shadows, layers and floating elements

The innovative design tendency stands for building intensity. Do you want to create a 3D
element but smooth it over? Soft shadows and floating visuals evoke positive emotions.
They show the depth in elements and make your webpage look slightly 3D. 

                   by JPSDesign         by Gilles Tossoukpé via Dribbble


Mixing photography with graphics

Another hot UI/UX design trend in 2020 is overlapping graphics onto the images. Such a
mixing technique allows you to unleash creativity and implement fabulous designs.

By Ashish rai via Dribble Via Planit

Voice User Interface (VUI)

Feedback
Voice chatbots and virtual assistants definitely become one of the hottest technology
trends in 2020. They change the way we search for information, take notes, and so on. Such
brands as Apple, Android, and Google implement the trend in their UI/UX design process.

by Miklos Philips for Toptal Designers

UX writing and microcopy


U ga d c ocopy

Make your website texts more informal, casual can give a welcoming sense to your readers
as users are bored with standard phrases, an informal writing communication can light up
your reader and he may stay to read more and explore your site. 

Glowing, luminous color schemes

Web design is becoming more bold and daring, using glow-in-the-dark neons and highly
saturated colors in combination with darker, muted shades to give the designs a luminous
feel.

Duotone web designs in particular make this trend shine. Duotone keeps reinventing itself to
maintain its place at the forefront of design. This latest iteration is the boldest yet, relying on
futuristic, neon pops of color and stark color opposites to make veritably vivacious visuals.

Feedback
Via 99designs

Ultra minimalist navigation

With the rise of wearable devices like smartwatches, web design, in general, is thinking
smaller. The area most affected by this is navigation, the glue that holds a website together.

Over the last few years, navigation has been getting simpler and simpler to accommodate
extremely small devices and even smaller attention spans.
e e e y s a de ces a d e e s a e a e o spa s.

Extremely minimalist navigation takes away much of the difficulty in usability. The less a user
has to think about moving around, the more time they spend immersed in the site, actually
moving around instead of wondering how.

by Alt*CEVA by Sathish via Dribbble

How to become a UX designer?


Now comes the most useful question. After reading all the interesting stuff in this UX guide so
far exploring the know-hows of user experience and core design principles and approach,

Feedback
we are sure this has stimulated your internal creative and design instincts and you truly wish
to explore new horizons of opportunities in this trending and flourishing career field of UX
designing. So our first dose of advice would be to start following the steps mentioned above,
hoping that you have sincerely taken down the tips this UX guide has covered so far next is
using the below tips. 

Underst and all t he design direct ions


St udy t he following t ools based on your work. So earlier we ment ioned t he various UX t ools
which help you t o work and play wit h your ideas. But t he specific t asks may need specific
t ools at t imes hence below is a list of UX t ools based on what out put you require.

Type of t ask Soft ware t ool

For interf ace design Sket ch

For interf ace design with collaboration capability Figma

For creating layouts Balsamiq

For interf ace design, prototyping Adobe XD

i i i i
For prototyping and collaboration Invision App

For collaboration RedPen

St art paying at t ent ion t o design


Surround yourself wit h design
Wat ch and Copy Ot hers or get inspired
Creat e a st rong design port folio
Find ment ors and become ment ors. …
Take a design course on
1. Coursera
2. Lynda
3. Udemy

We have tried to condense all aspects of user experience design in this one UX guide. We
hope you liked reading it. So this UX guide gives you a significant overview of the knows and
hows of the very impressive field of UX but you must definitely check out our FREE E-
Book.This is a quick guide that can rescue you from doing some common mistakes in UX .Get
the E-book on “8 Common UX mistakes which every beginner does”by clicking below and

Feedback
recieve it directly in your inbox.

Click here t o get your FREE E-BOOK copy

PREVIOUS

 Difference between UI and UX: What you need to know?

Aditi Talpade
I am Adit i Talpade and I love writ ing about design and t echnology. At @ret hinkux, I am working as a
cont ent developer.

Share Article
   

Related Articles

Feedback
Difference between UI and UX: What you need to know?

Aditi Talpade | 2 months ago

Rethink User Experience is Empowering Brands with Game-


changing Ideas: GoodFirms
Aditi Talpade | 3 months ago

World class articles


delivered weekly
Name

Email

Send

Rethink UX is a team of passionate youngsters who help startups and businesses to take their ideas
f rom idea stage to market.

Feedback
Our Services +

Company +

Connect wit h us on social media. @ret hinkux

       

© Rethink UX 2020. All Rights reserved.


Privacy Policy Te rms of Se rvice

You might also like