A better user journey publishing to a Facebook page (Fan Page) in an App

My Goals

As a manager of some Facebook pages for a couple of clients and my own projects, I realized that the user journey for publishing a post on Facebook page is not that clear, it gets users confused and has too much clicks to finally get it posted.

I’ve created a new user journey proposal for a better experience, and hope you like, write what do you think about it, give me your tips.

My Process

  • Analyse the current user journey to publish a post in a Facebook page (fanpage) from a Mobile App;
    Identify the pain point from users;
    Create some sketches about the new user journey;
    UI Design: FB Style Guide and Prototype


These are the first three clicks that an user goes to post to a Facebook page, once it’s opened in the App.

1- The user first select the option Post
2- The user has the image saved in his gallery, so he select the Photo/Video option
3-  The App open his gallery of image, and the user select the image

Section 1

(4) In the fourth screen, the user can write the content and add something more to the post, before clicking NEXT. There is a  white space below the image that could be best taken advantage of.

(5) As you see at the top, there are two options to click; PUBLISH and publish now. One of the pain points I noticed that users were facing, most of them selected Post Now, instead of PUBLISHING at the top, and when the user clicks Post Now, will take to a next screen (6), so that the user can choose: Post Now, Schedule or Save Draft.

The point is that if the user wants to post at that time, he will return to the last screen (5) again, then only after that, he will realize or not, that the correct place to play to publish is the PUBLISH option at the top.

This happens because when users see the Post Now option, they understand that this option is to post immediately and do not want to go to another screen (6) to choose between Post Now, Schedule or Save Draft.

The PUBLISH option at the top conflicts with the Post Now option below.

Most users select Post Now, waiting for the post to be published after that.

If the user wants to schedule the post or save the draft, it will only be shown on the next screen, but so far, the user don’t know where those options are located.

(7) When the user clicks PUBLISH, a modal shows up and confirms that it has been posted (8).

(9) When the user click on Schedule, a modal open to select the day and time to be scheduled by pressing SET DATE.

(10) After set date, the user will be taken to another screen and finally be able to click to schedule.

(11) Once the user click on SCHEDULE, a modal confirms that it was scheduled.

The New Proposal

As you see, there are many steps until you get your publish done, and it is not a linear procedure, and so it takes a lot of time when you have tons of posts.

What I did, was minimize the steps and make it clearer for the user.

Once you have your page opened in your app, the first three steps are the same as currently is:

1- The user first select the option Post 2- The user has the image saved in his gallery, so he select the Photo/Video option 3-  The App open his gallery of image, and the user select the image
(4) When user clicks in Post Now it is immediately posted (5)

Different from the currently procedures, instead of you have click NEXT at the top to go to a new screen to get the links to Post Now, Schedule, Save Draft and Boost Post, I used the white space to put all these options and I took off the NEXT button at the top, so once the user get to this step, he will have all necessary options to choose in the same screen.

(6) When the user chooses to click to schedule, a modal to set date shows up (7), and once this user sets the day and time, just tap SET DATE, and boom, the post is scheduled(8).

See bellow the Interative Prototype that I’ve created by using Adobe XD

In this prototype you can choose Post or Schedule.
You can start by clicking “Post”.

Continue Reading

UX Design for CSM

In this article I will share my experience developing a website from the ground zero, going thru some steps of UX Design process.

The company, callded International Business Support, that helps people to get their Visa to live in America, created a new brand to manage and support for athletes competing in the U.S and worldwide.

Their goals is to helps professionals manage their sponsorships, contracts, and all required necessities, including personal insurance, travel arrangements and legal support.

The goals

They wanted a website to athletes to subscribe with their professional background to their database, so CSM could is be able to find the correct company that would be interested to sponsor this athlete.

They want to the companies that are interested to sponsor an athtlete, to subcribe with their info, so CSM would be able to get these infos from a database to find the best athtlete that fits o their needs.

They also wanted a database with trainers and coaches and a system of news separated by categories of sports.

Be easy to navigate, and be direct to the point.


The first persona is the athlete that are looking for opportunity to live and compete in U.S, but don’t know how and where to find a company that are looking for athletes.

The second persona, is the company that are open to sponsor an athlete, but don’t know how to find them.

The third persona are coaches and trainners that wants to be hired.

The User Experience

The main idea is to create a navigation where both mobile and desktop users were able to see what is the company about, and with only one click, gets to the form page to submit their info. All this with no needs for scroll.

