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 applications.
Cross-platform design
Each screen needed to support iOS phone and tablet, Android phone and tablet.
New screens, new hierarchy
Bringing matchday scores to the forefront and adding personal preferences & notifications were some of the new aspects of the applications.
Mobile website template 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
Current Mobile Platform
Survey and Results
Sketches
High-Fidelity Mockups
General Notes
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:
Using the current layout, I assumed that the navigation had been chosen based on browsing data, and compared that to the web templates.
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 (92links 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
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?
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.
Hi-Fi
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.
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
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).