I was tasked with cleaning up our tournament presentations. The main concerns were two-fold:
- Ease of use for parents to get their team's information (schedule, field assignements, etc) on-site, and
- Increase the speed at which a referee could check-in a team before a game using our "Digital Player Card" product. How quickly this could be done digitally compared to using pen and paper was limiting adoption.
I made three major changes to address these issues:
- iCal Export
- Schedule Presentation on Mobile
- Digital Player Card Redesign
1. iCal Export
Originally, we gave the user instructions to copy a URL template, paste and edit that template in another program, and then copy and paste the new link back into a browser. 😰
I created a modal window, which, first and foremost, allowed us to organize and format the instruction text for readability. In the modal, the user chooses their time zone, which copies the full, correct link to their clipboard -- in a single step. Importantly, the user is given feedback that their action has happened properly simply by adding a "Copied" notification inline.
2. Schedule Presentation on Mobile
We organized the schedule information for easy scanning on a mobile phone, with clear next steps. This was built with Materialize's "Collapsible" and "Collection" components.
3. Digital Player Card Redesign
We rethought the player cards themselves from the ground up. The old cards were designed to mimic the physical cards, with the control and navigation elements stuck on. This is a completely valid approach! Over and over again on the web, we've seen functionality start as a digital representation of a physical thing. Newspapers are a classic example. But as technology becomes more easily understood, if not ubiquitous, more native designs appear.
In this case, we redesigned the cards to be viewed in portrait mode, rather than landscape. This allowed them to be accessed and controled with one hand, instead of two. We also introduced more visible calls-to-action, and incorporated javascript "tricks", like immediately giving the input field focus, to cut steps out of the check-in process. As mobile devices have multiple virtual keyboards, and since we're only changing a player's number, we force the numeric keyboard by using the pattern attribute on the input that has a regular expression to limit the allowed input to numbers.
