Protected: Smart Pension

This content is password protected. To view it please enter your password below:

Pluto

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.

About Pluto

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.

Challenge

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

After designing the UI components and product flows, it was time to put them into work. A multiple-tool audit revealed a lot of room for improvement in the matter of performance. The initial page load could potentially impact business and lower the conversion. Code & Pepper have optimised several aspects of the app including lazy loading and GZIP compression (React, WebPack, JavaScript, Express, Heroku). We included React due to its outstanding efficiency in real-time data processing.

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

Node.js
React.js
java-script Created with Sketch. JavaScript
payment Created with Sketch. Online payments
open-banking Created with Sketch. Open banking

Code & Pepper Services for Pluto

Developing your app can be an exciting journey

See next case study

Flink

Mission: redefine selling insurance online. Status? Accomplished!

St. Gallen, Switzerland
End-to-end Development, UI/UX Design, Web Development
Angular, Frontend, InsurTech

Oathello

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.

About Oathello

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. 

Challenge

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. 


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.

Duncan Campbell, Head of Product at Oathello

Web interface

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

React
dot-net Created with Sketch. .NET
kanban Created with Sketch. Kanban
data-engineers Created with Sketch. API development
ux-ui-design Created with Sketch. UI/UX design

Code & Pepper services for Oathello

It’s your time to turn the tables on the LawTech market

See next case study

Flex Funding

Smart UX and UI design brought to life with Angular for profitable investing and lending

Copenhagen, Denmark
UI/UX Design, Web Development
Angular, Frontend

Flink

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.

About Flink

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.

Challenge

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.

Hand-in-hand cooperation

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

angular Created with Sketch. Angular
Java
Segment_Logo_Icon_DarkNavy Segment
software-integration Created with Sketch. Service integration
dedicated-team Created with Sketch. Flexible team

Code & Pepper services for Flink

Hire InsurTech design experts praised by the Swiss

See next case study

Nimbla

How Code & Pepper helped Nimbla support business owners with invoice insurance and more

London, United Kingdom
Mobile Development, UI/UX Design, Web Development
API, InsurTech, Node.js, React

Nimbla

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.

About Nimbla

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.

Challenge

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
  • TypeScript (instead of pure JavaScript) – helped us catch bugs early thanks to strong/static typing

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

dev-ops Created with Sketch. DevOps
cloud-infrastructure Created with Sketch. Cloud Architecture
graph-ql Created with Sketch. GraphQL
React
Node.js

Code & Pepper services for Nimbla

Want to create an app your customers will trust?

See next case study

Flex Funding

Smart UX and UI design brought to life with Angular for profitable investing and lending

Copenhagen, Denmark
UI/UX Design, Web Development
Angular, Frontend

Flex Funding

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.

Challenge

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

>50 PAGES

1,200 TESTS

2.5 MLN TOTAL FUNDS

Material Design

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.

Accessibility

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.

Security

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

High performance

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

Testing

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

Localisation

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.

Technologies and solutions for Flex Funding

material-design Created with Sketch. Material design
product-design Created with Sketch. Product design
angular Created with Sketch. Angular
asset-managment Created with Sketch. Security solutions
quality-assurance Created with Sketch. Quality assurance

Code & Pepper services for Flex Funding

You’ve got the vision, we’ve got the power

See next case study

Flex Funding

Smart UX and UI design brought to life with Angular for profitable investing and lending

Copenhagen, Denmark
UI/UX Design, Web Development
Angular, Frontend