Pluto is a web application that makes travel insurance easy to understand, hassle-free, and more tailored to customers’ needs. In order to make a difference within the industry, the product has to distinguish itself from any other platform available – the UI needs to shine and a slick and fast UX is absolutely key to success. Code & Pepper took up the challenge to ensure Pluto delights users with its design and operates flawlessly in terms of development.
Pluto is a web application that makes travel insurance easy to understand, hassle-free, and more tailored to customers’ needs. In order to make a difference within the industry, the product has to distinguish itself from any other platform available. The brand and the UI really need to shine and a slick and fast UX is absolutely key to success.
When Code & Pepper initiated their talks with Pluto, the app development had already been started by other developers. However, after initial contact it turned out that Code & Pepper was able to deliver a product that exactly met the high demands of the industry. The mission was to design a web application that takes away the hardships of finding and buying the right travel insurance policy.
Solutions for Pluto
A practical and aesthetic approach to UI/UX Design
The team started off by studying the style guide and design library Pluto had created before engaging Code & Pepper. These basic elements were transformed into reusable components that could be applied across the web application. To ensure the components would function as expected, they were incorporated into the product development stage – customer journey, product flows, and mockup screens. This way, the whole structure and requirements of the product had been carefully studied and understood before the actual development process.
Focus on performance in front-end development
Integration with Starling Bank
Starling is one of the leading British digital banking services in the UK, providing its users with a special feature called Marketplace. In order to discover new user bases, it was decided to incorporate Pluto in the Insurance category. This way, clients can go to Pluto from Starling, buy a travel insurance and display the policy details in their account inside Starling Marketplace. The challenges in this part were related to the authentication process, which required several changes on the backend and frontend of the application.
I really value Code&Pepper for their proactive attitude, transparency, and detailed attention to security. The development team was always very helpful and open in explaining all technical matters.Alex Rainey, CEO & founder at Pluto
Integration with Monzo Bank
The idea behind the integration with Monzo Bank was to create a separate service with Quote API – after sending a request with trip details, the user would receive information about the insurance price. The solution was created with Koa, TypeScript, Mongoose, JEST, integration and load tests using Artillery . The pricing engine, available in another service, needed to be coded from scratch as the existing one hadn’t been up to the quality standards Code & Pepper aims for.
Technologies and solutions for Pluto
Code & Pepper Services for Pluto
Focusing on performance and securityLearn More
Overcoming users’ reluctance towards travel insuranceLearn More
Connecting the application with leading digital banks: Monzo and StarlingLearn More
Developing a custom API for external integrationsLearn More
Developing your app can be an exciting journey
See next case study
Mission: redefine selling insurance online. Status? Accomplished!
Developing software that can be safely used by legal and insurance industry requires understanding the level of responsibility behind the product and expertise in leading technologies. Code & Pepper contributed to the web development and design of Oathello, an exciting LawTech solution that is about to transform the business information exchange and decision-making processes as we know it.
Oathello is a digital document signing, execution and completion platform designed to accelerate the financial processes and data exchange. The solution enables the user to fill and deliver verified documents 100% online and self-serve. It reduces the delay associated to document certification from weeks to minutes! Acknowledged by Barclays Techstars Alumni and other respected financial partners, Oathello has a potential to redefine the reality of document flow in businesses and institutions.
A self-service document completion, signing and verification tool was the vision Oathello founders headed for. However, they had to start with an MVP to prove their concept and attract investors for further development. The very first version of the product, created by Code & Pepper from scratch, involved limited functionality, but just enough to present the solution potential. We created an API-first solution that combined versatility and simplicity.
Solutions for Oathello
API-first development approach
When working on Oathello, we had to keep in mind that the tool is meant to integrate with other platforms. Instead of following the usual product-first development path, we chose the API-first approach. Starting from the core mechanism behind the product resulted in a more developer-friendly structure, easier to integrate and adapt to different clients’ needs. From the business side of the story, producing API in the beginning was the perfect way to showcase Oathello’s functionalities and grab the attention of investors.
User experience = developer experience
It doesn’t happen often that the application’s user experience is designed for three parties: the business user, end user and developer. Oathello was different because its core concept is built around external platform integrations instead of a standalone product. An API-based structure helps developers work in a synchronous, efficient pattern and develop new services and features without risking an integration failure due to endless dependencies. The final result enables other platforms to build multi-level signing and witnessing procedures while the end user is guided through a clear and simple path.
Duncan Campbell, Head of Product at Oathello
Code & Pepper provided an impressive level of service outside the original scope of requirements. At no additional charge, they proactively redesigned the product to enhance the final version. They took on the bulk of project management responsibilities and facilitated an open line of dialogue throughout.
For starters, we focused on car insurance. The goal was to let the customer complete the accident report and car rental claim online, from start to finish. This process had to include digital signing with the possibility to prove that the signing took place. Apart from that, the platform should enable document tracking and recall.
Document signing on mobile devices
Reading small-print documents on a smartphone is a struggle that all Oathello users would be facing. This required designing a fully independent mobile interface with a custom user flow.
Technologies and solutions for Oathello
It’s your time to turn the tables on the LawTech market
Flink by Helvetia Insurance is a new generation of household and private liability InsurTech products that change the way of selling insurance on the Swiss market. The task for Code & Pepper was to create and implement a new UX/UI design to achieve the client’s strategic goals – higher conversion and application usage rates.
Helvetia Insurance, an industry leader on the Swiss market, wanted to launch a new, revolutionary InsurTech product. The idea was to provide the simplest individual insurance policies for practically anyone’s belongings (MyThings) or potential damage the customer might accidentally cause to other people or their items (MyDamages). With only half a page of text and simple illustrations, Flink has the world’s shortest insurance contracts, and probably the simplest.
The first version of Flink was built by a local agency and released to the market. The team behind Flink consisted was responsible solely for business development, with no technical staff. The fast development of the live InsurTech product combined with a time-consuming recruitment of front-end (Angular) and back-end (Java) developers forced the company to look for professional help, which they found at Code & Pepper.
Solutions for Flink
Rapid team onboarding
Flink decided to hire an experienced agency that would be responsible for the development of InsurTech in the end-to-end model (design, front-end and back-end development), but at the same time working hard with their business team. Code & Pepper was a good fit as we provided a part-time UI/UX designer so that the requirements could be quickly and efficiently translated to interface design and the actual backlog on the programming side.
After the Flink business team approved the application design, it was time for front-end and back-end developers to do their very best. Understanding the business logic and close cooperation with the client were key to help Helvetia Insurance establish product requirements and collect valuable insights about the customers and the market.
External service integration for effective event tracking
To implement efficient user behaviour analytics, we decided to use Segment, a robust solution recommended by global companies like Atlassian and IBM. In order to measure insurance policy conversion rate and track key user behaviours inside the application, the events and properties were implemented according to a custom tracking plan.
We value Code & Pepper for the high quality of their work and for their positive attitude. Working in the team-to-team model meant that we all felt equally responsible for the product, solved problems more effectively and generated positive energy that stayed with us throughout the project.Daniel Kunz, Chief Product Officer at Flink
Technologies and solutions for Flink
Hire InsurTech design experts praised by the Swiss
See next case study
How Code & Pepper helped Nimbla support business owners with invoice insurance and more
Invoice insurance may not sound like a breakthrough, but it becomes much more powerful thanks to InsurTech solutions. With Nimbla, companies can check potential customers credit rating and eliminate risky decisions. Read on to learn about the solutions Code & Pepper contributed to the platform, including UI/UX design, end-to-end development, and cloud architecture.
Nimbla takes factoring services for small and medium businesses to the next level. Apart from invoice insurance, it provides users with a possibility to view the credit rating of their customers in order to prevent losses and ensure safe cash flow. The platform is cloud-based and accessible both from web browsers and mobile devices (iOS and Android). The goal for Nimbla is to facilitate and speed up the insurance proceedings for companies of all sizes.
Initially, we worked on one part of Nimbla, which was a monitoring solution for codes and policies for invoices, making them all viewable and accessible in one place. For this stage, we delivered UI designs based on frameworks received from Nimbla. The first completed project encouraged the client to continue working with us on further challenges. We went on with the designs and started the development, which included:
- Implementing library components
- Incorporating features such as tables, buttons, menus, etc.
- Deployment to cloud environment
Solutions for Nimbla
The team of 6 included full-stack and front-end developers as well as DevOps and cloud experts. The whole app architecture and code was built from scratch by Code & Pepper. Before picking the technology stack for every project, we discuss different possibilities and analyse the pros and cons before we propose our choices to the client.
Reusable UI components
UI components are implemented using React and ReactStrap. All components are reused across multiple applications, which is why there’s a point in keeping a separate repository and make sure there is a relevant API defined to avoid hard dependencies with any other application.
Tailor-made technology stack
We replaced commonly used technologies with new solutions, which proved to be a better choice for Nimbla. Here are a few examples:
- GraphQL (instead of RestfulAPI) – a more flexible API with frontend in control, a type system and out-of-the-box API documentation
- Koa (instead of Express) – the next-generation framework for Node.js
Scrum project management
To keep the communication and development progress in check, we are strong supporters of Scrum methodology and fluent communication between the client and the team. Thanks to daily updates, sprint planning and retrospectives we are always on the same page. We stick to selected communication channels – JIRA and Slack – which help us find important information quickly and prevent chaos in cooperation.
Code & Pepper provides high-quality, reliable code and designs. Flexible, responsive, and dedicated to client satisfaction, working with their team continues to add a lot of value to the business overall.Aurélien Bonnel, CTO at TradeCrediTech (Nimbla)
Technologies and solutions for Nimbla
Want to create an app your customers will trust?
Flex Funding is a peer-to-peer (P2P) lending and investment web platform dedicated to the Scandinavian market. Code & Pepper helped to define the app requirements, create an outstanding product design and provide first class front-end developers specialising in Angular.
About Flex Funding
FlexFunding matches investors with established businesses looking for affordable loans, ensuring both parties get optimal deals. It operates for different products, currencies, languages and business partners. The goal of the platform is to propose an effective alternative to corporate bank loans, ensuring stable terms and safety. Code & Pepper provided the platform with a reliable design and brought it to life with robust front-end development.
The first version of the platform had already been built, but its UX and UI design needed certain improvements. This gave us two challenges: to design a new interface for the application and provide skilled front-end developers to implement it without the need of in-house recruitment. To meet the challenge, Code & Pepper began by analysing the target group, identifying the types of platform users and objectives.
Solutions for Flex Funding
Custom software development model
Flex Funding had two specific requirements to get the platform ready. Firstly, they needed a product architect and UX/UI designer, available as soon as possible. Time-consuming recruitment was not an option. At the same time, they were looking for engineers who could join the development team to implement the new interface without hassle.
Taking all factors and requirements into consideration, we decided to offer a custom, two-part service for each development stage:
- End-to-end model for the UX/UI design. Code & Pepper were responsible for the organization of the design process, requirements management and work results needed for developers
- Team augmentation model for front-end development. Our delegated programmers joined the existing team and were involved in the development management process carried out on the client’s side.
FLEX FUNDING BY THE NUMBERS
2.5 MLN TOTAL FUNDS
Google’s Material Design was chosen as the visual language. We followed the best practices and used Angular Material, a high-quality library of material design components for Angular created by Google.
Our team analysed the behaviour of current users and mapped all functionalities of the existing application. On this basis, we were able to propose a more intuitive new design. As soon as Flex Funding agreed upon the redesigned user experience and interface, we began front-end development to finalise the application makeover.
In some countries, it is required by law to follow the A11Y standard in software development. That’s why we chose a high-quality UI library tested with screen readers, used accurate HTML elements and ARIA labels. By making sure the application is easy to use for everyone, including people with disabilities, we are able to create functional software.
In FinTech, trust is key – that’s why we pay a lot of attention to security aspects. Starting from using industry standards like OAuth 2.0/Open ID Connect and JWA (JSON Web Tokens) and MFA (Multi Factor Authentication) for critical actions in the application to lower-level solutions like CSP (Content Security Policy) and other security HTTP headers, HTTPS (TLS) and protection against common attacks like xSS (Cross-Site Scripting).
Performance is one of the elements that helps create trust in the user, which is crucial especially in applications enabling money processing. In order to keep short load times, we used lazy loading – a design pattern which loads essential parts of the application according to the user’s behaviour, following the so-called application routes.
We value Code & Pepper for their quick-to-grasp understanding of our financial product and implementing an optimised user experience on the client-side app. The team are highly experienced and brought a great approach to our project.Premila Stampe, Head of Business Strategy at Flex Funding
To ensure the high quality of the application and maintainable code, every developer created unit, component and integration tests. We also tested selected elements of the UI Behaviour-Driven Development (BDD).
We prepared the application to be usable in different languages by using Angular’s build in
i18n attribute and CLI tools. We created and tested all the pages and components using three languages: English, Danish and Faroese.