Patricio Lopez Juri

Alejandra Bustos

Ignacio Loyola

Franco Mendez


It has been long days of hard work but we are almost ready to launch.

## How it started

We realize **how important is to have consistent link previews** but not everyone has a Content Management System to take care of everything.
Even if you are using one you are probably just taking an image that represents your content and nothing more.

**This is when we want to give superpowers to your links and leverage the user network who loves your online website.**

## What is Flayyer?

**Flayyer is a online platform that enables companies and individuals to manage their social link previews.**

What is different from us is that we allow you to generate those social media previews with web technologies such as React.js and Vue.js (and more coming soon!).

Additionally we grab some analytics and stat usage to add an extra layer of marketing intelligence to your business.

## Where to start?

Visit the [Get started](/get-started) page to create and account. Add your website information and follow the installation guides.

## What is next?

We are working on more integrations, creating [free templates](/marketplace) and new cool features to generate social media content base on your site.

Wondering how to use Flayyer with your websites? [Contact us](mailto:hello@flayyer.com) or join ur [official Discord channel](https://discord.gg/SrW7UExKCp) 🚀



How many times has this happened to you when sharing interesting content on social media?

![alt text](/img/blogposts/ux-research/preview-feo.jpg)

How many times has it been sent to you and a huge link full of numbers appears without any reference image?

We can guess: **lots of times**. You don't know what you're dealing with or where it might lead you, so you decide to ignore it and move on with your life.

## Our early research

In the first stage we could only raise assumptions, so we began to investigate thoroughly and we found that it is not a very studied subject. What we did find out was where website views come from.

If we focus on e-commerce sites, according to Episerver's 2020 Retail Benchmark Report, the majority of website traffic comes from direct searches and paid search. However, social traffic has doubled from 4 to 8% in share of website traffic from early 2018 to late 2019. To some it might seem like a small number, but if you are part of the business world, you know that this increase is **HUGE**. And it will continue to grow.

![](/img/blogposts/ux-research/TRAFFIC-min.jpg)
Why was this percentage so low until recently? The main reasons why users do not click links seem to be lack of interest and trust. There’s too much information. We are already used to “Five things you should know about blah blah blah”.

According to a Columbia University study, **59% of the people you share content with won't even see it. While Facebook surveyed users and found that 80% preferred links with headlines that helped them understand what an article was actually about.

### We needed to know more.

All this has led us to have some clues but it still does not answer our questions, in fact, it generates many more and as we love challenges we set out to answer them by going to the first source: people.

As we mentioned in our blogpost **Marketing strategy for humans**, we are visual beings, so our main hypothesis is that well designed previews can increase trust in links since they offer a better visual experience, which could increase our clients websites CTR.

We conducted two tests; remote meetings with our UX researcher and a survey.


## 1. The interviews

The first one consisted of remote meetings with **27 users** where we first talked about their habits on social media.

Given the nature of our service, we knew that we needed to recreate a navigation that would provide us with the most realistic answers possible, so we designed an interactive prototype with Figma simulating the Twitter platform. Within this simulation we presented our users with four scenarios:

1. A feed where various publications were shared in the form of links, default previews and Flayyer previews. We asked volunteers to navigate as they normally would, **clicking if something really caught their attention and to speak their thoughts out loud to us.**

2. In the second one, we did a **direct comparison** between the same publications from the first scenario. 

3. Simulation of a specific situation about **searching for a new apartment to move in**. There we showed default previews and Flayyer previews and make choose as many as they want, while explaining their decision to us.

4. Finally, we simulated a chat where **a close friend shared links and previews of a product**, and we asked them to do the same as in the previous scenario.

![](/img/blogposts/ux-research/video-pantallas.gif)

### The results

The conversation confirmed that when buying in online stores, 92% of users go directly to websites when they need something very specific, however, **74% said that before buying they usually send links or ask for references** to their close as they seek to compare prices.

On the first part of the test we obtained a **click through rate estimation**, increasing clicks by an average of 57.6%. We could also see how users did not even notice the links without a preview.

![](/img/blogposts/ux-research/ctr_increase.jpg)


The second part did not give us major insights statistically speaking, since in 62.5% of the cases the previews with Flayyer had a 100% success rate over the default ones. Nevertheless it was a huge motivation and it gave us the clue that we were on the right track 😊.

In the third test, 85% chose the Flayyer previews, arguing that the information displayed was very useful, however, some of them also stated that due to the quiality of this information there was the possibility of not clicking if it helped them to discover that the apartment did not have the characteristics that they needed.

In the last test **we tested trust**. We designed previews for ice cream brands and arranged with default previews and written links. 

Here, users stopped to examine closely, but they stated that if they trust who sent them, they probably would not hesitate regardless of the preview, if and only if the subject was interesting, although the presence of logos of recognizable brands gave them the feeling of authenticity. Which led us to ask them what else they felt when they saw the images, and they answered: hunger.

![](/img/blogposts/ux-research/HELADOS.jpg)

The insights that we were able to obtain from this first instance were:

* The use of Flayyer using flayyer doubled (and a bit more) the CTR.
* People don't usually look at links without previews (and trust us, brands that haven't solved this are many more than you might think)
* If your goal is to simplify life for your users, giving them all the relevant information before they click will be very appreciated. We think that this could also reduce the gap between the number of visits and sales conversions.
* But if visits are essential for the company, the information to be displayed must be chosen wisely, so you attract enough attention to prompt them to visit your webpage for more details.
* Trust is a variable issue. There are users who trust their close eyes closed, while others are more cautious.
* Images with logos gave them greater confidence and made them think less whether to click or not, since they assured them that the links would redirect them to an official page.
* Designed previews allow to evoke sensations and show a context in which users could imagine themselves using the products or services.
* We need to try those ice creams.

