Contact us

contact@merixstudio.com View @ address

Biocore Mouthguard Sensors (MGS)

# media & entertainment

a data analytics platform for researching and analyzing impacts suffered by sport league players

backend
GraphQL API delivered by client
design
Product Design Workshops
Scoping Session
UX design
UI design
Information Architecture
Data Visualization Design
Style guide
frontend
TypeScript
Next.js
Apollo GraphQL client
Webpack
ThreeJS
MaterialUI
qa
Jest
Unit tests
React testing library
Manual Testing
tools
AWS
InVision
Mural

4

times faster data analysis process for biomechanical engineers

4

months of continuous work on phase 1 of the platform

6

team members working within a specialized domain

9

sprints until phase 1 handover

problems to solve

The client’s mission is to increase the safety of athletes in injury-prone situations. They approached us with an initial vision of the product characterized by visual attractiveness, data readability, and scalability. The customer supplied low-fidelity screens, the app’s backend, along with the ready AWS setup and APIs, so our task was to develop the frontend for the desktop application.

One of the challenges we assumed was transposing raw biomechanical readings from impact sensors into readable and user-friendly data visualization dashboards. Another one was to create a future-proof and scalable solution, ready for new add-ons. Additionally, the design needed to facilitate the ability to white label the software at a later date.

The discovery phase revealed the users’ needs and functional expectations. A deep dive into the client’s sports niche during online workshops with domain experts and stakeholders allowed us to identify and create the product as it was envisioned. The scope of work, executed by Merixstudio’s experts working in the dedicated team model, included:

  • Developing a UI and UX design (transposing complex, raw biomechanical data into usable charts for specific target groups and leveraging the Material-UI design to facilitate design reuse)
  • Creating the frontend of the application
  • Using the Next.js out-of-the-box Server-Side Rendering functionality to optimize the time needed for application rendering
  • Conducting tests in Jest.js together with React-based unit tests and manual tests
  • Implementing 3-D models for data presentation
  • Integrating object types on the frontend in compliance with the GraphQL Schema API
     

solutions

The client reached out to Merixstudio thanks to the referral from their Product Owner, who worked with us in the past. To effectively transpose the requirements into a usable product, we followed the Scrum methodology with nine sprints in total. The 6-person project team covered all the bases starting from the introductory kick-off meeting through the workshop sessions during which they learned about the logic of the application and the requirements to facilitate effective execution.

The core of the proposed solution involved the frontend based on TypeScript and Next.js, with highly visual graphs presenting the biomechanical engineering data aggregated in the platform extended by videos recorded from different perspectives. This combination ensured easy maintenance of clean code as well as integration of object types in compliance with the GraphQL Schema API. The Apollo GraphQL client implemented is a top fast delivery platform that enabled faster time to market. We also took advantage of the Jest.js testing framework, manual tests, and the React Testing Library for unit tests to limit the number of mistakes and facilitate faster change implementation.

To cater to the data presentation requirements, we used Three.js for 3-D model creation. The Material-UI library in React helped to achieve a neat visual presentation quickly. It also ensured that users could take full advantage of touchscreens in case a mobile version was created in the future. Thinking about the daily work of researchers, we integrated advanced data plotting techniques such as violin plots and 3-D heatmaps. Colors, in turn, served to accentuate the important data in the graphs, increasing their comprehensibility.

From the visual standpoint, it was also crucial to enable multiple views as per user needs (e.g., week, month, and year views, game views, and views with breaks). Not all users had equal access levels to the data, so we introduced a read-only functionality for secondary users. Additionally, data export options to different formats facilitated knowledge sharing and information presentation. Users may narrow the data scope via filtering components.

The end product lives up to the specialized users’ functional expectations in terms of data presentation, usability, and scalability. Machine Learning algorithms process the sensor data transmitted to the cloud, producing impact readings invaluable for the researchers. This information serves to create highly functional sports equipment that protects athletes, raising the bar even higher for their safety and health. The most critical upside for biomechanical engineers using the product is data analysis at four times the speed of their earlier workflow. Before creating the app, engineers had to rely on manual data input, which slowed them down. Consolidating the video and sensor data and insights from our data analysis platform in one location allows these users to accomplish their work much more efficiently. In addition, the slow-motion playback functionality combined with zoom, especially favored by users, provides the level of accuracy needed to validate impact data. The product is also ready for subsequent modifications thanks to its scalable, future-proof design with reusable components. The client’s team currently participates in related projects with Merixstudio, continuing the fruitful cooperation on both sides.

view examples - confidential

key features

  • view for reviewing sensor data

    the view enables users to verify the sensor readings, identifying the faulty ones that need some corrections. Validated data is crucial for further analysis and processing

  • graph export options to SVG files

    users can export the data from graphs to SVG files and share them with other researchers or interested parties

  • video player

    a custom-made player enables researchers to zoom in on the video, jump between frames, and change camera angles per specific needs

  • sharing URLs to specific content

    when accessing any view with the use of specific filters, tabs, or accordion extensions, users can share the same specified visuals with others in the exact same form as they see it. This is a significant time gain, as recipients do not need to readjust the views to match the software state

other works

Kaiik'ìt flag of Kaiik'ìt country

Kaiik'ìt

A mobile app for learning the Gwich’in language
python flutter firebase
education
Treasure Earth flag of Treasure Earth country

Treasure Earth

A content mobile app for building eco-friendly communities and raising sustainability causes
react redux NextJS
media & entertainment
Learn all about the risks and opportunities of mobile scaleup.
X
How to ensure healthy mobile app growth?
In the product lifecycle, the growth stage comes with challenges, risks, and opportunities. We share the design and development tips on how to prepare your mobile application for scaleup. WATCH EXPERT DISCUSSION
X

We use cookies on this site to improve performance. By browsering this site you are agreeing to this. For more information see our Privacy policy I understand