Today, we launched a completely redesigned and rearchitected mobile MatchCenter experience. Check out the MLS Cup MatchCenter, or any other 2013 match, on your mobile device to check it out. I had the great pleasure of leading design and implementation of the mobile website from scratch. I have been a developer for most of my career, but having obtained knowledge in the ways of User Experience and design for the last 5 years, I gave it a go. This was my first design project outside of personal projects, so please be gentle. Now then, I’d like to tell you a little about the design process, but first…

TL;DR Screenshots!

Mobile First Design

Several months ago, we decided as a team that the mobile experience for our MatchCenter was not all that it could be. Mobile users are a major percentage of our website visitors, and we weren’t delivering the best to them. It was the byproduct of a desktop design that had been progressively hacked to work on mobile with responsive stylesheets. There was a laundry list of things that we didn’t like, and we concluded it was best to start over. That isn’t a decision we make lightly.

Starting over on the mobile experience allowed us to utilize what is called mobile first design. Essentially you start by designing the mobile website to your liking. If and when you decided to make your website responsive, you add onto the mobile design. This is in stark contrast to how most mobile websites are born, which is usually a tweaked subset of the desktop website. While it sometimes works, it usually doesn’t end up the way you would like.

Increasing the data pixels

Delivering a great experience on mobile is all about content. I’m a big fan of data visualization pioneer Edward Tufte, so I utilized one of his tenets to guide my design:

Decrease the non-data pixels

Essentially it boils down to getting rid of all the excess stuff. The chrome, the drop-shadows, the fancy annoying animations. The data is the content, and it should take the forefront and most of your pixels. Legends, labels, and axis may be necessary, but they shouldn’t distract from the important pieces.

You will also notice that several of the visualizations have morphed from the desktop version. I focused on immediate digestibility for all of the data. If you couldn’t figure out what was going in 5 seconds, then the visualization has failed. This meant things like the passing matrix had to go. The same data will definitely make its way back into the MatchCenter, but in a completely different outfit.

Code-sharing

Our MatchCenter runs on a Node.js based technology stack, which utilizes JavaScript as the language. This has many upsides, but one potential benefit is sharing code between the browser and the server. While this sounds great in principle, it is often hard in practice. The new mobile design actually accomplishes this goal. We use a new framework from Facebook called React to make that happen. Having a single place for all the rendering will reduce the bugs that make it into production, and eliminate differences between what the server renders and what you see in real-time while a match is happening. It also happens to be incredibly performant because of the virtual DOM it uses.

What’s next

This by no means the final form of the MatchCenter. We will continue to fix bugs, design new visualizations, and eventually take what we learned to the desktop version. Optimizing the real-time data is particularly important because that has a direct impact on performance and battery life of your mobile device. If you have thoughts on the new MatchCenter, please let us know on our feedback site.