### 2. The survey

The second test was a two-part survey. In the first part, we sought to validate the results of the first test with a larger sample of people. In the second part we asked them about their preferences by presenting them with Flayyers with different types of visual and informational elements.

In a total of 203 respondents, 78% declared that they usually share links with their close friends, of which more than half said they do it frequently. 

![](/img/blogposts/ux-research/percent-shares.jpg)
When asked how often they click on the links they receive, 70.9% said it depends. And what does it depend on? We asked them this question openly, so they could tell us as much as they wanted.

The responses were very interesting, some people elaborated more than others, but we managed to group the information into two categories with some subcategories. 

![](/img/blogposts/ux-research/click-or-not.jpg)

Users considered that the most important subjects when clicking a link are trust and interest. Sounds familiar?

Within the answers, people declared that **the elements they pay most attention to are the previews, the URL's and the type of information** or text on the preview. We believe that these concepts are directly related to the two categories that we mentioned in the previous paragraph, that is, by providing well designed images and the right information to users we can increase their trust and perhaps their interest.

![](/img/blogposts/ux-research/CATEGORIES-min.jpg)
Later in the survey, we showed volunteers six concepts corresponding to items in a preview of both products and reading articles and asked them to rank them according to their level of importance.

The concepts associated with products were image, brand logo, sale information, price, shipping information and product description. The top 3 items were very clearly defined:

![](/img/blogposts/ux-research/ranking-1.jpg)

While the concepts related to reading articles were author, description, image, headline, logo and type of publication, and were ranked as follows:

![](/img/blogposts/ux-research/ranking-2.jpg)
Here begins the second part.

First, we presented four Flayyers related to a news publication with little changes related to the type of information.

![](/img/blogposts/ux-research/BRIONES-min.jpg)

In this question, respondents preferred the preview that contained the date of publication on the left side of the image. This could be explained with the theory that it is easier for our brain to process texts when they are located to the right side of our vision, as we explained in our blog “Catching attention: Guidelines” (link a guidelines 1)

We also wanted to know if the use of images changes the perception of a brand, or if it causes users a sensation, so we designed a Flayyer for an alcohol sales brand. The test consisted on comparing this design with the default preview and assigning a personality to the brand.

![](/img/blogposts/ux-research/default-casacopete.jpg)

Respondents defined the personality perceived in the default preview as youthful and relaxed, while seeing the Flayyer preview this perception changed to a classy personality.

![](/img/blogposts/ux-research/flayyer-casacopete.jpg)

Then, we made users choose between pairs of Flayyers, changing only the information. In the first pair we used a preview showing in one the location, the price and the logo of the website, and a preview shoowing only the logo of the website and the characteristics of the apartment.

As stated by some questions back, number one pick was the preview where users could see the price, with 65.1% of the preferences.

![](/img/blogposts/ux-research/HOUM-min.jpg)

Then we presented another pair of Flayyers and we tried to ensure that the description under the image showed relevant information, in this case, the price and location of the apartment. 

![](/img/blogposts/ux-research/PORTAL.jpg)


Our hypothesis was that the difference in the results would be narrow, since both previews in their entirety had the same information. Well, people continued to prefer the option with the price and the location within the image.

Finally, we asked if during all the examples users read the descriptions below the image, to which most of them answered they did.

![](/img/blogposts/ux-research/vistas-descripciones.jpg)

To sum up:

