As a designer at Zone7, I collaborated with the engineering team and stakeholders to help build a design system and user interface for a product that focuses on injury risk forecasting for professional sports teams using artificial intelligence. A full redesign of the website was necessary as well to better articulate Zone7's mission, product, and expanding industry.
In today's fast-paced world, injury prevention is not just about reacting to accidents but also about anticipating and mitigating potential risks proactively. This case study delves into the design journey of our injury forecasting product, highlighting how user experience (UX) principles played a pivotal role in its development and adoption.
Product Design — Web Design — User Experience
Loading State — Skeleton
In the initial stages of our web app's development, we introduce the skeleton loading screen as a deliberate UX strategy. This placeholder interface offers users a sneak peek into the forthcoming experience while emphasizing our dedication to minimizing wait times. Each dynamic skeleton element symbolizes a future component, providing users with a visual roadmap of what to expect. By employing this loading state wireframe, we aim to manage user expectations, maintain engagement, and reinforce the idea of progress even during loading periods. Through thoughtful design decisions, we prioritize a seamless user journey from the very first interaction.
Injury Marking
Through interactive elements and visual cues, users can not only mark the affected area but also indicate the severity of the injury, whether it be minor discomfort or a more serious condition. By incorporating this level of detail and functionality, we ensure that users can effectively communicate and document injuries, facilitating more informed decision-making and improved injury management protocols.
Team Summary
The team summary page is a strategic UX centerpiece that orchestrates collaboration and empowers proactive injury prevention. At its core lies the "daily players at risk" feature, a dynamic tool that offers real-time insights into the vulnerability of team members to potential injuries. Through intuitive visualizations and personalized notifications, users can identify individuals who may be at higher risk due to factors such as workload, physical exertion, or environmental conditions. This proactive approach not only enables timely interventions but also fosters a culture of safety and well-being within the team.
Complementing this feature is the risk heat map, a UX innovation that provides a holistic view of injury hotspots and trends across different areas or projects. By aggregating data on incidents, near misses, and environmental factors, the "heat map" offers valuable insights into areas with elevated risk levels. Users can interact with the map to drill down into specific regions or time periods, gaining a deeper understanding of underlying patterns and contributing factors. Armed with this knowledge, teams can prioritize preventive measures and allocate resources more effectively, ultimately reducing the incidence of injuries and promoting a safer working environment. Through these integrated features, the team summary page not only facilitates seamless collaboration but also empowers users to make data-driven decisions that enhance safety and productivity.
Pages on the site include: Landing, News, Team, Careers, Contact, Performance Hub, About, Product, Industries, and Case Studies.
