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.

Personas

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