Hi, we are AppUnite, we take care of the businesses from a tech perspective. We build products and teams around them enabling our clients to bring the difference to the world.

We believe in knowledge sharing and software as a tool to improve companies and peoples’ lives. We take lessons from our daily challenges and share that experience and knowledge to help you build better products. 

Let’s talk about products, businesses, and software development!

https://strapi-appunite.s3.eu-central-1.amazonaws.com/linkedin_fe6eb50742.svg

LinkedIn

large_Marek-Szmyt.jpg

medium_Marek-Szmyt.jpg

small_Marek-Szmyt.jpg

thumbnail_Marek-Szmyt.jpg

Marek-Szmyt.jpg

Marek Szmyt

<Blockquote author="Oxford Languages ">"User Experience is the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use."</Blockquote>


The basic definition of UX is how users interact with a product or service. Although it is a concept that is used in every area of ​​our life, in this article we will focus on why UX is so important in the application development process. Solutions beneficial for the user affect the satisfaction of using a given product, which later translates into user loyalty. The whole process consists of two parts - UX research and UX design. First of them is about checking what the users' expectations and motivations are, and how the designed way of interaction will be the best choice. This is the time to research the market, get feedback and test our solutions. The second - design, includes creating the usage architecture by understanding the client's needs. Here a roadmap or motion design as well as prototypes, are created, which will later be reproduced in the selected version in your product. It is with these elements that your client will come into contact.