Once the user scroll down, more content about the company shows, as more info about the company and news by sports icons.

The Wireframe

After some sketches, I designed the wireframe using Adobe XD, and created a basic interaction to it, as you can see in the bellow wireframe:

After clients approval, I designed the interface and developed in html and CSS, using Bootstrap.

The header has a rotating background showing some sports to illustrate.

Final UI
Mobile Version

See the website live: Champion Sports Management – www.championsportsmanagement.us

Continue Reading

Delay rate. Charge or not?

When I make a budget for a client, whether it is a website, a logo, or any job that involves design and creation, I take into account not only the complexity of the work, but also, I set a deadline so that I can deliver the final product with quality, checking for any errors, test phase, etc.

If I have time, with only few jobs in progress, I can plan to deliver a service with a shorter term, since my dedication will be spent most of the time dedicated to this job. When otherwise, I ask for more time than usual, so I can keep the same quality of delivery, without compromising the other jobs in progress.

Many professionals combine payment with their customers, setting 50% before and 50% after finalizing and that is where the danger lives.

What a lot happens, mainly in the development of sites, clients, for lack of planning or sometimes in bad intentions, do not deliver the content so that we can finalize and deliver on the agreed time, so with the site not finalized, we ended up not receiving , once we were “stuck” by agreeing that the second payment would done on the delivery of the site.

When the customer decides to contact you to finish, it has often been months, and you are involved in other projects, do not have the same time as before, when you made the initial budget, and thus, the customer begins to ask you to finish it, as if you were eternally disposed.

Unfortunately if we do not present a contract before, describing these points through clauses, we are subject to entering such a situation, but it is worth remembering that even with the contract this happens.

And what the output, finalizing the site to receive, tightening their agenda and their commitments with a job that you had already discarded for lack of customer feedback, after dozens of emails charging return and that suddenly resolved resurface from the shadows?

The client should know that you have other commitments and are not always available to him, and you can not and should not sacrifice yourself for it, so the best way is to talk, put the situation on the table and come up with a solution.

First is to reassess the issues, and calculate how many hours it will take to finalize the site completely, once you finally have all the content in hand, then you analyze how your time is and how you will reconcile the delivery of this pending and not compromise their other activities.

Since this is a job that has suddenly come up in the middle of your activities, you can not simply put it on the list and the chores, no matter how many jobs you do not have, but you need to add a so that you are not harmed, and the customer understands that your work is professional, otherwise the client will end up dictating the norms of your business, and this is not “business”, you will end up weakening it up front.

You may call it a “late fee,” or you may charge to reopen the job because you think it has been abandoned, anyway, it goes the way you find most comfortable, but always being clear, objective, and having primarily ways of because he considered the work abandoned, for example, presenting history of his last emails charging content and pending issues that have never been delivered to the present time.

Understanding the client and having common sense, know that sometimes they do not do it wrong, but you have to value yourself to survive as a freelancer.

Continue Reading

Taxa de atraso. Cobrar ou não?

Quando faço um orçamento para um cliente, seja um website, logotipo ou qualquer trabalho que envolve criação e design, levo em consideração não apenas a complexidade do trabalho, mas também, defino um prazo para que eu consiga entregar o produto final com qualidade, prevendo eventuais erros, fase de teste, etc.

Se eu estou em um momento que há poucos trabalhos em andamento, eu consigo planejar a entrega de um serviço com um prazo menor, já que minha dedicação ficará na maior parte do tempo dedicada a este job. Quando o contrário, peço mais tempo que o usual, assim consigo manter a mesma qualidade de entrega, sem comprometer também os outros jobs em andamento.

Muitos profissionais combinam o pagamento com seus clientes definindo 50% antes e 50% depois de finalizado e é ai que mora o perigo.

O que muito acontece, principalmente no desenvolvimento de sites, clientes, por falta de planejamento ou as vezes na má intenção, não entregam o conteúdo para que nós desenvolvedores possamos finalizar e entregar no prazo acordado, assim com o site não finalizado, acabamos não recebendo,  já que ficamos “presos” por ter combinado que a segunda parcela fosse paga na entrega do site.

Quando o cliente resolve entrar em contato com você para finalizar, muitas vezes já se passaram meses, e você está envolvido em outros projetos, não tem o mesmo tempo de antes quando fez o orçamento inicial, e assim, o cliente começa a te cobrar, como se você estivesse a disposição eternamente.

