Team Builder IA Map

There are lots of changes going on these weeks. The biggest difficulty for me is being asked how my app really helps the soccer coach.

While asking around some soccer coaches. For professional coaches, they need more detailed data such as Dribbles, Shots, Interception, Tackling and etc instead of brief rating systems. These kind of data is a dead end for my previous design. After all the struggles, I decided to change the main target audience. Only focus on soccer players. Make my app much more useful in player aspect.



Recently I found a free app called Koala which is very useful to me. In short words, it's a real-time compilation app for Sass and Less.

By using it, I finally get rid of my command lines which are so annoying when I forgot to end "watching". I used to cover myself pretty frequently. Another interesting thing to find is that Koala has a Chinese version too and actually author "Ethan Lai" is working in Tencent. As it's the biggest Internet company in China, it does have lots of brilliant people. By the way, I was also curious how could Ethan use Google+ as social media. As you know, China has IP blocking. Google is not allowed to be used in China. Even with a VPN, connecting with the google inbox will spend like 10 minutes plus.


Coding in progress

Despite the interface and micro elements, I am trying to connect those separated pages that I created.

Since I am a design driven guy, it makes me annoying that those pages don't look as nice as I expect. Finding the default style in bootstrap and covering it with my design also drives me crazy. You will never know where is that div inherited height from until you inspect it. After roughly linking my pages, I found my user flows need more work to do. I am lacking consideration while imagining how users gonna use my app but as soon as I get to be the first user, I realized many problems are very obvious and I just didn't see them. At this moment, I am fixing the user flows and making every page connect reasonably. Hope problems would be solved soon.


The 4th Week in developing

This week I'm heading to the most difficult feature the tactics map which is the core in my design.

Because of the variety of the tactics, first of all, I need to find a way to divide the playing field into several blocks. Then I can lay the players into these blocks so that they can be in the right position in specific tactics. After putting these tactics together in the illustrator, I figured 5X15 is the best way to fit in every tactic. I made ul as column and list as a row so that I can easily to format the positions. By using the two classes, "column class row class". I think I can locate every piece of the field. Um, I think that is a good beginning though I haven't considered the functionality yet.


15 Weeks TeamBuilder APP plan

Project Summary

TeamBuilder is an app designed to connect soccer coaches and their players and help coaches manage their team much more easily than before.

Week 01

Make the project plan

Week 02

Bootstrap construction

Week 03

Sign up/Login in(two version)

Week 04

Account Info

Week 05

Create multiple teams

Week 06

Switch between multiple teams

Week 07

Add/Load the players' info into Database

Week 08

Call the players' info from Database

Week 09

Add tactics map part 01

Week 10

Add tactics map part 02

Week 11

Connect coach and players part 01

Week 12

Connect coach and players part 02

Week 13

Apply drift CSS

Week 14

Testing & bug fixes part 01

Week 15

Testing & bug fixes part 02


My favourite five best desgined sites


PCPARTPICKER can help users easily build their own PCs and find the cheapest components through different sites. It also has the featured guides for beginners. Evermore its mobile version is well designed and easy to use. Recently I bought a GTX 970 for just over $300. The site is very useful for everyone plan to replace their PCs' parts.


The awards that recognize the talent and effort of the best web designers, developers and agencies in the world. The site collects the most creative web developers in the world. Through awwwards, Inspiration is overflowing. Seeing other people's great work reminds me never stop learning since there are so many incredible people out there.


Fandango entertains, informs and guides film fans with must-see trailers and movie clips, exclusive and original content, insider news and expert commentary. Every time before I went to see the films. I checked the Fandango. It can automatically find the closest theaters from your location. I can buy the tickets directly online and find the cast related film. By the way, Fandango looks great on mobile as well.

4. tunefind

TuneFind helps users find music from their favorite TV shows. The UI looks clear and nice. I always use it to find covers from "suits". Since most of the musics from TV shows are not well-known or acoutic covers by other artists, they're difficult to look up.

5. Jackthreads

Jackthreads is an online store for men's fashion and style. Not much to say, I really like how it filters its products.


Waiting for the "ah ha" moment, the light bulb to flicker or lightning to strike is a huge misconception to creativity. Sure, unplanned and unexplained moments do happen - and can be our best ideas. In the day-to-day if you wait for lightning to strike you could spend a long time waiting in the rain.

Creating a routine is a shortcut to doubling artistic output. Like most things, routine and practice go hand in hand with performing to the best of ones ability. This goes past practicing a certain skill for hours. It’s allowing the skill you've learned to happen naturally. Is that letting it go unplanned?

The line between the two might be blurry now, between planned and unplanned activities. I've found that in order to fully utilize a skill you need to be in a certain environment. Similar to a pitcher only throwing a 90 mph baseball with pinpoint accuracy when it’s down to the final inning. At this point the drills and practices the pitcher has done come into play. Having “been” in the situation before - throwing the game winning pitch comes naturally.

As you can see, routines play a large part in creativity. Walking up, driving to work, sitting at a desk, getting a cup of coffee and creating characters in Illustrator Monday to Friday eventually become such a routine that the creativity of it becomes effortless. If you no longer have to put the effort in to get settled in to create. Creating becomes much more accessible. I believe that routine and structure are the best foundations for allowing your mind to roam free.

Give this method a try and see how your work improves!