Back to nicholasswanson.com

Mobile Website for Major League Soccer

Mobile Website for Major League Soccer

September 2013

Introduction

As someone who has used mobile sports websites frequently, this project hits close to home. As I'm sure your browsing data shows, mobile usage is only continuing to expand, and the need to provide strong performance and functionality is growing by the day. While using a platform like Mobify may have provided a solid short term solution, I agree that the time is now to look at building a more integrated experience across screen types.

Although the current mobile sites truncate a lot of functionality and content for the sake of engineering simplicity, they have no doubt provided vaulable data about the browsing habits of users. I don't want to throw this out, but use it to move the mobile (and all web) experience forward. Since I don't have access to this data, I decided to gather some of my own. I put together a (very) short survey using SurveyMonkey so that I could poll friends and family about their browsing habits, and used the results to help prioritize the IA. I would imagine that we at MLS would do the same thing using the larger data set. While I analyzed the data I simultaneously began sketching out a system that I felt MLS could use, such that no matter the top level or secondary navigation items, the system was flexible enough to support reorganization of content. When I was satisfied with the solution, I moved into Illustrator (my mockup tool of choice) in order to mock up a few example screens so that I could demonstrate my proposed solution. I made many various design decisions based purely on the project at hand, not on any directives handed down from MLS, and made note of most of them.

After all was said and done, MLS and I actually had the opportunity to later work on the official MLS Matchday apps for the 2014 season. That was cool, so check it out in the updates section.

Table of Contents

  1. Current Mobile Platform
  2. Survey and Results
  3. Sketches
  4. High-Fidelity Mockups
  5. General Notes
  6. UPDATE

Current Mobile Platform

In order to move the mobile platform for MLS clubs forward, I wanted to gather some screenshots of the current sites. I explored the home pages of several clubs, and focused on diving into the Seattle Sounders FC website to view the various page templates. Here are some of the screenshots that I took and organized into a grid:

screenshots of current mobile site

Using the current layout, I assumed that the navigation had been chosen based on browsing data, and compared that to the web templates.

current desktop layout of soundersfc.com

From there, I put together a very basic list+sublist to wrap my head around the IA for both mobile and dekstop, and use that to think about how to begin to bring the two together to eventually create a single platform that could run across all devices. I used SoundersFC.com as the desktop IA, knowing that each club has their own modules of content that they would want to be able to switch out seamlessly.

Mobile IA

  • Home
  • Roster
  • Schedule
  • News
  • Video
  • Standings
  • Tickets
  • Full Site

Desktop IA

  • Home
  • Team
    • First Team
    • Stats
    • Team Office
    • U23 Team
    • Coaches
    • Contact Us
    • Academy Teams
    • Standings
    • Appearances
    • Callouts for FB and Twitter
  • Matchday
    • 2013 Schedule
    • 2013 Reserve Schedule
    • Champions League
    • Download Schedule
    • Seating Chart
    • Academy Schedule
    • Matchday Guide
    • Transportation Guide
    • Stadium Guide
    • Callouts for Hotel partners and ROOT Sports match replays
  • News
    • Latest Headlines
    • Photos
    • Videos
    • Event Calendar
    • Council Blog
    • Sounders Social Media
    • Supporters Blog
    • Callouts for match replays by ROOT Sports and "Current Promotions"
  • Tickets
    • Season Tickets
    • 3-match pack
    • Single Match tickets
    • Group tickets
    • Request Information
    • Suite Information
    • 3D seat viewer
    • MatchPass
    • My Account Manager
    • Callouts: Cadillac Club and Slalom Experience
  • Alliance
    • About
    • Season tickets
    • Council Blog
    • Chairman
    • Council FAQ
    • Council Vote Totals
    • Council
    • Supporters Groups
    • Council Members
    • Callouts for vote/nominate for council, purchase a membership
  • Outreach
    • Community Partners
    • Outreach Programs
    • Volunteer with us
    • School visits
    • Appearance requests
    • Donation requests
    • Autograph sessions
    • Int'l family festival
    • Callouts for "united we serve" program and "Together we play" program
  • Youth
    • Summer camp
    • Junior Alliance
    • Register online
    • Fantasy camp
    • High school prep
    • Spring break camp
    • Youth development
    • Callouts for "camp programs" and junior alliance
  • Pro Shop
    • Home
    • Mens
    • Pro shop appearances
    • Hats
    • Souvenirs
    • Store Information
    • Jerseys
    • Womens
    • Contact Us
    • Callouts for sale items and MLSgear.com

While I believe that MLS clubs can do more to simplify their IA (92 links in all inside the menu), I wanted to approach the navigation in a way that allowed any number of top level and second level links without resulting in a different experience (outside of the content itself). With that, I set up a short survey to collect a bit of data to help me prioritize.

Survey and Results

The survey was limited in its scope and distribution, but even the small amount of data collected was enough to show a priority in mobile content. While I collected some basic demographic information, the key question was around ranking the importance of certain browsing activities. Here's what I found:

