Building a scaleable, easy to use groundwater flooding alert and data insights portal

Prepared for Jed Ramsay
12th May 2023

Introducing Inktrap

We're a London-based team of digital product designers and developers who specialise in making B2B products easy to use.

12 years experience
Founder owned and operated
Focus on quality
6 person team
100% UK based

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 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.

Meet your team

With a broad range of experience (and sometimes previous careers!) our team are used to working on bespoke design and development projects, learning to be flexible, knowing that each project’s circumstances are unique. One size does not fit all!

Sam Lester
Co-founder and Operations lead

Recently worked with: PwC, ELFA, Brunel University, Harley Therapy, Zeidler Group

Degree: Multimedia Tech & Design, Brunel University

Sam has been deeply involved in web application design and development for the past fifteen years. Since co-founding of Inktrap over a decade ago, he’s designed, built and overseen the development of a huge range of products, including mobile apps, data dashboards, admin systems, membership platforms, and various SaaS applications.

Grace Forty
Project manager

Recently worked with: Toyota, PwC, ELFA

Degree: Design: Photography, Plymouth University

Grace's background in the creative, events, and tech industries has provided her with a wide range of project management experiences. Combining her resourcefulness and passion for organisation, she confidently works on multiple projects at a time while maintaining strong client relationships and enabling our production team to execute user-focused, high-quality products.

Chris Evans
Lead developer

Recently worked with: Flock, Brunel University, ELFA

Degree: Digital Design, Brunel University

Chris is our Lead Developer and has defined our tech stack over five years of developing innovative products at Inktrap. With over seven years of total experience building efficient applications for companies of all sizes, from startups to scale-ups to enterprises, he's a true expert. In every project he perfectly balances best practices with project and business goals.

Amy Williams
Product designer

Recently worked with: Toyota, PwC, Tysers

Degree: Graphic Design, Kingston University

Amy is an exceptional product designer who has honed her UX and UI design skills on a wide variety of complex products and services during her time as part of our design team. She’s a strategic thinker and innovative designer who thrives on problem-solving and meeting user challenges in a creative way.

George Perry
Full-stack developer

Recently worked with: Flock, ELFA, Fox Legal Training

Degree: Computer Science, Newcastle University

George is a skilled full-stack developer with over six years of experience creating user-centric digital experiences. He a wide range of experience, from developing complex React/Laravel applications to building performant marketing websites.

Adam Ascroft
Product designer

Recently worked with: Flock, Redkite, Farillio

Degree: Graphic Design, University of Salford

Adam's multidisciplinary background in graphic design and front-end development enables him to create user experiences that are designed to be built. He’s equally at home designing a dashboard interface or a new visual identity. Adam also has specialist expertise in organising and managing large component libraries, ensuring that our product systems are scalable from the start.

Our values are the core of everything we do

By prioritising the needs of our clients, their users and our team whilst taking pride in our work, we’ve create a motivated and engaged team that works collaboratively and creatively to solve problems and drive innovation. We also commit to responsible and ethical practices that promote sustainability and transparency in how we operate, demonstrating our dedication to improving the world we live in. Our shared values enable us to create a strong culture that fosters collaboration, innovation, sustainability, and transparency, ensuring that we meet the needs of our clients while also contributing to a healthier and more resilient planet for future generations.

We’re problem solvers

We make products that solve real 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’re able to bring best product development practice (from the world of tech startups) which when combined with the expertise of the Project Groundwater team, will create a platform that solves genuine user needs. All in a way which makes the community this tool is for feel valued.

"Inktrap have been fast, efficient, fun, and made light work of accurately interpreting our brand, vision and aspirations. We see them as an ongoing part of our team"

Merlie Calvert

Founder, Farillio

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 tech stack we know well.

Opportunities for innovation

Sam Lester

Co-founder

Less discovery, more iteration

We recommend running a minimal discovery phase and moving into the implementation of the product more quickly. Longer discovery processes often lead to over-designing the first version of a product and attempting to please every possible user rather than the majority.

For Project Groundwater we’re thinking that the key discovery work could be completed in under half a sprint.

Simplified features over multiple releases

We always advocate for ensuring MVPs are truly simple, including only the truly essential features rather than everything that might be desired. This reduces risk and forces everyone involved in the product to work in a human-centred way.

For Project Groundwater a first release might include only the ability to sign up for flooding notifications. This could be developed in only a few sprints, with other features such as maps and data dashboards added as the product progresses.

Regular feedback from real users (not just stakeholders)

It’s essential to any human-centred product that there are regular feedback and testing sessions with real users that actually represent the majority of people who will engage with the product.

For Project Groundwater we recommend including user / community feedback sessions at the start of each release phase. We can rapidly produce prototypes that can be used during this testing.

Recommended technology stack

Our tech stack includes Laravel, React, TypeScript, AWS, Tailwind, Postgres, Digital Ocean and Papertrail.

It's solid, reliable, open source, and has a strong development community. It matches up exceptionally well with the requirements for Project Groundwater.

