The problem and context
ICM has successfully trained thousands of professional, highly skilled workers around the world in some of the most difficult conditions imaginable. After years of experience, they have refined course requirements and content, but an innovative digital management solution is required to make the delivery of the material smooth, rapid, and intuitive. This solution needs to be technologically sound, easy to master, repeatable, scalable, and fulfill genuine user needs in realistic use case conditions (such as when weather conditions are difficult and connectivity is patchy).
The importance of delivering a reliable, practical digital solution cannot be overstated. The safety, wellbeing, and future careers of thousands of individuals rely on the right training being successfully delivered to the right people at the right time. To achieve this, a development partner is required who understands the importance of delivering a successful solution and who constantly seeks to better understand the needs of users and the objectives of the organisations they collaborate with.
Introducing Inktrap
We're a London-based team of digital product designers and developers who specialise in making B2B products easy to use.
Your experienced product design and development team
After initially focusing on designing and building MVPs for early-stage startups, over the past 10 years we’ve grown to work with larger companies like Tysers, humn.ai and PwC’s innovation team. We deliver new products and features, or, work as an embedded team improving existing software, making sure it delivers what users actually need.
We’re all about making the digital world easy to navigate, building interfaces that are intuitive to use, maintain and allow people to get the job done. We’re a small, highly effective team all based in and around (occasionally) sunny London who love things design and tech related.
Our values are the core of everything we do
We’re problem solvers
We make products that solve real business problems. They look great doing it too, but function comes first.
We put people first
People are at the core of everything, whether they’re a user of your product or a member of our team.
We take pride in our work
We pay attention to the details, and make sure things are done right, not just done.
We’re open and honest
We’re honest about our opinions, and transparent in how we work. We value fairness, clarity and integrity.
We protect the planet
The planet is burning and we have a duty to protect it. We work to reduce the environmental impact of our business.
Our experience
Having worked on well over 100 products in the past 10 years, we have a broad range of experience across industries and technologies. We’ve designed risk insight platforms for startups, built membership platforms, created learning tools for multinational corporations and everything in-between.
We take pride in our ability to really understand the goals of our stakeholders and the users of their products which leads to a better solution in less time, using our tried and tested process we can apply to any brief.
Our recommended approach
Our goal is to create a robust, intuitive and easy to manage system by working in a collaborative way. We’ll do this by following a product development process we’ve honed over the past decade combined with a technical solution built on the solid foundations of a stack we know well.
Recommended technology stack
Our tech stack includes Laravel, React, TypeScript, AWS, Tailwind, Postgres, Digital Ocean and Papertrail.
It's solid, reliable and has a strong development community. It matches up exceptionally well with ICM's requirements.
Recommended product architecture and technologies
Core Server
We would host the backend code, admin panel, API and serve the web application on a cloud hosted Linux server.
Ideally, this would be a DigitalOcean droplet. This would allow us to work with known zero-downtime deployment solutions such as Laravel Forge and Laravel Envoyer leading to a smoother and more stable development process. Using a third party hosting solution like DigitalOcean also allows us to quickly scale resources as and when needed.
The Linux server will be provisioned with the necessary technologies to provide a stable service using our choice of backend and frontend frameworks. Some of these technologies are:
- Ubuntu 18
- PHP 8.1
- Nginx
- SSH
- UFW (Uncomplicated Firewall)
- Weekly security updates
Backend
Our choice of backend framework would be Laravel. Laravel is a reliable PHP based MVC (Model-View-Controller) framework built upon Symfony.
We would use Laravel over similar frameworks because it offers a lot of core feature technology out of the box needed for a project like this. Some of these features include:
- Routing
- Database migrations
- Database querying system
- Queue management
- Task scheduling
- Ecosystem of well tested open-source packages
Through Laravel, we can smoothly implement core features such as Single Sign On (SSO) authentication, file uploads and email delivery.
API
To connect with the client web application and Android apps, we would suggest building a REST API secured with a token based system.
RESTful APIs use a set of guidelines or constraints to create web services. These guidelines, commonly referred to as the REST architectural style, allow use to create scalable, modular, and easily maintainable web services.
The benefit of using an API to connect to the client applications is we can use one backend setup for both applications, leading to a better developer experience, less duplicate code and an architecture that is both scalable and secure.
Admin
The super-admin interface would be built using the Laravel based Laravel Nova.
Laravel Nova is a commercial administration panel for Laravel web applications. It is designed to help developers build custom backend applications quickly and easily, without having to write a lot of code. Nova provides a range of features and tools that make it easy to create custom dashboards, forms, and reports.
Laravel Nova would be a suitable choice as it closely integrates with the backend framework, allowing for rapid development of core admin features such as user creation, role selection and resource management.
Cloud Services
To provide stability and scalability to the end platform, we would utilise certain cloud services away from our own server.
SQL
We would use an externally hosted SQL (MySQL/PostgreSQL) based relational database. Ideally, this would be through DigitalOcean’s Managed Database service or Amazon’s RDS service.
The benefits of externally hosting the database are:
- Scalability: Externally hosting a database can provide greater scalability and performance, as it allows you to take advantage of dedicated resources and specialised hardware designed for handling large volumes of data.
- Security: Hosting your database externally can provide greater security, as you can take advantage of specialised security measures, such as firewalls, intrusion detection systems, and data encryption.
- Disaster Recovery: An externally hosted database can be easier to recover in the event of a critical server issues, as the data is stored off-site and can be more easily restored.
File Storage
We would use an externally hosted file storage solution. Ideally, this would be through DigitalOcean’s Spaces service or Amazon’s S3 service.
The benefits of using external file hosting are:
- Scalability: Services like these are designed to handle large volumes of data and can scale to meet the needs of the application as it grows. This means that you don't have to worry about running out of storage space or bandwidth.
- Cost-Effective: They are a cost-effective solution for storing and retrieving files, as you only pay for the storage and bandwidth that you use.
- Durability: They are designed to be highly durable and reliable, with multiple redundancies and data integrity checks to ensure that your files are always available and secure.
- Security: They provide several security features, such as encryption and access control, to help you secure your files and prevent unauthorised access.
Email Service Provider (ESP)
We would use an Email Service Provider. Ideally, this would be through a service like SendGrid, Mailgun or Amazon’s SES.
The benefits of using services like these are:
- Deliverability: Email service providers have specialised tools and infrastructure to help ensure your emails reach your subscribers' inboxes, avoiding spam filters and increasing the chances of the email being seen. Some of these tools include DKIM and SPF support, which verify the sender and provide greater email security.
- Scalability: Email service providers can handle large volumes of email, even during peak times, and can scale their infrastructure up or down as needed.
- Cost-effectiveness: Using an email service provider will be more cost-effective than building and maintaining an email infrastructure in-house.
External Services
It will be necessary to integrate further with third-party services These will be integrated through Laravel using appropriate packages and SDK’s. Some of these are:
- Papertrail - A cloud-based log management platform that collects, monitors, and analyses logs.
- Certsign - An electronic signing service, integrated through an API.
Client applications
Web
The web client will be hosted and accessible through our server.
Our choice of frontend framework is React. React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of their application in an efficient way. React was developed by Facebook and is widely used in web development. It is known for its performance, flexibility, and ease of use.
Alongside React we will use a collection of well known tools to aid development.
We would use TypeScript, a superset of JavaScript that adds typing and other features to the language. It can help catch errors during development and improve code readability and maintainability.
To connect with the API we would use Axios, a popular JavaScript library used for making HTTP requests from a web browser. It provides an easy-to-use interface for sending HTTP requests and handling the responses.
For styling, we would use TailwindCSS, a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to quickly and easily style HTML elements. It promotes consistency, accessibility and reusability across a project, all leading to a better user experience.
On core frontend features, we would implement testing using Jest. This would allow us to have greater confidence in core features leading to a more stable technical solution and user experience.
Android
We believe a native Android app built using Kotlin is the best solution for the portable trainer experience. Compared to progressive web apps this has many benefits including better performance and offline functionality – both essential for this product.
The Android app would connect to the REST API, meaning the app would have access to the same functionality as the web application.
We would also ensure that the app is compatible with the versions of Android available to the users, and test it on real and simulated devices to ensure a smooth user experience. The app would be delivered as an APK and would be distributed internally within your organisation.
Merlie Calvert
Founder, Farillio
Our proven process
Having created digital products for over 10 years, we know how to make them a success. Our tried and tested process combines years of best practice with the best parts of agile methodology to help us deliver products efficiently.
Project definition and management
Workflow planning
We start by splitting the workload into specific features, breaking down what is included in each. From there, we fit them into two-week cycles, allowing us to keep a consistent cadence and ensure all acceptance criteria is met.
Standups, client review calls and demos
Throughout each cycle, we have developer standups to ensure everyone knows what the team was working on the previous day and what everyone is working on that day. This also offers the opportunity to discuss any blockers, barriers or dependencies preventing work from moving forward.
We are a collaborative team and would welcome the ICM assigned product owner and technical project manager to participate in these meetings and provide their insight.
Client input is an important part of the process, and we encourage feedback throughout each cycle in the form of review calls, where we walk through work that has been completed, show work demos and ask (and answer) any questions.
Ongoing workflow management
We use various project management tools throughout the design and development process to keep everything clear and concise. Our preferred platforms to use are Linear and Notion. Here we create and raise tickets that break down what is included for that particular task, including a description and acceptance criteria.
Each ticket is allocated to a team member who takes on sole responsibility for that feature, ensuring it meets the full acceptance criteria before marking it as complete. To understand the level of work required for each ticket, we use a points-based estimation system, which allows us to keep on track of all tickets and understand where they fit within the project plan.
Each ticket raised within Linear is directly linked to GitHub or GitLab for efficiency.
Retrospective calls
At the end of each cycle, we carry out an internal retrospective that encourages us to look back on the effectiveness of the project to understand how the work progressed and if any areas could be improved to increase productivity and efficiency.
These important sessions allow us to continuously improve our process.
Product design
User experience design
Before jumping into what your new product will look like we plan out the content that each of the 5 user types will need when interacting with it. We use low-fidelity content wireframes to get user feedback early in the process, ensuring no time is wasted in later design and build stages.
Interface design system
With the user journey’s in hand, it’s time to make your product look fantastic. Depending on your preference we can create a completely fresh set of components, or use any existing ICM digital products as a base.
Alongside designing your new product we’ll create a design system. This tool brings together all the components used across the product to ensure consistency. We design for the long term and plan to make future updates as efficient and cost-effective as possible.
Interactive prototypes
Throughout the process we make interactive prototypes to communicate how the product will look and work. These are invaluable for user testing and stakeholder review as they allow us to demonstrate the features to your team in a way which closely matches the final build.
Accessibility checks
We ensure that all our products meet WCAG standards for accessibility, allowing a wider range of people to use them. This is increasingly a requirement for all the products we work on, both for legal compliance and to meet ESG commitments.
Documentation and handover
To communicate the design clearly we don’t just hand over static mockups to the dev team, instead writing handover notes, creating user stories, and providing interactive prototypes of key user flows. This ensures designs are implemented efficiently and accurately.
Development and deployment
Implementation cycles
The bulk of the build phase is implementing each feature of the software. While this project will be run with a waterfall development strategy, it’s still helpful to break the work down into smaller chunks that we can complete each week to ensure that the project remains on track.
Testing
Towards the end of the implementation phase we’ll test the whole product to ensure that it meets the requirements. The testing is run at multiple levels, including unit testing, integration testing, and user acceptance testing.
Deployment
After successful testing, we’ll deploy the software to a production environment and run final checks to ensure it’s ready to go. We take a ‘soft-launch’ approach, putting the product live then slowly ramping up user adoption.
Maintenance
After launch we can provide ongoing support and maintenance of the software. This includes things like bug fixes, security updates, and enhancements to the features.
Work examples
We've selected three relevant examples from our portfolio that use similar approaches and technologies to those we'd use with ICM.
PwC Learning Lab
Services
Strategy, UX and UI design, design system, build support
PwC Learning Lab is a training product designed to enhance learning and retention by spacing out the intervals at which information is presented to the learner. The platform uses the principles of spaced repetition, gamification, and deep personalisation to optimise long-term memory retention.
We led the strategy and design for the product, including experiences for the learners, course creators and administrators. The solution has since been successfully rolled out for use by many large, global organisations.
Strategy and design phase
Flock Risk Insights Platform
Services
Discovery, UX/UI design, front-end development
Stack
React, Typescript, Tailwind, Axios
Flock Risk Insights is a new platform that provides fleet managers with a comprehensive overview of their fleet's risk profile and helps them make data-driven decisions to improve safety and reduce insurance premiums.
In addition to designing the product we were also deeply embedded within the Flock team to work on the React / TypeScript application. This involved creating a range of new components to display complex risk and telematics data from their backend systems. Our collaborative approach enabled them to launch the new risk insights features to users in under 3 months, meeting their strict deadline.
From initial meeting to launch
The Growing Coaches
Services
Strategy, discovery, UX/UI design, front-end development, back-end developer
Stack
Laravel, React, Blade, SASS, AWS
The Growing Coaches is an online platform designed specifically for trainee executive coaches looking to connect with potential coachees. The platform uses an algorithm to match coaches with coachees based on their skills, experience, and areas of expertise.
Active coaches in the first six months
Investment and timescale
An overview of the time and investment required for the project.
Cost summary
We work in two-week cycles to ensure a consistent cadence. The number of developers or designers varies each sprint depending on the task, hence the variable sprint for the feature requirements below.
The number of sprints required is an estimate based on the information we have available right now. Estimates are made on a ‘realistic’ basis not on blind optimism - surprises down the road are bad news for everyone!
Foundations
Initial project setup + Database modelling, Authentication system + SSO + Roles Setup, API Design + Setup, Multilingual Setup
Training Coordinator (Web interface)
Visualise Project status, Create project & insert basic project data, Approve Trainer Reports, View/Publish Feedback Report, Certificate Repository, Close Project
Trainer (Web interface)
Visualise Project status, Update Training Matrix & Training Programme, Reports, Collect attendance, Collect feedback & View Feedback report, Maintain Personal Timesheets
Trainer (Android interface)
[same features as Trainer web interface above]
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Training Manager (Web interface)
Visualise Project status, Approval of training certificates, View Feedback Report
Client (Web interface)
Visualise Project dashboard, Update Training Matrix and Training, Programme (until project is approved), Approve Training Matrix (lock matrix), Certificate Repository, View Feedback Report
Super Admin (Web Interface)
Main interface (Assuming Nova), Email sending, CMS pages (privacy policy etc)
Timeline
There are two distinct phases to this project (design and build) reflected in the delivery timetable below.
Design kick-off
General purpose email and password to connect to the platform
New project creation
Dashboard
Attendance tracking
Crew schedule
Reporting
Feedback
Picture repository
Admin interface
Build kick-off
Foundations
Training Coordinator (Web Interface)
Trainer (Web Interface)
Trainer (Android interface)
Training Manager (Web interface)
Client (Web interface)
Super Admin (Web Interface)
Prelaunch checks
Free support period
Terms and policies
We work under our standard terms of business which cover payment terms, warranties, responsibilities, IP, liabilities, confidentiality and dispute resolution (among other things).
With a decade’s experience and trusted by large corporations, we’ve put a few policies and work requirements in place over the years:
- We have a change management policy & a business continuity plan in place to manage any large, unforeseen changes to the project plan, personnel or business conditions.
- We have a security and incident management policy in place to handle any data breaches (although we haven’t had to use this yet).
- We work confidentially as per our standard terms of business. Your confidential data is confidential for a reason and we respect that with all members of our team and anyone else we bring onboard bound by the same terms Inktrap are.
- We have a data processing agreement and comply with GDPR requirements.
- We have professional indemnity insurance coverage of up to £5,000,000, so if there are any issues no-one is left out of pocket.
Next steps
If you have any questions about this proposal, please get in touch with James. We’d love to talk you through this proposal, so please schedule a call with if you’d like to chat.
