US LACROSSE

An iOS App

OVERVIEW

Team Members:

Krista Weber

 

My Contributions:

Research

Insights

Prototype Design

 

US Lacrosse is the governing body for the sport of lacrosse in the US. It’s dedicated to growing the sport of Lacrosse. Lacrosse players must be members in order to participate in tournaments and even to join a local team. As part of this effort, US Lacrosse wants to develop an app.

As this app is only in the development stages, US Lacrosse wants to focus on the two tasks a user would most commonly perform within the app, with eventual expansion to create the other sections shown in the navigation.  The two primary tasks are showing the membership card to officials at a tournament and verifying a player’s age.

 

research iconRESEARCH

The current US Lacrosse website was explored, and parents of players were interviewed and observed interacting with the US Lacrosse website to see how they performed the activities of showing the player card and verifying age.

analyze icon INSIGHTS

Part of the frustration that users experienced is process of finding their children. US Lacrosse does not allow minors to edit or even have access to their accounts. All registered minor’s information is only available through the parent/guardian account. As such, there can be multiple children listed in the parent account. The current system was frustrating and confusing to users.

The design needs to address this problem and provide a better way for parents to access their children’s information.

One of the reasons that US Lacrosse wants to develop this mobile app is because they want to push age verification, and they believe it will be easier to do via an app which can take advantage of the phone’s camera, vs. a desktop where the user must scan a document or transfer a photo to the computer. The reason that age verification is so important is that as lacrosse players get older, the tournaments not only require US Lacrosse membership, but they also must verify their age in order to ensure that players are cheating the system.

The issue with age verification is that the consequences of not verifying can be severe (traveling to a tournament and being denied entry). Most people do not travel with their child’s passport or birth certificate, which means that if they are far from home, the situation isn’t fixable.

Taking into consideration the consequences involved, the app needs to make verification easy, and it needs to make the fact that the child isn’t verified obvious, without becoming annoying because most younger players can play a few years before they must verify at tournaments. In addition, recreational players who don’t do tournaments only have to prove membership, not age verification. Giving frequent warnings to those users would result in a negative or annoying experience.

prototype icon HIGH FIDELITY PROTOTYPE

App has spinner to show the user that it is loading. Once loaded it goes automatically to the login screen.

Anything other than the correct username and password causes an error message to appear.

The app creates a personal experience by welcoming Susan by name, and including her picture.
From here, she can view her options of everything the app has to offer. Each option has a rectangular wide click area for ease of use, rather than just the word and icon being clickable.

For task 1, Susan wants to view her children’s cards to show them to an official at a tournament her kids are playing at. She clicks the Membership card button, and since she has two children, she is taken to the screen that shows both children. Allowing her to choose which card she would like to view.
The fact that Kaitlyn is not verified is highlighted. Some tournaments are very picky about this, so the app needs to provide visual reminders that she hasn’t completed the task. Both the red banner and the Verify age button will take her to the verify age page.
Clicking the view card button will display the card for that player.

 

Susan clicks the card for her daughter Kaitlyn. This card makes it clear that she is not age verified.

Susan clicks on her son’s view card button. As you can see the membership card shows that he is age verified, which a requirement for this tournament. This is the membership card that Susan will show to officials.

 She can also press the share button, which will allow her to print, send a copy via message, or email it.

Age verifying is something that US Lacrosse wants you to do… sooner rather than later. They don’t want things to end up in a scenario where people have traveled to a tournament and are not eligible to play because they are not age verified. Not many people will travel to a tournament with a copy of a birth certificate on hand. This is something that the US Lacrosse app needs highlight, as does the website. As a result, there are a multiple ways to get to the verify screen.
1. From the home screen.
2. From the View Card screen in via the Verify Age button, or the red warning banner.
3. Clicking NOT AGE VERIFIED on the player card
4. From the expanded menu.

Using one of the four methods previously mentioned, Susan can arrive at the Verify Age screen.
From here, she will need to upload an image. She is given the option of taking a photo of the ID or selecting an image from her photos. She also has the option to change her mind, with the wording of the cancel button politely indicating that she will still need to perform the action.

Clicking on the take a photo button will bring a message asking for her permission to access the camera. I waited to ask access until it was necessary and specified the benefit to the user (verifying her daughter’s age).

If she doesn’t allow permission, the next time she clicks the button to take a photo, she will see a different alert explaining that the app can’t access the camera and how to fix it.

Assuming Susan allows access, the app uses the camera. The user can click the button which should be familiar to the user as it’s similar to the iPhone camera experience. The screen will flash black for a second once she presses the button, which is a visual indicator that she has taken the picture.

If she doesn’t allow permission, the next time she clicks the button to take a photo, she will see a different alert explaining that the app can’t access the camera and how to fix it.

Then two options will show up on either side of the picture. The user can choose to use the photo, or take another picture. When she takes another picture, the image fades to visually indicate the switch back to the camera mode. The KEEP PHOTO and TRY AGAIN buttons disappear until the user takes another photo, another indication that the camera is active.
They can also exit the camera by pressing the close button on top.

Once the user has clicked USE PHOTO, the verification screen begins. Each step is listed along with a spinner to indicate that work is being done.
At the completion of the step, a checkmark appears.

Once all the steps are complete, the spinner disappears and a verification confirmation is displayed, along with the link to the new card. This allows the user to see the new verified status on the user card.
They can also exit the camera by pressing the close button on top.

Next, we will focus on verification using a photo that has already been taken.
The user will get to the Verify Age page one of the ways mentioned previously. From here, they will need to upload an image.

In this example, the user selects the second option, which brings up the permission alert to access photos.
I waited to ask access until it was necessary and specified the benefit to the user (verifying her daughter’s age).

If the user doesn’t allow permission, the next time they click the button to access
their photos, they will see a different popup explaining that the app can’t access the camera and how to fix it.

Assuming the user allows access, next screen loads user’s photos, allowing them to scroll through and when they find the one they want, clicking on it will give the user visual confirmation that it’s selected by placing a check-mark on it. Since they can only upload one at a time, clicking another image after one has been selected results in the first check-mark disappearing and the most recently clicked image showing the check-mark.
This prototype is smart enough that clicking an image that isn’t the birth certificate and uploading it will result in a failed verification.
I’ve also allowed the users an easy exit should they change their mind. They can leave via the cancel button, the back button, or the menu.

If the user chooses the birth certificate as the image to upload, the verification screen be successful. However if they select another image, the verification will fail, like shown here.
The user is given an explanation of why it didn’t work (in this case it wasn’t a valid ID). They are presented the option to try again or cancel.