Recommended product architecture and technologies

Chris Evans

Lead Developer

Front-end application

The core of our front-end stack is React, an open-source JavaScript library for building user interfaces. It enables us to create reusable UI components and manage state in a performant and flexible way.

The application's functionality will be coded using TypeScript, which is a superset of JavaScript that helps catch errors during development, improves code readability, and increases maintainability.

For styling, we use Tailwind CSS, which is a utility-first CSS framework. It provides a set of pre-defined classes that are consistent across all projects. This helps us create consistent, accessible and reusable components, ultimately leading to a better user experience.

For core front-end features, we will implement testing using Jest. This will increase our confidence in these features and lead to a more stable technical solution and user experience.

Backend

Our choice of backend framework is Laravel, a reliable PHP-based MVC (Model-View-Controller) framework. We chose Laravel over similar frameworks because it offers a lot of features out of the box that are needed for a project like this, including:

  • Routing
  • Database management / querying system
  • Queue management
  • Task scheduling
  • Ecosystem of well tested open-source packages
  • User account management

Admin

Any admin interfaces will be built using Laravel Nova, a commercial administration panel for Laravel web applications. It is designed to help us create custom admin functionality, such as dashboards, data management, and actions, with a minimal amount of code.

Web server and cloud services

We would serve the web application from a cloud hosted Linux server.

Ideally, this would be a DigitalOcean droplet. This would allow us to work with our recommended zero-downtime deployment solutions, Laravel Forge and Laravel Envoyer leading to a smoother and more stable development process. Using a hosting solution like DigitalOcean allows us to quickly scale resources as and when needed.

The 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

ProductOS

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. 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 ProductOS (our tried and tested process) we apply to any brief. ProductOS combines a decade of experience with the best parts of agile methodology to help us deliver products efficiently.

The objective of the first 4 two-week sprints for Project Groundwater is to have a live version of the platform in use by members of the community. These 4 sprints consist of a Definition sprint, a Design sprint and two Development sprints.

Kick-off

We’ll kick off with a planning call between us and the core Project Groundwater team. Within this we’ll get to know everyone, their rolls, setup communications channels (we favour Slack but can use Teams if preferred) and plan the first steps. We’ll need to liaise with the Groundworks team to arrange user interviews in advance of sprint 1 and once we have these scheduled we can commence sprint 1 (the Definition sprint). We want to get started as soon as possible to make sure a working version of the alert system is live before the start of 2023’s flood season (Oct/Nov).

After the release of V1.0 and it’s been used and feedback gathered, a series of subsequent updates are released to provide iterative improvements. Each of these is a mini product design and build process, with feedback analysed and updates priorities then implemented. How we decide what updates to make is based on feedback from the Project Groundwater team and users, and analytics data collected from ‘live’ use. Improvement ideas are added to task backlog estimated then prioritised, with the highest priority updates grouped into the subsequent release.

Define

We already know the desired outcome of the alerts system, but not all the details of the features that will get us there. That exactly what this discovery phase is for, which we break into these steps.

Grace Forty

Operations Manager

Stakeholder interviews

Conduct interviews with members of your team to understand what success looks like from your perspective. This includes speaking with Jed & Luciano, Dave from Jacobs and whoever is heading up the Groundworks research to understand the objectives and gather insight from each party involved.

User interviews

By speaking to the intended users of the alert system (members of the community) we can ascertain what they need (and also don’t need) from the new platform. Defining the user persona types ahead of this tells us who we need to interview, likely 2-3 people of each type.

Empathy workshop

Speaking to the key stakeholders and users means we can identify common themes and potential directions which work for both the Project Groundwater team and community. The priority at this stage is to identify the main problem areas for community members that the new solution needs to address.

Feature prioritisation workshop

Once we know what problems need solving we can generate solutions. In these collaborative workshops we work with your team to generate, discuss and refine feature ideas before ranking them using cost/benefit analysis.

Specification creation

We generate a report outlining the process followed and lessons learnt along the way, concluding with a specification which lists the success criteria and objectives for the first version of the product. This specification acts as a checklist of what needs to be included in the first version of the platform for it to be deemed a success.

Design

Now we know exactly what features to include in order to fulfil the needs of the users, it’s time to design the interfaces.

Sam Lester

Co-Founder

User experience design

How will your users navigate through the product to reach their desired outcomes? Using User Flowframes, Content wireframes and high-fidelity wireframes we can prototype and user-test ideas very early in the process. Closing this feedback loop with intended users allows the product to stay focused and keeps the project on track, speeding up the whole process.

Interface design system

Once you know exactly what features are going where in the product it’s time to make it look beautiful. We’ll create a new UI style designed in a modular way, so it can be easily rolled out across all the components within the platform during the build phase and applied to additional features in the future. By creating a library of design components, new features are designed and tested quickly; our products are designed for the long term, as we know a digital product is never finished, it only ever evolves.

Interactive prototypes

