ISOCCER WEB PLATFORM 

are you ready to get better at soccer?

iSoccer is a complete skill training game. Helps kids get better playing soccer while having fun. It’s for any type of player or team. As a Kid (from 6 to 14 years old), iSoccer is designed to sharpen your skills never doing a boring drill. iSoccer Skill Challenges cover all the essential areas a player needs. As a coach, iSoccer motivates your players to train more at home. It tracks progress so you can give tangible feedback on technical skills. It also challenges the team members to compete and be better.

 

The challenge and the team

iSoccer was a old platform that needed to be rebuilt in Ruby and Rails technology. Our goal was to redesign the entire web application with a new look and feel, but also new user experience. We had the opportunity to start from scratch and create a new product but using the same features that the old one had. During 2012-2013 we rebuilt the new iSoccer coach and player Web Platform. We launched the new product on August 2013. 

Because we were a small start-up team, we had to wear different hats. As a lead UX/UI leader, I had to also take the responsibility of doing the front-end development and creating the new branding.

 

Hello world

I had previous experience in html/css but Ruby and Rails was completely new for me. I learned how to use the terminal and submit and merge code to Github. It was a compete new world for me and I got very exited to learn how to create frameworks in ruby and rails and organize code into a system. It was a challenge to design and code at the same time because eventually I started to design directly while coding. 


Using Bootstrap

First step for creating a web platform was designing a system of components that I could use to build the different pages. I decided to use Bootstrap as a starting point and then customize the UI to our needs and branding colors. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive projects on the web. It worked very nicely with ruby and rails and I could start very fast to design the first screens. 


DESIGING THE FRAMWORK

We needed to launch as soon as possible so we decided to use a lean process. We analyzed the old platform and took the most popular features that kids and coaches loved. We quickly sketched the main pages and then I started to design in hight resolution the different screens. We always had a design review with the team and we approved the designs together. Once the design was approved I started to build the pages into the code.

The iSoccer framework is formed with a left navigation that organizes the content in different sections. When the user enters to the app is going to find a dashboard that summaries the most important content. I tried to make that front page the more attractive and playful as possible. For the new users, we needed to concentrate our efforts on explaining the game from the first screen. It was also very important to have a very easy experience for very young kids.

 

Responsive layout

One of the big challenges of designing iSoccer web platform was to make it responsive. Because we didn't had an Android App, we wanted to have a good mobile web experience for that type of users. Responsive web design allows a site’s layout to change as the screen size being used to view that site changes. A wide screen display can receive a site design with multiple columns of content while a small screen can have that same content presented in a single column with text and links that are appropriately sized to be read and used on that smaller display. I have to accommodate the code to make sure that my deign was responsive. I optimized each view for all screen types and I tried to scale the experience as much as possible. Also, if a user opened our site in an iPhone, we prompted them to download our mobile app from the Apple Store. 


New branding

Meanwhile redoing the web platform I started to redesign the new iSoccer branding. I had the opportunity to change colors, typography and the logotype. We needed a fresh air into the app, make it more playful, light and clean. I soccer was all about learning while having fun. Nowadays kids are tech experts and they know all about games and movies, they choose the brands they like. We also we needed to be modern and attract all kid of ages, from 6 to 12 years old. Are brand principles where: be playful, for teams and families, it’s safe, simple is good.

 

DESIGNING THE LADING PAGES

As part of rebuilding the iSoccer web platform I had to redesign also the public pages of our product. It is very important to have a great lading page because it's the face of a product. We needed to communicate what we do and to who our product is designed for. We used clear headlines, impeccable grammar, we used quotes form real users, we also used strong call-to-actions, and we used images and videos that related our copy. 


Improving results

A/B testing was crucial to drive our revenue up. One we launched iSoccer we needed to increase our numbers. We had a free-premium subscription model and also we had two different type of account; players and coaches. We had to focus our attention in on-boarding this two kind of users with the assumption that parents had also an important role int his process. We used it Optimizely to be able to test A/B solutions and quickly adopt the best direction. We increased our acquisition a 40% and our revenue a 30%.

 

Startup experience

iSoccer was a great school as a ux designer. I learn lots of things and I had an amazing opportunity to impact our users through the design. I learned from failure, I learned from my coworkers, I took risks and I learned how to quickly adapt to new situations. I think you need to believe it what you do be able to work in an startup environment, and I definitely did. You can see some of the advantages of working in a startup in the following infographic I made:

startup.png