When you visit your sports team(s) website, what are you trying to accomplish?

survey responses to activities performed on mobile devices

Note: the radius of the circle is equivalent to 100% of reponses. The individual responses are proportional to 100%.

Something I realized in the middle of the process was that there was no direct link to the Pro Shop, where users could browse and purchase MLS gear. Mobile shopping is a huge market, and even though the current buying platform isn't mobile-friendly it would at least provide the option to browse until a mobile-friendly version is built. I made note of this and considered integrating a Pro Shop element in the mobile site as I sketched out possible layouts.

Sketches

I usually start laying out elements with sketches, as it is the fastest way for me to put down and manipulate early ideas. For a possible home page template and nav system I spent a short time sketching before moving into Illustrator.

sketch photo 1 sketch photo 2 sketch photo 3

High-Fidelity Mockups

Home

proposed mobile home template

proposed mobile home template - full view

Hero article. I would imagine this being an interactive area, where the user could swipe to move between articles/videos. When a match is currently taking place, this area would become a lead-in for Golazo. I have an overlay for the image that slightly darkens the upper and bottom portions of the image, so that the logo and menu button up top and text at the bottom are still readable if the image itself is very light.

"Next Match". Due to the popularity of browsing for a team's schedule, I wanted this module to appear directly below the hero area. I would see this as another interactive area, where swiping back would reveal past matches and their results, and forward being upcoming matches. To reduce page weight, we could cap the number of results to +/- 3, and then present a link for Full Schedule. Directly below the next match information would be several buttons for common actions, such as buying tickets, viewing the matchday information, or viewing the full schedule.

League Standings. Fairly straightforward, this is simply a module for displaying current league standings, with tabs for switching between East and West. We should default the division to the current team's division, and highlight that team in the list.

Pro Shop. A module that I thought should be included in mobile, with a simple display that could be swiped through (perhaps 5 in a rotation). This could show the latest Pro Shop gear, sales, etc., in order to provide for fresh content.

Social Media. At this point I feel comfortable providing links to external content about the team. If the user is beyond news, match info, standings, and the latest gear, providing the team's social media links makes sense here. And with every team having a Facebook, Twitter, and Instagram account, we know that the layout can be consistent.

Footer. A few clear links is all we need here. The first should be a link up to the full menu, in case the user missed it at the top or didn't find what they wanted while scrolling. If the menu isn't sufficient, searching, the full site, or contacting the club are a few ways to reach content or people.


proposed mobile menu

Menu

Opening the menu. When a user taps the menu icon in the top right, the content shifts down to reveal the menu. A sliding transition for the content would be combined with the fade in of the menu text. The user may scroll down to access the content, there is no need to close the menu in order to achieve this.

Opening a sub-menu. A user may tap on any top level item to be brought to it's respective home screen. Most top level items will have sub-items on the desktop, and to make that content accessible, an expand/collapse tap is present on the right hand side of the row. When the user taps, the other top level items fade out, so as the sub-items are presented it isn't overwhelming to the user. The user backs out to the menu by tapping the collapse, or closes the menu altogether by tapping "close" icon.

Logo. The logo is a link to the home page (e.g. soundersfc.com).

General Notes

Fonts.

The fonts used currently are default system fonts, and therefore not very inspiring. I understand that previously there may have existed engineering and financial constraints, however currently the MLS is a large entity that is competing against some of the most powerful and entrenched leagues in the world. Therefore, default is not enough. While these fonts I chose were experimental, I do believe that professional fonts offer the best option for creating a consistently impressive brand. Additionally, custom fonts allow MLS to display the same font across all platforms, since system fonts aren't the same across machines (e.g. Helvetica on Macs, Arial on Windows, Segoe on Windows phones, Roboto on Android).

kulturista for headings

Kulturista for headings. Kulturista is an athletic, slightly aggressive font. It has strong curves, and looks great at both large and small sizes. It is available in many weights, and as both a desktop and web font.

kulturista for headings

Univers Next for body text. Univers (and Univers Next for web) is an elegant font that is extremely readable. It has a slightly thinner width than standard fonts, which means a few more characters per line on small screens. It is available as a desktop font or a specially-designed web font.


Color palette.

In designing the templates, I kept in mind that each team would have their own team colors to use in order to brand their site. Wherever colors have been used on the home screen, team colors could be switched out. We would have to be mindful of clubs like the Crew, who only use two primary colors and have a color that wouldn't work with white text (yellow).


Update: MLS Matchday for iOS and Android

While I didn't end up joining the MLS Digital team, I did have the awesome opportunity to work with them on the official MLS Matchday apps for the 2014 MLS season. Without further ado, a few screenshots from the app:

MLS Matchday for iPad, iPhone, and Android MLS Matchday for iOS - iPhone, iPod Touch, iPad - and Android

 

You can also see the project on Dribbble.


That's the end. I hope you enjoyed.