SATRA TimeLine
App design, UI and UX, API integration, front-end development
Turning a trusted software tool into a browser-based app with box-fresh design.
For more than a century, SATRA has helped the world’s leading footwear manufacturers enhance their processes through its specialist technologies and testing services.
The organisation’s cutting-edge tools were not necessarily cutting-edge in terms of their design and UX, however, and SATRA engaged Yoyo to re-engineer a series of its key digital properties. This included TimeLine, a data-rich, decades-old standalone software application trusted by manufacturing clients to calculate the time, labour and cost of the many isolated micro-tasks that, together, result in a finished end product.
This project involved a complete front-end reworking of TimeLine’s Windows-based interface, while maintaining the connection to the complex coding and logic at the application’s core through an API.
From the outset this required touch-tight collaboration between the development teams on both sides.
The Strategy
This project involved a complete front-end reworking of TimeLine’s Windows-based interface, while maintaining the connection to the complex coding and logic at the application’s core through an API. From the outset this required touch-tight collaboration between the development teams on both sides.
Initial discovery workshops were followed by confirmation of the app’s functional specification, which was mapped onto a series of wireframes. Having recently guided SATRA through a brand refresh, the Yoyo design team then dovetailed in behind this process, applying colours, fonts and visual assets to give the new TimeLine a fresh, premium look and feel that aligned with other updated products in the SATRA family, such as VisionStitch.
Yoyo employed the React JavaScript library to manage the UI build, which allows elements such as buttons, tables and accordions to be created, tested and approved as individual components. This granular approach gave structure and focus to the design and build process, breaking it down into manageable chunks.
Based on the front-end values specified by a TimeLine user, API calls retrieve data held in the back-end of the system. With complex levels of information transfer involved, Yoyo implemented caching to minimise potential frustration and smooth the experience of users navigating their way around the app.
The addition of drag-and-drop functionality, allowing specific manufacturing actions to be easily added and re-ordered directly on page, is a further small example of how the new-look application’s improved user interface has simplified the challenge of digitising complex analogue processes.
With a schedule of testing to validate the new app’s performance, SATRA’s clients can be assured that TimeLine’s credentials as an invaluable cost-analysis tool are only enhanced in its reimagined new form.
