Zuidema is a leading training agency that uses tablets as part of their training programmes. Together with a team of designers, we completed a full overhaul of their tablet app, called HUB. This update also required a completely new backend journey for trainers and coaches, named Kit Admin. I was responsible for designing Kit Admin from the ground up. The assignment was both large and complex, as the user journey needed to cover many scenarios while remaining flexible.
The app for the training.
This was a crucial phase. We held three meetings to ensure we fully understood the requirements. The way the app would be used during training sessions directly influenced how Kit Admin needed to function.
With 111 pages, this was the largest prototype and wireframe I had created to date. I displayed the flow on the walls to make it easier to present to the client. My aim was to make the prototype as realistic as possible so it could be tested in advance with trainers.
There were significant changes during the project. Despite thorough debriefing, the client requested additional functionality as the project progressed. To accommodate this, I designed Kit Admin to be as flexible as possible.
I built the wireframes using components that matched a Vue.js template, making development straightforward. The final visual design for the app would be aligned with HUB at a later stage.
Kit Admin is used by trainers to create events, which contain exercises. Within these exercises, trainers can add chapters and assign roles. In addition, they need to manage users, participants, and feedback.
We started with a detailed debrief and my first step was to create a sitemap to ensure all client needs were addressed. As the project evolved, new requirements emerged, such as a feedback management journey and integration with the HUB card design in the tablet app. The sitemap became extensive, so I made sure it remained clear and included all necessary input fields for each page.
A small part of the sitemap, one of the more dificult user journeys.
Some screens from the flow of Kit Admin
Once the structure was clear, I began designing all the screens. I spent about a week researching Vue templates that would meet both our design and development criteria. As project lead, I took responsibility for selecting the most suitable template, discussing options with the developer before starting the wireframes. Having already mapped out the input fields in the sitemap saved a lot of time. I used a sidebar for easy navigation between pages and added horizontal navigation for subpages. Flexible tables were also important, given their frequent use.
The prototype retained a wireframe appearance on purpose, as the final HUB design was still in development. The template was designed to be flexible, allowing for easy updates to match the final app styling. Creating the prototype was a significant effort due to the number of screens.
Displaying all screens on the wall made it easier to present to the client. During feedback sessions, the client requested a dedicated feedback section, which we then added. Testing with trainers was highly successful, with positive feedback and only minor adjustments needed.
A small part of the sitemap, one of the more dificult user journeys.
This project involved designing a complex and flexible backend system to support Zuidema’s training programmes. By focusing on thorough debriefing, detailed wireframing, and ongoing collaboration with both clients and developers, we created a solution that met evolving requirements and supported a wide range of user needs. The process demonstrated the importance of adaptability and clear communication when delivering large-scale digital tools for professional training environments.