![image.png](https://strapi-appunite.s3.eu-central-1.amazonaws.com/image_e93740d60f.png) 
## UX is an investment
 
Since the UX approach is focused on research and testing ideas it makes the final product much more adequate to user needs. It helps avoid mistakes and lowers the risk of failure due to bad experiences and faulty features. With tools like prototypes, it is possible to validate ideas without investing precious time in development. According to IBM, it is [30 times as expensive](ftp://ftp.software.ibm.com/software/rational/info/do-more/RAW14109USEN.pdf) to correct code defects as to use the right information at the first time. UX design eliminates the chances of such a problem. An authority in the field of business - [Jeff Bezos, decided to put 100 times as much money in UX as in advertisement when opening Amazon](https://www.forbes.com/sites/forbestechcouncil/2015/11/19/good-ux-is-good-business-how-to-reap-its-benefits/?sh=2bffb3374e51). With good user experience, users will more easily complete tasks when interacting with the product. That means there will be fewer people that close a website or an app just because the experience was too complicated. The better experience, the better conversion and more journey paths finished. Studies show that companies which focus on design gain more sales. The companies which have high user experience investment saw their [sales increase by 75%](https://www.nea.com/blog/the-future-of-design-in-start-ups-survey-2016-results). Forrester (research and advisory company) created a report in which it was calculated that [1$ spent on UX can bring 100 $ to the company](https://www.forbes.com/sites/forbestechcouncil/2017/01/23/how-ux-is-transforming-business-whether-you-want-it-to-or-not/?sh=783426e1580e). 
 
## The prototype allows you to understand the product

A prototype is a primitive version of a product or service. It helps in checking the design solution flow. It gives an opportunity to validate ideas before sharing them with stakeholders and choosing the final design. 
 
There are many different versions of prototyping from which the most common are:
- paper (it allows UX team to fastly check many ideas)
- digital (versions made with tools like Figma, Adobe XD)
- HTML and JavaScript (code-based solutions)

To get the full experience of the future product, you'll need a prototype. The complexity here may vary but being able to grab your phone or open your laptop and interact with the screen is a big difference when making crucial decisions. It helps with user testing and finding bugs that would otherwise be hard to predict when only looking at a static image.


<Image src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/Screenshot_2021_12_08_at_16_03_58_b0dc7233be.png" source="Interaction Design" sourceLink="www.interaction-design.org" />


## Methods - where is UX in your product?

You are most likely wondering what UX has to do with your product. Below, we have described some of the most important issues where ux is a very important determinant of the success of your application development process.


**Personas**

This is one of many tools that helps understand who the users are and what their needs are. It is a crucial part that has to be defined to complete business goals and build loyalty by providing smooth interaction with your product.
 
**User Flow**

This is the way to visualize how the potential user will get from point A to B when interacting with the product. It gives a sense of the complexity of the journey which helps improve the experience and makes more people complete each task.
 
**Wireframes**

This is the part when we dive deep into the details of each individual screen. On low-fidelity screens, we focus on the structure and hierarchy of all the elements. It is an important step before we refine discussed ideas when creating high-fidelity screens that are as close to the final view as possible.
 
**Prototypes**

Prototypes let you interact with your product before the actual development. It is an important tool to see small interactions and flows in real-time so we can be certain that the delivered solution is perfect for the users.
 
**Testing**

At any stage, some of the decisions may not feel convincing. Luckily we have many tools to test these ideas on real users. By combining wireframes with prototypes or using existing products, we can run sophisticated tests to find the best solutions.
 
 
 
## How does good design affect the success of your application?


If we look at the number of UX professionals, we will see that their work became an integral part of the product development process. From an additional, alternative solution, it has become the basis for introducing a service or product to the market. Companies dealing with a market research in this field, predict that this is not the end, but the beginning of a revolution in the approach to create products (including mobile applications). It is estimated that [by 2050 there will have already been 100 million UX professionals](https://www.nngroup.com/articles/100-years-ux/).

<Image src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/C7_A6_AE_00_6_FC_9_4106_86_A8_D916_FB_118614_4_5005_c_b445abd287.jpeg" source="nngroup" sourceLink="nngroup.com" />


The most important goal of any application is its success and user satisfaction, which will translate into their loyalty and profit. User experience is what creates a relationship between the company and people. UX is not only able to perfectly understand your customers and meet their expectations, but is also an excellent tool that will allow you to save money.

large_alvaro-reyes-qWwpHwip31M-unsplash.jpg

medium_alvaro-reyes-qWwpHwip31M-unsplash.jpg

small_alvaro-reyes-qWwpHwip31M-unsplash.jpg

thumbnail_alvaro-reyes-qWwpHwip31M-unsplash.jpg

ux-alvaro-reyes-unsplash.jpg

This article explains why UX is so important in the application development process.

What is User Experience (UX) and why should it be important to you? 

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla est, condimentum ac nisl a, pharetra condimentum velit. Suspendisse vel magna ultricies, pellentesque nisl eu, rutrum ante. Sed massa quam, lacinia vitae lobortis sit amet, euismod sed erat. Fusce nisl arcu, scelerisque non tortor non, ultrices pulvinar nunc. Sed in purus vitae risus eleifend elementum. Sed nec libero ultricies nisi rutrum congue imperdiet eu lorem. Suspendisse venenatis massa eget ligula vehicula, id gravida sapien feugiat. Aliquam lectus sapien, hendrerit sed efficitur eget, tristique at tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vehicula diam elit, vel viverra enim cursus tristique. Pellentesque congue urna est, vel iaculis risus fermentum vel. Maecenas in condimentum nulla. Phasellus nec velit dolor. Nulla in libero posuere tortor euismod fermentum et eget augue.

You can use *asterisks* or _underscores_ to achieve _italic text_: `_italic_`

Using **two of the above**, our text can become __bold__: `**bold**`

Three of these, give us an interesting ___bold-italic text___: `___bold-italic___`

In order to get a ~~strikethrough~~, you could use two tildes: `~~strikethrough~~`

[Links](https://appunite.com) can be placed with syntax like this: `[Links](https://appunite.com)`

`inline code` has syntax like this: `` `inline code` ``

- unordered list
- item 2
 - subitem 3

1. ordered list
2. nice

---

## normal image:
```md
![alt text](http://unsplash.it/300/150)
```

![alt text](http://unsplash.it/300/150)

---

## image with source
```jsx
<Image src="https://unsplash.it/300/150" source="AppUnite" sourceLink="https://appunite.com" />
```

<Image src="https://unsplash.it/300/150" source="AppUnite" sourceLink="https://appunite.com" />

---

## image with source and description
```jsx
<Image src="https://unsplash.it/300/150" source="AppUnite" sourceLink="https://appunite.com" description="lorem ipsum dolor sit amet" />
```

<Image src="https://unsplash.it/300/150" source="AppUnite" sourceLink="https://appunite.com" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla est, condimentum ac nisl a, pharetra condimentum velit. Suspendisse vel magna ultricies, pellentesque nisl eu, rutrum ante. Sed massa quam, lacinia vitae lobortis sit amet, euismod sed erat. Fusce nisl arcu, scelerisque non tortor non, ultrices pulvinar nunc" />

---

## image with description:

```jsx
<Image src="https://unsplash.it/300/150" description="lorem ipsum dolor sit amet" />
```

<Image src="https://unsplash.it/300/150" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nulla est, condimentum ac nisl a, pharetra condimentum velit. Suspendisse vel magna ultricies, pellentesque nisl eu, rutrum ante. Sed massa quam, lacinia vitae lobortis sit amet, euismod sed erat. Fusce nisl arcu, scelerisque non tortor non, ultrices pulvinar nunc" />

---

## blockquote without author:

```jsx
<Blockquote>content</Blockquote>
```

or

```
> content
> content
> content
```

<Blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue velit justo, eget aliquet lectus maximus ac. Nulla facilisi. Suspendisse sed odio tortor.</Blockquote>

---

## blockquote with author
```jsx
<Blockquote author="Author name">content</Blockquote>
```

<Blockquote author="Karol Wojtaszek - CEO of AppUnite">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris congue velit justo, eget aliquet lectus maximus ac. Nulla facilisi. Suspendisse sed odio tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas vel diam lacus. Nam dui nunc, euismod eu porttitor eget, viverra in magna. Morbi pharetra ac odio nec dictum. Cras tempus magna eget mattis blandit. Nulla non mattis lorem. Vestibulum mattis velit nec est suscipit, eu lacinia quam venenatis. Fusce quis risus lacinia, mattis sapien non, placerat ante.

abcd efg
</Blockquote>

---

## blockquote with author and links:

```jsx
<Blockquote author={
 <>
 2021, <a href="https://appunite.com">AppUnite</a>
 </>
 }
>
 Lorem ipsum dolor sit amet, consectetur adipiscing <a href="https://appunite.com">AppUnite</a>
</Blockquote>
```

<Blockquote author={
 <>
 2021, <a href="https://appunite.com">AppUnite</a>
 </>
 }
>
 Lorem ipsum dolor sit amet, consectetur adipiscing <a href="https://appunite.com">AppUnite</a>
</Blockquote>

---

## table

useful app - [table generator](https://www.tablesgenerator.com/markdown_tables)

```md
| 123 | 123 | 123 | 123 | 123 |
|-----|------|-----|-----|-----|
| asd | asda | asd | aa | aa |
| aaa | aa | aa | aa | aa |
```

| 123 | 123 | 123 | 123 | 123 |
|-----|------|-----|-----|-----|
| asd | asda | asd | aa | aa |
| aaa | aa | aa | aa | aa |

---

## success banner

```jsx
<SuccessBanner />
```

<SuccessBanner />

---

## newsletter banner 

```jsx
<NewsletterBanner />
```

<NewsletterBanner />

---

## Code blocks

no language:
````
```
...code
```
````

```
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
```

with language:

````
```language
...code
```

replace language with desired programming language - eg. elixir, js, etc.
````

```ts
export const capitalize = (str: string) =>
 str.charAt(0).toUpperCase() + str.slice(1)
```

## GitHub Gist

```
<Gist gist="AdamSiekierski/f953111c96e36dad477593da3747bf02" />
```

<Gist gist="AdamSiekierski/f953111c96e36dad477593da3747bf02" />

## Custom styles

In order to omit the default styles of an element, add a `.no-default-styles` class. For example:

```jsx
<img src="https://unsplash.it/300/150" className="no-default-styles" style={{ border: '2px solid red', width: '50%' }} />
```

<img src="https://unsplash.it/300/150" className="no-default-styles" style={{ border: '2px solid red', width: '50%' }} />

Hubert Józwowiak

Junior Dev's first days. From writing to releasing your first commercial code