A Deep Dive in UX Design - Here's How and What I learned
Tags: ux, design
Published: 2022-03-24 13:59:00

## **Table of Contents**

[Introduction](#introduction)

[What is UX Design?](#2)
[Difference between UI and UX](#3)
[How to get started with UX Design?](#4)
   1. [Fundamentals](#5)
   2. [Research](#6)
   3. [Ideation](#7)
   4. [Research methods](#8)
   5. [Hi-fi designs and hi-fi Prototypes](#9)

[Conclusion](#conclusion)

<hr>

## **Introduction** <a name="introduction"></a>

Since I got interested in web development, UI/UX started to intrigue me a lot. I started to hear about the hype of UX and decided to dive in deep. I can't call myself a pro UX designer, but I've created a fair share of UX things. Later on, I started to share my learnings on Twitter and there are some questions I've been asked quite frequently such as:

What is UX Design? 

Are UI and UX the same? 

How to get started with UX Design? 

Unsurprisingly or surprisingly, this question comes a lot from people who work in the tech industry. There’s still a lot of confusion surrounding the field. So, I thought, why not demystify it :)

First of all, let's understand what exactly UX is.

## **What is UX Design?** <a name="2"></a>

The full form of this abbreviation is User Experience Design. It is the process that the design teams use to create products that provide meaningful and useful experiences to users. Such processes usually involve the design and integration of the product, including design, branding, usability, and function.

<hr>

I think that now, it's quite clear what the term UX means. In order to understand it more deeply, let's see the difference between UX and UI.

## **Difference between UI and UX** <a name="3"></a>


### **UI** 

👉UI is basically User Interface.

👉UI design complements the UX Design.

👉It is the look and feel, the presentation and interactivity of a product.


**Examples of UI:**

👉Colors

👉Icons

👉Graphics

👉Illustrations

👉Typography

👉Photography


### **UX**

👉UX is basically User Experience.

👉It's a human-first way of designing products.

👉UX designer thinks about how the experience makes the user feel, and how easy it is for the user to accomplish their desired tasks.

👉They also observe and conduct task analysis to see how users actually complete tasks in a user flow


**Examples of UX:**

👉Usability

👉Analysis

👉Research

👉Wireframing

👉Prototyping

👉Interaction Design

<hr>

## **How to get started with UX Design?** <a name="4"></a>

Coming to the main question, how to get started with UX Design? 

![thinking.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1638369844259/8hdXDa1Cz.gif)

From here onwards, I'll try my best to cover all the important topics you need to know to get started with UX Design.

Just like while learning programming languages, fundamentals are really important and you should start with them. Now you may be thinking, just what are those fundamentals????

### **1. Fundamentals** <a name="5"></a>

Now you know the difference between UI and UX. Another thing that may be bugging you would probably be:

"What can I do as a UX Designer?"

Well here's your answer ;)

#### **Careers in UX**

1. Interaction Designer

2. Visual Designer

3. Motion Designer

4. VR/AR Designer

5. UX Researcher

6. UX Writer

7. UX Program Manager

8. UX Engineer

9. Conversation Designer

**Learn more about these specialties [here](https://thecodingcompany.hashnode.dev/9-ux-design-specialties-that-could-be-your-next-career-move) **;) 

These were the 9 careers you can pursue as a UX Designer. 

As a UX Designer, you will be expected to know about the **"Product Development Life Cycle"**. I did cover this topic here on my blog, so if you want to read about it, you can do it  [here](https://thecodingcompany.hashnode.dev/what-is-the-product-development-life-cycle). It was really fascinating to understand just how many stages a product has pass before being released into the market!

The next step would be understanding the characteristics of a good user experience. Some of them are:

1) Usable                       

2) Enjoyable

3) Equitable                  

4) Useful

Now, you may move on to learn about the responsibilities of an entry-level UX Designer and types of roles in UX (generalists, specialists, and T-shaped). I also did this. After all, you gotta know what you are getting into! Chances are, that as a UX Designer, you'll have to work with people belonging to different departments so, it would be really useful if you learn how to interact with cross-functional teammates. 

Some more important concepts worth knowing and I found to be interesting are the elements of UX (strategy, scope, structure, skeleton, and surface), the difference between user and end-user, and various UX Frameworks. Yeah, you heard me right. I was as baffled as may be right now when I first heard about UX Frameworks. But trust me, they are really fun to learn about. Now is the time to learn about the importance of accessibility and equity-focused design.

If you plan on working at some organization or even freelance, learn about design sprints in detail. This is a really handy thing. 

Congrats!!!! You are done with the fundamentals ;)

### **2. Research** <a name="6"></a>

As a UX Designer, research is something of immense importance. This wasn't my favorite part though. Firstly, learn about the types of research (foundational, design, and post-launch) and then how to research in different ways such as interviews, surveys, focus groups, competitive audits, etc. You should know how to choose the right research method based on its pros and cons. You'll be designing products for various types of people to use so in order to not let bias affect your design, learn about the various types of biases and how to avoid them. Create personas in order to empathize with your users and identify their pain points.

Some other important concepts are user stories, user journey maps, and how to consider accessibility while designing. You might be thinking, why am I mentioning accessibility again? I did so to emphasize its importance! You'll be designing products for every type of user, not for just a selected group, so it's important that the design would be accessible to everyone. To make sure that you are including everyone, define problem and hypothesis statements for various personas. The most important research methods are competitive audits, surveys, and interviews, so be sure to learn how to do these in-depth.

### **3. Ideation** <a name="7"></a>

You've already completed your research, now the next phase of designing starts which is "ideation". First of all, revisit your problem statements and then define "goal statements". Then outline your user flow. This can be done via storyboarding. If you want to learn about storyboarding, then you can do that [here](https://thecodingcompany.hashnode.dev/the-what-why-when-and-how-of-storyboarding). After you are done with storyboarding, now your product will start taking a real form. Learn what are wireframes, how to design them, and their benefits. Personally speaking, I really enjoyed creating wireframes after all it was so much fun! Getting back to the topic, there are two types of wireframes: paper and digital. 

Here are 10 tools you can use for digital wireframing:

1. fluid UI

2. Figma

3. Adobe XD

4. Miro

5. Mockplus

6. Sketch

7. Balsamiq

8. Canva

9. Moqus

10. Cacoo

Try them out. Go with what you find comfortable to use. After creating a wireframe, it's time to define your app flow. You can do that via prototyping. There are two types: lo-fi and hi-fi. Prototyping is like puzzles, you gotta connect all the pieces to see the bigger picture. But first, let's not haste and just start with lo-fi prototypes. Just like wireframing, you can create paper and digital prototypes. 

Here are 10 tools to make digital prototypes:

1. Vectr

2. Adobe XD

3. Webflow

4. Figma

5. InVision Studio

6. Sketch

7. Framer

8. Justinmind

9. Origami Studio

10. Axure RP 9

Once again, Figma is my go-to for creating lo-fi prototypes. After creating low-fidelity (lo-fi) prototypes, understand the various deceptive patterns. You can learn more about them [here](https://thecodingcompany.hashnode.dev/deceptive-patterns-a-must-know-concept-for-ux-designers).  

### **4. Research methods** <a name="8"></a>

Now is the time to understand "Research" in much more detail. Learn how to build a research plan by defining the project background, research goals, and research questions. An important aspect of research is recruiting a diverse participant pool so that you may know the problems faced by all types of users. While researching, keep the privacy issues in mind. Learn what are usability studies, how to conduct them, and the best practices. Note-taking and reducing bias are two important things while conducting research. Learn how to convert your observations to insights. You can do so by organizing your data. 

Now, you might ask, how to organize such large data? The answer is simple, create affinity diagrams. An affinity diagram is actually something like this😆

![1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1638382987682/KtfzNq1PE.jpeg)

By doing so, you can identify patterns and themes in your research data. The next step would be creating changing your design on the basis of the insights collected from the research. Using feedback to improve your designs is a very important skill for a UX Designer!

### **5. Hi-fi designs and hi-fi Prototypes** <a name="9"></a>

If you have reached this step, then you, my friend, have achieved a lot and should be proud of yourself! You can now create mockups while using icons and colors and then create high-fidelity prototypes on the basis of those mockups. I was really proud of myself when I started with mockups and hi-fi prototypes. It's just so much work, but once you get it done, it's very fulfilling. An important concept to learn would be a "design system". Also, you can use gestures and motions to make your hi-fi prototypes more interactive. Learn how to identify when your design is "complete". Though a design is actually never complete. This is because even when a product is released in the market, research is done again to understand how the product is helping the users. Changes may be made in the design based on the feedback.

<hr>

## **Conclusion** <a name="conclusion"></a>

UX is a vast field. Remember that Rome was not built in a day. Just like that, you can't possibly cover everything in a day. Just take your time to learn about these concepts in detail and practice by making mockups, lo-fi and hi-fi prototypes, case studies, etc. Use your practice projects in your portfolio. I won't say that this is the absolute roadmap you should follow or if this is even a roadmap or not😂 Just get the main idea or identify the topics that you to cover from here. Then learn about them via Youtube or blogs etc.

<hr>

**Let's connect!**

✨ [Twitter](https://twitter.com/IAyeshaSahar)  

✨ [Github](https://github.com/AyeshaSahar)