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

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

Projetos nascidos na Wrcc Design são premiados no Top Blog


Fala pessoal, tudo bem? Recentemente 2 projetos inscritos no concurso Top Blog foram premiados! Top Blog é uma premiação que existe desde 2008, tem o objetivo de recomendar e reconhecer as melhores iniciativas de produção independente no Brasil em ambiente digital

O primeiro lugar no Juri Popular para na Categoria Social Media, Comportamento e Cotidiano foi para a fanpage BuracosMT, idealizado em 2011 pelo publicitário Wagner Rosati. A página publica as denuncias enviadas pelos seguidores, que vão desde buracos nas ruas, ao flagrantes de motoristas irregulares no trânsito.

BMT também levou o segundo lugar no Júri Técnico para a mesma categoria.


Outro projeto que também levou o segundo lugar é a página Vá Nesta Direção, também idealizada pelo publicitário, levou o segundo lugar na Categoria Social Educação pelo júri técnico.

Vá Nesta Direção é um projeto focado na educação no trânsito, levando mensagens, informações e dicas, de uma maneira atrativa e por isso se destacando no segmento, tendo suas publicações sendo compartilhadas em páginas de autoescolas, profissionais do trânsito e também motoristas e interessados no tema.

Ficamos muito felizes com este resultado, indicativo que estamos fazendo um bom trabalho!



Continue Reading