- Year
- 2026
- Platforms
- Responsive website (WordPress), shown on mobile, with a back office and AI
- What we did
- Product design, UX/UI and development
The brief
AllRisk is a Portuguese insurance broker that wants to do the opposite of what the sector usually does: speak plainly, with no small print and no endless forms. The site has to show, in seconds, which protection makes sense for each person and each company.
Instead of a menu full of products, the site opens with a question: what is your risk level? A slider with three positions (low, medium and high) changes the entire page: the opening copy, the everyday situations, the coverage, the testimonials, the accent colour, the logo and the background video. With one page for individuals and another for companies, each of them is really three pages: six experiences in the same site.
The tone is that of a conversation: individuals are addressed informally and companies in the plural, with little insurance jargon and plenty of concrete examples.
Behind the site there is also a WordPress back office and a layer of AI that works on PDF documents (RAG and content extraction) and on activities (CAE).
Who it is for
-
01
People with a predictable routine
Individuals and office-based companies who want simple, proportionate protection, with no jargon and no paying for what they don't need.
-
02
People who live (or run things) on the move
They drive every day, train, travel, run a small team or a fleet. They look for coverage that keeps up.
-
03
People who work in high-risk environments
Construction, industry, transport, heavy machinery. They need a solution designed around the profession, and a real person to talk to.
01 / 05
The risk slider
At the top of the page, under the header (with the switch between individual and company, the logo, the call button and the menu), there is a question, what is your risk level, and a slider with three positions: low, medium and high. You drag it, click the bar, or pick the level in the fixed selector (01, 02, 03) that follows the scroll, so you can change level anywhere on the page. Each position has a shield with a different symbol (a tick, an exclamation mark, an alert), which even shakes at the high level, and the page reacts straight away: the label (essential, advanced or total protection), the headline and opening text, the accent colour, the logo and the background video, faintly visible behind the text, all change.
Each level speaks in its own voice. Low: your life is calm and we want it to stay that way. Medium: you have challenges every day and we are ready for them. High: your routine demands more and we give you that coverage. The colour moves from green to amber to red.
02 / 05
Is this you?
Below the slider, a list of everyday situations, on cards you can select, lets the visitor check they picked the right level. Each level has its own five situations, from your biggest risk at work being spilled coffee on the keyboard to safety at work being the topic, and a progress indicator rises as they are selected, with a line saying how close you are to a full match. The company page has its own list, with situations such as heavy machinery, construction work or environmental liability, and the list comes in both a light and a dark theme.
The button at the end of the list also changes its wording with the level: I want to know more, talk to me, or I need a solution. It opens a short form (name, email and an optional message), with WhatsApp and the phone for people who prefer to talk, and the chosen level travels with the contact request, so whoever replies already knows which profile it is.
03 / 05
Testimonials, contact and coverage
Near the end of the page, the testimonials play in a carousel, one at a time, with arrows and dots: the stars, the quote, the initials of the person, their profession and their city. They also follow the chosen level: people who drive, who train, who work on building sites.
Right after comes a direct contact block, with WhatsApp as the preferred route, the phone and the form, and the message that on the other side there are people, not chatbots.
Further up, each level has its own five coverage cards, with a photo and a symbol, only with what makes sense for that profile. Low: work, mobility, health, family and home. Medium: work with equipment and liability, the road, health for people who train, a family on the move and the home as an investment. High: total cover for high-risk professions, transport, health for those who push their bodies harder, a protected family and what you have built. On a phone the cards stack in a single column.
04 / 05
The other pages: companies and institutional
The company page repeats the mechanic at a different scale and in a different tone (visitors are addressed in the plural). The switch in the header, with the icons of a person and a building, moves between the two pages, and the slider now asks what the risk of your company is, with base, advanced and total business protection. The list of situations at the high level, which you can see in the dark theme further up, asks about heavy machinery, construction work, environmental liability, exposed employees and accidents in the operation.
The base level is the office-based company: professional liability, group health for the team, office and equipment, cyber, and life and accident cover for employees. The advanced level is the one with a fleet, a field team or goods in transit. The total level is industry, construction and large risks, with loss of earnings from machinery breakdown, environmental liability and tailored solutions.
The institutional page tells who AllRisk is and who it works for (start-ups, healthcare professionals, artists and creatives, companies exposed to digital threats, and large risks), with one card per audience, and goes on with the mission, the vision and six pillars that run from transparency to independence (AllRisk works with several insurers), ending with an invitation to find out your risk level.
05 / 05
Behind the site: the back office and the AI
Behind the site there is a back office in WordPress itself. Each risk level, the coverage cards, the situations and the testimonials are content types of their own, with custom fields (ACF), so the team edits the copy for each level without touching the code, and contact requests (the form shown above) arrive by email already carrying the chosen risk level. There is also a contents calculator (the value of what is inside the property), which stores the proposals, sends them to the client and to the team, exports them to CSV, resends them and prints them as PDF.
AI is built in on two fronts. An assistant answers questions from PDF documents (RAG: the documents are indexed and the answer comes from the passages found, not from the memory of the model), and content extraction turns those documents into text and structured fields. And there is SeguroIA, a plugin that identifies the mandatory insurance for an activity: the person describes it in their own words or gives the CAE code, a language model helps classify it and the result comes from a local base of mandatory insurance.
Green, amber and red
The visual system has two themes, light and dark, which the visitor can switch and the site remembers. Surfaces are neutral and cool, and the accent colour is the risk level's: green, amber or red, each with a darker version in the light theme to keep the contrast. Text is set in Outfit, and labels and numbers in Space Mono. Cards have 16 px corners.
AllRisk (dark)
- Surfaces
-
#0A0A0F#1E1E2E - Text
-
#F0F0F5 - Accents: low, medium and high
-
#2DD4A0#F5B428#E64646
AllRisk (light)
- Surfaces
-
#F5F5F8#FFFFFF - Text
-
#1A1A2E - Accents: low, medium and high
-
#106847#B44F09#B02020
Behind the screen
What it takes for a site with this much motion to stay light and readable.
-
A bespoke theme
The site is a custom WordPress theme, with hand-written CSS and JavaScript and GSAP animation, with no page builder.
-
One level, one page
The three levels live on the same page and swap in the browser, with no reload. The copy for all of them is in the HTML, so search engines read it, and only the chosen level's panel is visible.
-
Videos only when needed
Each level's background video is only requested the first time that level is chosen, so the page opens light.
-
Two themes, three accents
The accent colour is a variable that JavaScript swaps with the level, with two sets of values (one per theme), so the contrast is good in both.
-
Editable content with no code
The levels, the cards, the situations and the testimonials are WordPress content types with fields of their own, so they are edited in the dashboard, and contact requests carry the chosen risk level.
-
AI over documents
An assistant answers from indexed PDF documents (RAG) and content extraction turns those documents into text and structured fields. SeguroIA uses a language model to classify the activity and looks up a local base to say which insurance is mandatory.
What we did
We designed and built the site end to end: the UX/UI and design system, the development of the theme and its interactions and the look of each level, with art direction from the visual identity. And we built the WordPress back office and the integration of AI and automation: the RAG over PDFs, the content extraction and the identification of mandatory insurance by CAE.
FAQ
Questions, answered.
-
The website of a Portuguese insurance broker. Instead of a menu of products, it opens with a question: what is your risk level?
-
It has three positions (low, medium and high) and changes the whole page: the opening copy, the everyday situations, the coverage, the testimonials, the accent colour, the logo and the background video. There is one page for individuals and another for companies, so in practice there are six experiences.
-
Yes. The visitor can switch and the site remembers the choice, and the accent colour of each level has a darker version in the light theme to keep the contrast.
-
An assistant that answers from PDF documents (RAG), the extraction of content from those documents and an identifier of mandatory insurance by activity (CAE), which uses a language model to classify the activity and a local base for the result.
-
Yes. Tell us what you have in mind and we will tell you how we would approach it, from design to development. Write to us with the "Talk about a project like this" button, at the top and further down this page.
-
With a conversation to understand the goal, who will use the product and what already exists. That produces a clear scope, and we move forward in phases, with deliverables you can see and comment on along the way.