* People share links mainly via chat to their closest ones.
* Although there is trust with who shares a link, users are cautious when deciding whether to open one or not.
* Trust and interest both relies on the preview’s image, type of information and URL. In this order.
* Adding your brand logo increases user's trust.
* When talking about products, images are fundamental. Remember, well-made adverts captivate us.
* If you run a site that publishes information, showing the date of publication is very important.
* Using the right images can totally change the perception of your brand, which could bring you even closer to your target audience!
* Even though most declare that if they read the descriptions under the image, it is in the preview where people focus the most.

## Final thoughts

To wrap this up, these seem to be unexplored lands, but we are sure that taking care of the link previews can be a great plus that makes a difference.

And the best advice we can give you: don't make assumptions. Not all of us think the same, although there are certain collective agreements, constantly testing is the key to really knowing how our users perceive our campaigns.

We have developed our Flayyer platform so that you can design and test your creations easily and quickly. Visit the [get started](/get-started) page or [contact us](mailto:hello@flayyer.com) if you want to get the most out of it with a personalized plan. Transform people's interactions into strong marketing opportunities 😊.




# Flayyer: La plataforma para **mejores links**

Nuestra misión es ayudar a todos a controlar y mejorar su presencia en línea desde el momento en que se comparten sus links.

Comenzó como un side-project para crear imágenes con React.js y creció para convertirse en un servicio completo.

La mayoría de los servicios de analítica solo pueden comenzar a hacer el seguimiento cuando los usuarios visitan los sitios web. Flayyer está un paso adelante.

¿Qué red social?

Las visitas al sitio y las ventas no son lo mismo. Te ayudamos a comprender mejor el comportamiento de tus clientes de acuerdo a cada producto o publicación.

¿Qué artículos son más populares?

Te notificamos cuando un link se comparte con frecuencia. ¡Así puedes actuar rápido!

¡Mi publicación se volvió viral!

# Nuestra documentación tiene un nuevo hogar: [docs.flayyer.com](https://docs.flayyer.com?ref=flayyer.com)

Usa nuestro formateador universal de URL [@flayyer/flayyer-js](https://github.com/flayyer/flayyer-js) para integrarnos a cualquier framework.

JavaScript

Podemos ser integrados a cualquier framework Connect.js o Fastify. Cada view engine es compatible.

Express.js

Amamos JAMStack, y por supuesto soportamos Gatsby. Echa un vistazo a nuestra guía.

Gatsby.js

Flayyer fue tremendamente inspirado por este framework, nuestro sitio está desarrollado con Next.js

Next.js

Creamos un paquete pip [flayyer](https://github.com/flayyer/flayyer-python) para que no tengas que lidiar con la codificación URL. Independiente del framework.

Python

Hemos utilizado este framework por muchos años. Armamos especialmente una guía y un ejemplo para amantes de Django.

Django

Nuestra gema oficial [flayyer](https://github.com/flayyer/flayyer-ruby) ya está disponible y lista para ser instalada. Independiente del framework.

Ruby

Potencia tu app de Rails con Flayyer. Estamos desarrollando una gema para hacer esto más automático.

Ruby on Rails

Muchos nos pidieron un plugin para Wordpress, por eso creamos esta librería independiente de PHP con Composer: [flayyer/flayyer](https://github.com/flayyer/flayyer-php)

Para tu blog, e-commerce, portafolio, o cualquier tipo de sitio web que desees. Revisa [flayyer/flayyer-wp](https://github.com/flayyer/flayyer-wp)

Wordpress

Cambia la <meta property="og:image" /> de tu sitio por un link de Flayyer. Revisa nuestras guías de integración.

Atrae más personas a tu sitio

Esta imagen fue creada usando Flayyer.io

# Trabajos remotos **y cultura startup**

En Flayyer puede haber un puesto para ti. Nos encantaría saber más sobre tus experiencias y habilidades en [talent@flayyer.com](mailto:talent@flayyer.com)

¿Aún no te decides?
Empieza con **300 imágenes renovables mensuales** y **1 asiento**, luego podrás subir de nivel cuando tu sitio crezca.

Gratuito

Para pequeños proyectos con pocas páginas

Hobby

Para startups y negocios en crecimiento que buscan viralizarse.
¿Tu sitio web tiene varias páginas? Este plan es para ti.

Para startups y negocios grandes que buscan viralizarse

Escala

Hablemos

Si estás lidiando con alto tráfico o simplemente no quieres preocuparte de cuotas, este plan puede ser para ti.
También incluímos servidores dedicados para mayor seguridad y menores tiempos de entrega.

Blog Flayyer