Infelizmente se não apresentarmos um contrato antes, descrevendo estes pontos através de cláusulas, estamos sujeitos a entrar numa situação assim, mas vale lembrar que mesmo com o contrato isto acontece.

E qual a saída, finalizar o site para poder receber, apertando a sua agenda e seus compromissos com um trabalho que você já havia descartado por falta do “feedback” do cliente, depois de dezenas de e-mails cobrando retorno e que de repente resolveu ressurgir das sombras?

O cliente deveria saber que você tem outros compromissos e não está a disposição para ele, assim você não pode e nem deve se sacrificar por isto, então a melhor maneira é a conversa, colocar a situação na mesa e apresentar uma solução.

Primeiro é reavaliar as pendências e calcular quantas horas vai levar para finalizar o site por completo, uma vez que você finalmente tem todo o conteúdo em mãos, depois você analisa como está o seu tempo e como vai conciliar a entrega desta pendência e não comprometer suas outras atividades.

Como este é um trabalho que de repente surgiu no meio de suas atividades, você não pode simplesmente coloca-lo na lista e afazeres, por mais que você não esteja com muitos jobs, mas é necessário incluir um valor a mais no orçamento final, de forma que você não fique prejudicado, e o cliente entenda que o seu trabalho é profissional, caso o contrário o cliente vai acabar ditando as normas do seu negócio, e isso não é “business”, você vai acabar enfraquecendo la na frente.

Você pode chamar de “taxa de atraso”, ou você pode cobrar para reabrir o job por considerar que havia sido abandonado, enfim, vai da maneira que você achar mais confortável, mas sempre sendo claro, objetivo, e tendo principalmente formas de mostrar o porque considerou o trabalho abandonado, como por exemplo, apresentando histórico dos seus últimos e-mails cobrando conteúdo e pendências que nunca foram entregues até o presente momento.

Entender o cliente e ter bom senso para não perde-lo, saiba que as vezes não fazem por mal, mas é preciso se valorizar para sobreviver como freelancer, esse é o jogo.

Continue Reading

My experience working in construction of house and the relationship improving construction of websites

You may be wondering, what a Web Designer was doing in construction, knocking, putting floor to floor on the wall, wearing the worst clothes, but I’ll go over the lines below to show this relationship, and what I learned in 3 months working in the United States in construction, more specifically “helper”, known as servant or helper of mason.

After 10 months in Dublin working as graphic designer, going through two companies and freelancing, I still was not satisfied and I was looking for a company that was more secure than doing freelancing work for customers who wanted to explore you the most.

After an invitation of a great friend, I went to the USA to “take a break”, work with him, make some money, and maybe, work in design creation, but the main point was to work on construction.

A little bit of everything happened, I worked in the construction, I did walks and good business as a freelancer. I had the opportunity to manage an important project on the web, in addition to developing 2 websites, all this experience amidst hard construction work.

I was scared in the begining, anyway I went thru this and I can say that I was successful, the secret is to face your fears, so here it goes.

Whatever work you start you need to study, be it for an online project like website development, or just mix the mass. Sometimes the manager will ask you to mix the dough, which basically is to put a quantity of powdered cement in a bucket, mix with water and beat. The point is, some will want this mass to be more consistent, others that this mass is more watery, depends on the floor, the size of tile, the pottery, or sometimes even the personal taste of each professional who asks.

Meeting the expectation of those who pass the service is essential for the success of the work, be it a website or a beautiful room with well-aligned floors between them. Moving on to the digital world, we also go through the same steps, but sometimes we forget to understand the customer, how he likes, what he expects, and so often the customer does not approve, ask for adjustments, or even, situations, demolish and start from scratch.

Well laid ceramic tiles require care, you may have no idea what the work is, but there, we are dealing with planning, math, which involves alignment, spacing and leveling, and a lot of patience.

Unlike codes, where an error can be circumvented with a “control + z” or “cmd + z”, in the works this represents many hours of in vain effort, an error of measures for example, can make that floor that you spent all day sitting, be taken off, and thank you if the cement has not dried yet.

I’m not slowing down the work of the programmer, I’ve spent days breaking my head to solve a CSS puzzle, php lines of codes, and I know how laborious and develop a portal with many features. How many times I found it boring to have to put the “tags” (paragraph) and (broken line) in long texts sent by the client without formatting, or how many times I was enraged when a site viewed cool on the Iphone but not on Android and you do not find out the reason.

