Mobile App Design
NWTN is a concussion tracking app for high school football coaches and athletic trainers. Paired with bluetooth devices that clip into the players' helmets, the NWTN app is able to record and track impacts for each player based on a their individual impact thresholds. NWTN prominently features a live game mode where coaches can view impact details as they happen during the game. We received wireframes from our client, and were tasked with creating high fidelity mock-ups.
Disclaimer: This project was completed under the pseudonym "ENSTN" while under a NDA.
UI and IxD designer
(team of 4)
Style guide, high fidelity mock-ups, prototype
- Composing a cohesive brand identity across multiple functions of the app: live game tracking, player/team organization, and data visualization
- Building easily readable interfaces that are can be quickly understood at a glance
- Improving upon existing interactions to increase learnability of the app and simplify processes for use on the sidelines
Step 1: RESEARCH AND DESIGN PRINCIPLES
Our team of 4 started our design process with a thorough competitive analysis and market research from both an industry and functionality standpoint. While we needed to make sure ENSTN stood out amongst its direct competitors in the impact tracking industry, we also needed to break down each of the functions – live game tracking, player/team organization, and visualization – to ensure ENSTN would be competitive in each of those domains.
Following our research, my team set out to establish our design principles. We worked closely with the UX team to understand each of their uses cases and primary users: the athletic trainer and the football coach. Both of these users relied on making split second decisions and while having their eyes on the game. They would be using this technology to make informed decisions on whether to keep a player in the game after an impact.
As a result, my team established that our designs should adhere to the following principles:
Text and data needed to be readable at a glance. Data needs to be easily digestible on-the-go.
With a high volume of players and data, our users need to know how and where to find important information in order to act quickly on the sidelines.
Given the multitude of functions in this app, we need to use as many recognizable patterns as possible to
make the technology feel familiar.
Step 2: STYLE EXPLORATION
Together, our research and design principles guided my style exploration:
Step 3: DATA VISUALIZATION
While we were given wireframes by the UX team, a key component (and challenge!) of our design process was to explore different effective ways of displaying data.
On each player profile, there is a graph to display recent impact history (measured in G-forces). Each player has a different threshold for impact, which would be set manually by the trainer or coach. Hits above the threshold would then be closely monitored, and given special attention.
Initial ideas considered including all hits above and below the threshold, and a couple of different ways of organizing and displaying data – by day, by season, or by year.
step 4: FINAL DESIGNS and style guide
After two rounds of presentation and client feedback, I arrived at my final designs, inspired by the "bold, strong, and kinetic" style. For the scope of this project, the designs centered on one primary user flow: entering and interacting with the live game mode.
Additionally, other key screens included the impact profile and player profile screens. The final graph view incorporated circular points, but with stems to increase readability.