I led a team of 6 UI/UX designers designing NsportC applications across iOS, Android, and Web since September 2016. The design team focused on discovering user requirements and creating delightful user experience.
I led the efforts to evolve the design from basic concepts to hi-fidelity interactive prototypes. The team worked together on interviewing potential users, creating user flow and wireframe, designing hi-fidelity mockups, and conducting usability testing.
In September 2016, our client approached us with one primary goals - to design an mobile application to help K-12 sports coaches.
Our team was under high pressure to move forward fast. To ensure that we were able to provide high-quality designs and beat the deadlines at the same time, I set some milestone goals for the design project.
Since this product is related to health and injury, the first step for us was to understand the context that we were not familiar with. We found two constraints we need to keep in mind:
Concussion can lead to serious brain damages. If a teenage player is suspected of having concussion, the player needs to be removed from play immediately.
Only medical professionals are qualified to determine whether a teenager player indeed has concussion. Coaches cannot make such judgment.
However, removing players everytime when an incident happens seems to be very costly for sports teams. The challenge is, unlike many other injuries, the symptoms of concussion are sometimes not obvious.
We started the interview right after the discovery phase. We interviewed two professional coaches. They have been high school coaches for over 10 years. We also interviewed a parent who volunteers to coach occasionally.
Coaches' coaching experience varies. It could be professional coaches paid by school officials or volunteering coaches who are parents.
Lack of Concussion Training
Many professional coaches go through the basic concussion training only once.
Based on the all the information we gathered, we developed two primary personas varied by their coaching experience. This variable could greatly affect the behavior and experience using our product. A more professional coach will have more awareness of each player's health status, while a volunteering coach may miss important health indicators. We also developed a secondary persona to represent teenager players' parents, since they can potentially benefit from our product as well.
Using our primary persona - coach's role - as the entry point, we created workflow diagrams to visualize the end-to-end experience and plan the user flow. We decided to put the more sophisticated team management tools on the web platform, while the mobile app covers the assessment tool since coaches are more likely to take mobile devices on them.
Web App Workflow
Mobile App Workflow
Understanding the features on the web and mobile app helped us develop a clear vision of user needs and expectations. We listed a set of experience principles to define the "personality" of our product. Then, we worked on creating wireframe using Balsamiq Mockups.
To kick-start the high-fidenlity prototyping, we chose the Google Material Design as our base design system across the web and mobile app. We focused on simplifying the sign up and information management process, while on the mobile we focused on streamlining the task flow to complete the assessment.
Simple Sign Up by Invitation
One challenge is that, if we let coaches enter the information regarding every player, there will be too much information coaches need to gather when starting. It could cause them to abandon the app. So instead, we let coaches send out invitations to parents so that the parents can input the players' informaton for the coaches, and at the same time, they create their own accounts.
Easy Team Management
For the information management, the information has 3 levels of depth - team dashboard for all the teams managed by the coach, team details for all the information about the team, and player details for all the information about the player. The one-directional flow would make it easy for coaches to find the teams and the players.
Organized Player's Info
A player's information can be divided into two parts - demographical information and test results, while on the mobile app, test results are more frequently updated and reviewed. Therefore we used toggles for users to switch to test results easily.
Urgent and Efficient Assessment
The assessment on the mobile app is the most important part of this end-to-end experience. There is one question more important than all the others: how do we let coaches complete the assessment as quickly as possible? To answer this question, we decided to allow coaches to access the assessment on the home screen directly and then attach the result to a player later when the assessment is done.
Also, to help coaches with different experience levels, the app will teach coaches exactly what to say and what to ask. After finishing all assessment questions, the mobile app will determine whether the test is passed or failed. If the test is failed, our product will advise the coach to immediately send the player to medical professionals for further diagnosis.
The design team iterated many times on improving the form design for the assessment. We repeatedly test the assessment interaction to make sure it takes less than 3 minutes, because we understood that, in reality, it might take longer.
After finishing the hifi UI design, we built an interactive prototype using Justinmind Prototyper and conducted usability tests to fix usability issues. During the usability studies session, we asked 4 people that fit our personas to complete a set of tasks and listened to their feedback. Here are some examples of UI changes based on the usability studies results:
On our first version, we use the alphabetical order for the player list. According to user feedback, "order by status" is a more intuitive way for them to see who can play and who cannot.
When we test the transactions of pages, an actual coach pointed out that teenage player may look similar on small profile pictures, so we added player names to identify each player.