Throughout the process we create interactive prototypes, great for communicating how the product will work and how it will look. These are invaluable for user testing, checking in with users to ensure features have been implemented in the most optimal way. At the end of the interface design stage, we create full prototypes of all the platform’s core userflows.

Accessibility checks

Throughout the UI design process we check that the designs we’ve created are accessible to align with WCAG AA compliance requirements (at a minimum). A platform as important as a flood alert system needs to be accessed my as many members of the community as possible, regardless of their web accessibility requirements.

Documentation and build prep

Before anything can be developed the exact build requirements must be communicated. This is why we don’t just hand over static mockups to the dev team, but write user stories, provide interactive prototypes (of user flows and interactions), and write developer notes delivered in a series of build planning meetings.

Build

Equipped with validated prototypes, documentation and user stories, it’s time to build V1.0.

Chris Evans

Lead Developer

Implementation cycles

Working in a 2-weekly sprint cycle, we plan, assign tasks, host daily progress standups then finish each sprint with a retro. We’ll keep you updated with progress and provide you with a link to a staging site so you can see updates as they are completed.

Testing and deployment

We test on an ongoing basis as each feature (or sub-feature) is completed during each sprint. Testing includes functional tests, accessibility tests and acceptance tests from your team.

This means updates can be pushed live and into the hands of users as soon as they’re completed incrementally, instead of having to wait until the whole platform is complete before providing any benefit. We take a ‘soft-launch’ approach, putting the product live then slowly ramping up user adoption.

Creating a component library

Throughout the development sprints, we are constantly looking for ways to optimise the workflow so features can be shipped quicker. During the project, we build up a library of reusable components allowing us to get more done each sprint as the build cycle continues.

Maintenance and monitoring

After launching the first version we’ll continue to work on a sprint basis providing enhancements based on real user and community feedback.

We use uptime monitoring, logging and analytics tools to keep a close eye on the platform and enable rapid response to any platform issues.

Review

After the release of V1.0 and it’s been used and feedback gathered, a series of subsequent updates are released to provide iterative improvements. Each of these is a mini product design and build process, with feedback analysed and updates priorities then implemented. How we decide what updates to make is based on feedback from the Project Groundwater team and users, and analytics data collected from ‘live’ use. Improvement ideas are added to the task backlog, estimated then prioritised, with the highest priority updates grouped into the subsequent release.

Work examples

We've selected three relevant examples from our portfolio that use similar approaches and technologies to those we'd use with Project Groundwater.

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.

4
Client applications (learner web, learner Android, admin, course creator)
12 weeks

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.

18 weeks

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.

250

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-weekly sprint cycles in an agile way. This provides us with more flexibility and to deliver features faster in a more agile way. We also have a blended rate of £700 per day across all team members to keep things simple.

Although the amount of time required for each sprint varies depending on the sprint’s objective (define, design or development), typically they’ll be two full time designers or developers and the required project management support.

Name
Days per sprint
Cost per sprint

Chris (Lead dev)

8
£5,600

George (Full stack dev)

8
£7,000

Grace (Project manager)

2
£1,400

Sam (Operations lead & Co-founder)

2
£1,400

A note on “percentage profit markup”

The day rates we charge include the percentage markup. All of our staff are full time in-house employees so their direct ‘daily rate’ is their salary. Being an 11 person team, percentage profit margin is difficult to calculate as we don’t have a full-time CFO or HR head to formulate and manage this. Due to the nature of running a small (but mighty!) agency, not all team members’ time is billable, with variable day rates when they are. This means we don’t know what percentage of each project’s day rate is profit. We know roughly what we need to charge though to successfully deliver each product we build, so we can provide a sprint fee and overall number of sprints required with confidence, from which the overall delivery cost can be gauged.

Proposed plan

Sprint
Name
Description
Completed by

1

V1.0 Define

Identify exactly what needs to be included in the platform. Create a specification stating what features will be included in the V1.0 release and exactly what information they will display. This stage includes conducting user interviews with other professionals involved in Project Groundwater (stakeholders) and community members (intended users).

Jul 31, 2023

2

V1.0 Design

Create userflows, wireframes and high fidelity designs of the whole platform, conducting user testing sessions along the way to make sure what has been designed can be used and is understood by the intended users.

Aug 18, 2023

3

V1.0 Build

Build V1.0, setting up the development environment, integrating Jacobs’ APIs and styling front-end components, testing as we go.

Sep 15, 2023

4

V1.0 Build

Use build V1.0 to source feedback from stakeholders and users to identify further improvements which can be made. At the end of Sprint 4, V1.0 is put live.

Sep 29, 2023

5

V1.1

Further enhancements to V1.0 based on new data sets becoming available, feedback and usage analytics. V1.1 is released.

Jan 26, 2024

6

V1.2

Further enhancements to V1.1 based on new data sets becoming available, feedback and usage analytics. V1.2 is released.

May 17, 2024

Terms and policies

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 the council’s 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.