NsportC Product Design
Facilitate Sports Emergency Handling

NsportC is a tech startup that helps K-12 sports coaches handle sports emergency situtations like concussions. I led a team of 6 designers and researchers to design its web and mobile products from concepts to prototypes within 4 months.

My Role

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.

Up until November 2016, I led the efforts to evolve the design from basically nothing to hi-fidelity prototypes. In addition, I led the team to conduct market research and potential-user interviews to address user pain-points and ensure there is a market opportunity.

Three Months: From Zero To Hero

In September 2016, our client approached us with two primary goals - to discover true user needs and pain points; and to design the user interfaces that combines functionality and usability for their products.

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.

Background Research

We started the discovery phase quickly. Since this product is related to teenage players' health, there might be legal requirements. To understand what the legal requirements are, we found two major design constraints:


Concussion can lead to serious brain damages. If a teenage player is suspected of concussion, the player should be removed from play immediately.


Only medical professionals are qualified to determine whether a teenager player indeed has concussion. Coaches have no training or qualification to make such judgment.

However, removing players and sending players to doctors once any incidents happen seemed to be unrealistic. Unlike many other injuries, concussion often cannot be determined by a player's physical situation.

User Pain Points & Personas

We kicked off the user research right after the discovery phase. We interviewed two coaches, Joe and Max. Both of them have been high school coaches for over 10 years. From our user interviews, we listed some major design take-ins:

Experience Gap

Coaches' coaching experience varies. It could be professional coaches paid by school officials or volunteering coaches who are parents.

Lack of Concussion Training

Professional coaches go through basic concussion training, but the content of the training is easily forgotten.

Fear of Playing Sports

Concussion leads to both physical and mental damage. It may cause fear of future participation in sports.

After interviewing with coaches, we decided to design two persona types - primary persona for middle school or high school coaches and secondary persona for players' parents - in order to prioritize who we will be focusing on in the early stage.

We developed two primary personas varying 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.

Visualize the Process

Using our primary persona - coach's role - as a breakthrough point, we created workflow diagrams to visualize the users end-to-end experience and map the product workflow. We decided to put the more sophisticated team management tools on the web platform, while the mobile app covers the assessment tool since coaches only have smartphones with them during games or practices.

Web App Workflow

Mobile App Workflow

Structure the Experience: Keep Users In Mind

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.

Web Wireframe

The web app is mainly designed with an emphasis on information management. Coaches will be able to view all players' status and previous assessment test results. In addition, coaches can print out reports based on his players' status.

Mobile Wireframe

The mobile has an emphasis on the assessment tool exclusively. To simplify the process and save time, the coach will be able to quickly access the assessment tool on the main page and then select the player associated with the test.

Detailed UI Design

We selected Sketch as our main design tool. Due to the tight deadlines we have, I divided the team into two small teams - web team and mobile team - each has three designers. Each team was working closely internally and communicating with the other team constantly in order to unify design styles.

Simple Registration

Coach Registration and Creating Teams.

Parent Registration via Coach's Invitation

Streamlined Team Management

The dashboard page serves as a central information hub. Coaches can manage (view, edit, and delete) all the teams.

The team page shows the list of players in this team. Coaches can change team names and add/delete players.

Organized Player Info

A player's information can be divided into two parts - demographical information and test results. The coach will be able to edit a player's demographical information as well as view or export all previous test results.

Standardized Assessment

After finishing all assessment questions with 3 minutes (less than 5 minutes), 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.

Refine the Experience: Usability Studies

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:

Player Sorting

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.

Player Identification

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.