Redesigning a Bad User Experience
As for User Experiences I like a little less, one of my least favorite sites I visit somewhat regularly is the site for Baltimore City Adult Soccer. It is set up through a host called LeagueApps, but I’ve seen leagues (such as District sports in DC) set up through this app that are much much better, so the problems are particular to BCAS.
The first problem is that its URL is tedious and it is difficult to find. When I initially started looking for a soccer league in Baltimore I had to search through several pages on the google search page to find this league. Once I started playing however, I had a fair amount of difficulty getting back to the page because the URL is: http://baltimorecitysoccer.leagueapps.com/. I know for a fact that LeagueApps offers the option of a more streamlined URL because District Sports uses Districtsports.com.
Once you arrive at the site, the next problem is that is rather ugly and sloppy looking. Believe it or not it has been updated in the last 6 months to look a little more aesthetically pleasing. The biggest problem, however, is just how hard it is to find the relatively simple information that one needs form such a site.
Based on my experience as a user of the site, the most important bit of information that it offers is the schedule of the games. To do this, it seems straight forward to click on the “Schedule” Button on the banner. On the other hand, when I was new to the site I remember being a little tripped up by the “League” button, thinking it may contain most the information about the currently running leagues (Men’s, coed, 11v11, 7v7, etc). It didn’t help that it is the first button after the “Home” button in a series that is left justified. In fact, the “Leagues” button is only for leagues/seasons that have not started yet, and for which one can still sign up. Before moving on to finding schedule information, it is worth noticing that in addition to the “Leagues” button, there are also a “Register” button and a “Indoor Registration” Button. All three buttons enable the same registration capacities, but in slightly different ways. Ultimately, they are just confusing and superfluous.
Back to issues finding schedules. After the user clicks the “Schedules” button, one is confronted with this page:
If the user is looking for the schedule for 2015 Fall Outdoor Mens @ UTZ field, then the next step is rather easy. However, there are 11 league options on this page, and they are not always easy to navigate. The way the information is presented, makes it rather difficult and the logic of organization is hardly sensible. The first issue is that leagues that are currently underway are mixed with leagues that have not started yet. Beyond that the way the leagues are titled makes them difficult to navigate. For example, the least important information - the year - is the first thing presented. Beyond that, superfluous information - such as the location or length of the games is made prominent because it is (usually) put at the end of the title. The meaty information - gender, season, division, outdoor/indoor - thus gets sandwiched in the middle where it is most difficult to scan.
Once the user does navigate that page and finds her league, she is taken to this page:
While it is rather straightforward - organized by date and time - it can be a hassle to scroll through hundreds of entries before finding when one plays in the latter weeks of the season, and with the separation between weeks indicated by font smaller than the individual game font, its easy to get lost in the continuous vertically arranged schedule. Not to mention the schedule has its own scroll bar along with there being a scroll bar for the page as a whole. The double scroll bar is clunky, not obvious at all, and annoying to use even for someone used to the site. From a more aesthetic point of view, it also seems unnecessary to have the beige box at the top of some of these screens which provides a mix of generally useful information - how much money to bring to games for refs - facility rules, and league rules. All of which, seem arbitrarily placed and better positioned elsewhere on the site. That said, because of the difficulty navigating this site in general, one may never find the page where it makes sense to have this information.
Well, I was planning on breaking down several other flaws in this user experience, but seeing as I have not even touched on how I would fix the couple of problems I have pointed out thus far, perhaps it best if I start to get to my solutions for these issues.
In terms of the issue of finding schedules, I rearranged and consolidated the links on the banner. There is now only one link for signing up for leagues, “Schedules” is directly next to the “Home” button, and I center justified the links to make it look a little better. Beyond that, the crowded, and overly busy picture section of the original page has been replaced by a picture carousel. Then, the poorly organized bottom section has been replaced with a section that extols the virtues of league and more prominently displays a “Join a League” button. I have moved the less important league contact info, and social media connections to the bottom of the page. I have done away with the Updates section insofar as it seems it is rarely used. If there needs to access to updates I suggest making them league specific and having a place for them on each league page.
In order to simplify finding the right league and schedule, I have tried to partition the page so that it is easier to visually locate the right one for the user’s purpose and it reduces scrolling. Towards this end, I have two main sections: 1) current leagues, and 2) upcoming leagues. I have then divided each of those headings into boxes for Co-ed and leagues and Men’s leagues. Within each box I have a list of the relevant leagues and links to the league home page, schedule page and standings page.
When the user clicks on the schedule link to a particular league she is taken to this page. I have not changed as much about this page, but have followed a visual logic similar to the general schedules page. instead of just listing the games in a continuous vertical list, a form of organization that makes it difficult to tell which week one is looking at, I have given each week its own section with a row of boxes - one for each time slot. Additionally, I have pinned the coming week’s game up at the top so that users don’t need to scroll and search for their most immediately relevant game time.
The site is a mess in general, but I think this is a good start to a much improved user experience.