work_it's sports

IT’S SPORTS is a new sports agency in Korea, established in 2020. IT'S SPORTS gives players the best management service and contract business. This project aims to create a website promoting the new brand IT'S SPORTS to potential customers, athletes, and related industries.

VISITE IT'S SPORTS

CLIENT

- IT'S SPORTS

MY ROLE WAS

- 100% of UI Design

- 80% of Design Strategy

- 50% of Front-end development

tool

- Figma

- Photoshop

- Html / Css / jQuery

I WORKED WITH

- IT'S SPORTS marketer

- Project manager

- Fellow designer

- Developer

YEAR

- JAN 2021 ~ AUG 2022

[Final Design]

What did the client want?

After interviewing the client for the direction of the website, we defined what the business and target users wanted. IT'S SPORTS wanted to hire new athletes. Target users visit IT'S SPORTS to develop their careers. So, the target users wanted to know what kind of help they could get from IT'S SPORTS. In summary, IT'S SPORTS should inform the athletes what help they could provide to athletes through the website to hire them.

WEBSITE GOAL

After that, we did the competitive analysis. The commonality of the competitors we found was that they emphasized the professional appearance of the players in photos. We developed the goal of IT'S SPORTS website based on the previous steps.
‍
First, the IT'S SPORTS website should convey the image of a professional player to potential customers and stimulate their emotions.
Second, it should show potential customers how the website can help them develop their careers. In this way, the goal was to convert potential customers into IT'S SPORTS athletes.

WEBSITE STRATEGY

Based on the previous steps, We made a IT’S SPORTS website funnel structure. So basically, After the top funnel grabs customers’ attention, that attention goes down to the middle funnel where they can understand about IT’S SPORTS. After that customers' attention goes down to the bottom funnel, customers can decide whether they contact to IT’S SPORTS or not.

1. TOP FUNNEL

- Main banner

The top funnel starts from the main banner, which intends to draw the user's attention and, at the same time, create curiosity about this website. Players' professional photos attract users' attention by representing the IT'S SPORTS identity.

2. MIDDLE FUNNEL

- Players > NEWS > Business

And, after the main banner catches the customer's interest, that interest comes down to the middle funnel where customers can understand It's Sports with three steps, players, news, and business section. When users clicks on a player card, it brings them to a page where they can check out that player's information such as like award, career and education history.

2. MIDDLE FUNNEL

- Players > NEWS > Business

After the Players section, when users come down to the news and clicks the News, it brings them to an external news link. I wanted to let potential customers know that IT’S SPORTS players are still active and attracting much attention. After the news section, when they click on the business card, it brings them a page where they can know what kind of business IT’S SPORTS is doing.

3. BOTTOM FUNNEL

- Contact

After Customers understand IT’S SPORTS through the middle funnel. They go to the bottom funnel, where they can decide whether to contact IT’S SPORTS.
‍
The flow in the bottom funnel is as follows:
First, the title tells what IT’S SPORTS does. The second subtitle suggests the benefits they can get if they join IT’S SPORTS. Third, based on that understanding, the customer clicks on the CTA to contact IT’S SPORTS. Finally, their eyes land on the address and phone number of IT'S SPORTS.

CHALLENGE

- PC vs MOBILE

The challenge I encountered in the top funnel was the difference between PC and mobile. I filled the entire PC and mobile screen with pictures of professional players to enhance customer immersion.

But after I tested users, user behavior on the PC and mobile was different. On mobile, users didn't scroll down and just waited to see what would happen next, even if the banner was rolling. They said they thought it would go to another screen when the banner rolling was done.

CHALLENGE

- PC vs MOBILE

I thought users didn't scroll down because there was no clue they could scroll down. To solve this issue, I used the bleeding edge to suggest they can scroll down. However, the problem was how much bleeding edge to give. That was another issue.
‍
So I brought this issue to the team meeting to get insight and find a solution. During the meeting, I looked for examples between various mobile websites. What they had in common was that they all had the golden ratio.

We thought this was an excellent idea to solve this problem. Because the golden ratio gives visual stability and offers users a clue that they can scroll down on our mobile website. This golden ratio was used to provide the same user experience to other pages as well as the main landing page and other items on the website.

WHY THIS LAYOUT?

- F PATTERN

I used the F pattern for the entire layout to catch user attention and for readability. Because the user's gaze moves from left to right on a website. The F-pattern follows the natural way humans view the website and help improve user readability.

WHY THIS LAYOUT?

- Z PATTERN

Generally, the Z pattern is better for simple designs with less information and for emphasizing a few key elements. Since our goal is to get potential customers to contact to the IT’S SPORTS, if i use this pattern the user’s attention would naturally move to the CTA or phone number.

WHY THIS LAYOUT?

- Z PATTERN_CTA

However, at the bottom funnel, users did not pay much attention to the CTA button I intended. Instead, they showed much interest in the phone number. There may be several reasons for this, such as the CTA button does not look like a button, the color is not conspicuous, or I had to move the CTA button to the main banner. So, I think there is more chance of improving the CTA button. If I do a project similar to this in the future, I want to make a better result with the experience and insights I gained here.

FINAL DESIGN

SUB PAGES

MOBILE PAGES

MAIN PAGE

PLAYERS

BUSINESS

CONTACT

What I've learned

GOOD

1. I tried to provide the same user experience of web and mobile to customers. In the process, I was able to learn the characteristics of the web environment and the mobile environment.

2. I learned the website-building process from start to finish. At first glance, it looks like a simple website, but I've learned that it takes a lot of preparation, effort, and cooperation.

BUT...

1. The CTA button has a chance for improvement. It would have been nice to have tested the CTA button and applied it to the website.

2. I wonder if customers experienced the funnel the way I intended. If so, I wonder how much the process influenced their decision.

IT'S SPORTS RESPONSIVE WEB DESIGN

RGB #233D84

RGB #2244B5

RGB 03102F