The great learning is to know that our problems developing a website can be seen as a challenge and not as something “boring”, so I learned to be more patient and careful, to understand the client, just as the mason would like you to mix the mass, align the images, with the same care that aligns the tiles, I believe that, thus, it is possible to build something of value, be it a building, or a site.

Continue Reading

O que aprendi trabalhando na construção para ser um melhor Web Designer?

Você pode estar se perguntando, o que um Web Designer foi fazer na construção, batendo massa, colocando piso no chão, na parede, usando a sua pior roupa, mas irei nas linhas abaixo mostrar essa relação, e o que aprendi em 3 meses trabalhando nos Estados Unidos na construção civil, mais especificamente “helper“, conhecido como servente ou ajudante de pedreiro.

Após 10 meses em Dublin trabalhando como designer, com passagens em duas empresas e fazendo freelas, ainda não estava satisfeito e buscava uma empresa com mais segurança do que fazer freelances para clientes que mais querem te explorar.

A convite de um grande amigo, fui parar nos EUA. A ideia foi “dar um tempo”, trabalhar na construção com ele, fazer uma grana, passear e quem sabe fazer uns sites. Aconteceu um pouco de tudo, trabalhei na construção, fiz passeios e bons negócios como freelancer. Tive a oportunidade de gerenciar um importante projeto na web, alem de desenvolver 2 websites, toda essa experiência em meio a duros trabalhos na construção.

Qualquer trabalho que se inicie é preciso de estudo, seja para um projeto online como desenvolvimento de um site, ou simplesmente bater massa. As vezes, o responsável em fazer o piso vai lhe pedir para bater a massa, que basicamente é colocar uma quantidade do cimento em pó num balde, misturar com água e bater. O ponto é, alguns vão querer que essa massa seja mais consistente,  outros que essa massa seja mais aguada, vai depende do piso, da cerâmica, ou as vezes até do gosto pessoal de cada profissional que lhe pede.

Atender a expectativa de quem passa o serviço é essencial para o sucesso da obra, seja um site ou um belo quarto com pisos bem alinhados entre eles. Passando para o mundo digital, passamos também pelas mesmas etapas, mas as vezes esquecemos de entender o cliente, como ele gosta, o que ele espera, e assim, muitas vezes o cliente não aprova, pede ajustes, ou ate mesmo, na pior das situações, demolir e começar do zero.

Pisos de cerâmica bem assentados requer cuidados, talvez você não tenha ideia o trabalho que seja, mas ali, estamos lidando com planejamento, matematica, o que envolve alinhamento, espaçamento e nivelamento, alem de muita paciência.

Ao contrario dos códigos, onde um erro você pode contornar com um “control+z” ou “cmd+z”, nas obras isso representa muitas horas de esforços em vão, um erro de medidas por exemplo, pode fazer com que aquele piso que você passou o dia inteiro assentando, seja retirado, e agradeça caso o cimento ainda não secou.

Não estou diminuindo o trabalho do programador, já passei dias quebrando a cabeça para resolver um enigma em CSS, e sei o quão trabalhoso e desenvolver um portal com inúmeras funcionalidades. Quantas vezes achei entediante ter que colocar as “tags” (paragrafo) e
(quebra de linha), em longos textos enviados pelo cliente sem formatação, ou quantas vezes fiquei enfurecido quando um site visualizava legal no Iphone mas não no Android e você não descobre o motivo.

O grande aprendizado é saber que nossos problemas ao desenvolver um site podem ser encarados como um desafio, e não como algo “chato”, assim aprendi a ter mais paciência e cuidado, buscar entender o cliente, assim como o pedreiro gostaria que você batesse a massa, alinhar as imagens, com o mesmo cuidado que se alinha os pisos, acredito que assim, seja possível construir algo de valor, seja um prédio, seja um site.

Continue Reading

Google Web Designer

Google Web Designer is an awesome tool for you who wants to animate your banner and go further in web design.

I’m the one who used to work with Flash, back in 2009 but because this tool is not anymore welcome in browsers, I stoped to use, but I was missing something like this.

Looking for jobs in Ireland, I realized that many companies ask for knowledge in this tool, so I decided to download it and see what is going on.

Because I had this background in Flash, it wasn’t that hard to get used to it, so I did this little banner as a test. I also like the Guinness advertisings, so I came up with this animation.

I found a picture on google images, and with photoshop and illustrator I did all the graphic elements on screen, and that’s the result.

I think it’s not bad for my first banner after years without work with animation.

Continue Reading