Ship sailing in the ocean.

The ask

Marine Learning Systems approached TTT Studios to review and upgrade their native mobile app, SkillGrader, to React Native for easy cross-platform accessibility and seamless user experience.

The solution

TTT Studios designed and developed a secure and user-centric enterprise application, SkillGrader, following their existing tablet solution’s usability and development protocols.

Marine Learning Systems’ mobile application mock-ups.
Marine Learning Systems’ mobile application mock-ups.

The outcome

TTT Studios worked with MLS to re-write their existing native iOS app to React Native and port the app from tablet to mobile to ensure a consistent user experience across platforms. This software transition expanded MLS’ user base and also allowed them to take advantage of a singular code base, specifically for software maintenance and future updates.

Our approach

Colourful sticky notes displayed on glass wall for TTT Studios’ discovery session.
Colourful sticky notes displayed on glass wall for TTT Studios’ discovery session.

UX review

SkillGrader is an app that allows officers and crew members of cruise lines to immediately assess skills and provide insight into their performance and safety trends.

To meet the goals and vision of MLS, TTT Studios thoroughly analyzed the tablet version of the application. Before creating the wireframes for a mobile device, usability issues were mitigated to make sure the layout was user-friendly for a real estate of a small screen.

Our design team then followed MLS’ existing UX/UI patterns to create the new UI mockups to handle new and advanced features while ensuring that the learning curve for the workforce was not affected.

Close-up of person accessing Marine Learning Systems’ mobile application.
Close-up of person accessing Marine Learning Systems’ mobile application.

Main challenge

Optimizing the UI & UX for a small screen

SkillGrader is a highly data-driven enterprise platform that deals with a large workforce, information, several assessments, task-specific forms, and more.

It was a challenge to incorporate all the new and existing features and other display information from the tablet version with user experience on top of mind. TTT Studios optimized the screen space of a mobile device and seamlessly integrated the high volume of data while delivering the functionality of the application.

Features

Blue arrows in circular motion icon.

Onboarding process

The application needs to be configured for a specific cruise line and vessel operator that the employee works for during the onboarding process. The application will fetch the respective API and enable them to log in and set up their accounts.

Blue mobile device with check mark icon.

Assessments

With this solution, a technology-based assessment replaces a paper-based approach, simplifying the process for assessors. The new feature allows personnel to be tested on various assessments such as job activity, training, certifications, drills, and different scenarios to show the status of their evaluations and manage the list of participants.

Blue bar chart icon.

Instant reports

Results of the crew assessments are recorded on the app enabling vessel operators to analyze metrics, set learning goals, and improve skill performance.

iPad displaying MLS' application mock-up.

Phase – II Ongoing partnership

MLS has successfully elevated the assessment process for maritime operators with SkillGrader. As the user demand for new features piqued, MLS once again leveraged TTT’s design and development expertise to support their customers and product growth.

icon
Our main success metric for TTT Studios has been their ability to deliver a lucrative product, which we can now offer to our customers. Their team has brought our ideas to life, and we’re excited to elevate our operations with the help of this user-friendly application.
Alastair Izzard
VP of Customer Success

Services Provided

Services Provided

Blue light bulb icon.

Digital Consulting

Blue pencil icon.

UX & UI
 Design

Blue mobile device icon.

Mobile App Development

Blue magnifying glass icon.

Quality Asurance

Blue clipboard and settings sign icon.

Product Management

Related Projects

See all case studies

Sengled

Real-time security with smart object identification
Retail

FortisBC

A secure platform for accessing your utilities account online
Utilities

Sengled

Real-time security with smart object identification

FortisBC

A secure platform for accessing your utilities account online
See all case studies

More from TTT

Listen to our Podcast