Accounting firm · client portalPorto Alegre
Cotejo Contabilidade.
Website and client portal for an accounting firm in Porto Alegre. Clients log in, see the tax month with real deadlines, send the missing documents and watch each payment slip unlock, with the accountant in the same place.
Case study
The challenge.
At an accounting firm, the client's month tends to run through WhatsApp and email: document requests that get lost, payment slips that arrive piecemeal and uncertainty about what has already been paid. The business owner doesn't know that the DAS (the Simples Nacional tax slip) waits for the sales report, or that a 20th falling on a holiday shifts three dates. The system needed to show that cause and effect, with real deadlines, without jargon and without looking like a decorative dashboard.
- 01 A month scattered across conversationsRequests, payment slips and answers are split across WhatsApp, email and phone, with no record of who sent what.
- 02 Document that locks a payment slipThe client doesn't see that the payment slip depends on them: without the sales report, the Simples calculation doesn't start.
- 03 Each deadline, its own ruleDAS and eSocial move to the next business day; FGTS and INSS move earlier. Getting the rule wrong costs a fine.
- 04 A fake slip in the mailBrazil's tax authority (the Receita) has already warned about fake DAS slips that can only be paid by Pix; the slip needed to arrive through a verified route.
Flowt Method
The diagnosis.
The site and portal bring the client's tax month into one place, with the real deadlines, the missing documents and the accountant close at hand, instead of scattered requests over WhatsApp.
- First screen and value propositionIt says what it does and where (accounting for small and medium-sized businesses in Porto Alegre), the concrete differentiator (the portal with the month at a glance) and shows the demo call to action before the timeline.
- SpeedNo photos at all and with fonts hosted on the site itself; GSAP is used only on the October timeline and the portal is plain JavaScript.
- Verifiable accessibilityZero violations in axe across six pages and the four portal screens.
- Path to the main actionFrom the first tap on a phone to the contact form, with four required fields.
- Service and first stepFour services with who they are for, what is delivered and the month's deadlines; the first step is a 30-minute conversation and a written proposal, and the demo shows the day-to-day.
- Content that informsThe October timeline filters deadlines by tax regime, with the legal source for each one; the ICMS-ST example explains a real check; the questions cover changing accountants and tax reform, with no promises.
See the full analysis
All 13 criteria, with the evidence for each point: what meets the criterion, what partly meets it and what depends on a real company. Because the brand is a concept, there is no "before" and no total score.
Being found
Title and description per page, one H1, JSON-LD for AccountingService, FAQPage and WebApplication, and the deadlines in text with a source. Partial because of the deliberate noindex and because there are no third-party mentions.
Concept brand, no real reviews. In a real project, volume, recency and responses are measured before and after on the Google Business Profile.
Fictional brand, no profile. In a real project, the profile would have the category of accounting firm, with hours and neighborhood matching the site.
Being chosen
It says what it does and where (accounting for small and medium-sized businesses in Porto Alegre), the concrete differentiator (the portal with the month at a glance) and shows the demo call to action before the timeline.
6 of 6 checks
The structure is ready: three people with name, role and CRC marked as an example, the firm with its own registration and neighborhood. A real company would add the actual registrations and reviews with a source.
There are no external channels to compare. Within the site, deadlines, hours and registrations match on the home page, on the contact page, in the footer and in the portal.
No profile, since it is a concept. In a real project, the bio would say accounting and Porto Alegre, with a link to the portal and to the contact page.
Four services with who they are for, what is delivered and the month's deadlines; the first step is a 30-minute conversation and a written proposal, and the demo shows the day-to-day.
The October timeline filters deadlines by tax regime, with the legal source for each one; the ICMS-ST example explains a real check; the questions cover changing accountants and tax reform, with no promises.
Being contacted
No photos at all and with fonts hosted on the site itself; GSAP is used only on the October timeline and the portal is plain JavaScript. The largest element is the opening title. Lab measurement.
Lighthouse 100 on mobile · LCP 1.6 s
Zero violations in axe across six pages and the four portal screens. The calendar moves with the arrow keys, dragging a file has a button alternative and each state has a word and an icon, not just color.
axe: 0 violations
No trackers, no network requests from the form or the portal, and its own privacy notice with a legal basis under the LGPD. No analytics installed, because it is a concept.
From the first tap on a phone to the contact form, with four required fields. The page says what happens next: a reply within one business day, a 30-minute conversation and a written proposal.
1 tap to the form · 6 to send
Industry obligationsDecreto-Lei 9.295/1946, art. 20, and NBC PG 01, item 4, r: the firm and each professional appear with the CRC registration marked as an example, and the site carries no testimonials, prices or client counts.
In a real project, each criterion is measured before and after, with the same yardstick and evidence for each point. There is no score: what you see is how many points remain open.
Strategy
Strategy and site map.
The firm's website opens with a tool, not a promise: the October timeline, where the person chooses the regime and whether they have employees and sees the deadlines that apply to them, with the legal source for each day. The portal was designed around the dependency between things: document sent, check, payment slip ready, payment. That is why the main screen is the month calendar, and each locked payment slip says which document is missing. The conversation with the accountant stays in the same system and reacts to what happens.
01Home
- Opening with the October timeline
- Where each payment slip comes from
- The name: an example of cross-checking
- Services and deadlines
- Payment slips through a single channel
- The firm and the team
- Questions
- Closing
02Contact
- What happens next
- Where we are
- Simulated form
- Confirmation
03Privacy notice
- Data received
- Purpose and legal basis
- Sharing and storage
- Rights
04Portal: sign-in
- What the demo shows
- Enter the demo
05Portal: dashboard
- This month
- Documents
- Payment slips
- Conversation
- Demo controls
Visual system
Typography, color and rhythm.
Atkinson Hyperlegible Next and Mono, a family designed so that 0 and O, 1 and l are never confused: in a portal full of amounts and barcodes, misreading a number is the error that matters. The base is graphite and office paper. Highlighter yellow marks only what calls for action; what is settled recedes to gray, and an overdue item is red, with a word to say so.
- October timeline with a tax-regime filter
- Month calendar with states
- Document that unlocks a payment slip
- Payment slip with breakdown and rule
- Conversation with preset replies
Signature moment
The tax month that reacts.
September's DAS shows as blocked by two documents. The visitor drags in the sample files and watches the upload, the review and the tax slip change to ready to pay; the calendar updates and the accountant explains that the slip came out lower because revenue subject to ICMS tax substitution was separated out. Anyone who has never understood what an accountant does gets to watch the review happen, with simulated, labeled data.
On mobile
Made for the small screen.
Three screens of the site on a 390 px wide phone, the most common width today.
Receipts
Measured performance.
The scores below were measured on the published site using Google Lighthouse. They are not a promise: they record the state of the site on the measurement date. Demonstrations are presented on video. Measurements record the state of the project on the indicated date.
On mobile
- Largest visible element (LCP)
- 1.6 s
- Stability (CLS)
- 0
- Blocking (TBT)
- 0 ms
On desktop
- Largest visible element (LCP)
- 0.4 s
- Stability (CLS)
- 0.001
- Blocking (TBT)
- 0 ms
Measured on Oct 4, 2026 with Lighthouse 13.5.0, simulated mobile and desktop. *SEO stays below 100 on purpose: the concept site carries the noindex directive, so it does not appear on Google or compete with real businesses. Accessibility was also checked with axe (zero violations), and alignment was reviewed at 7 screen widths.
Behind the scenes
Fact sheet.
- Pages
- Home, Contact, Privacy notice, portal sign-in, dashboard with four screens and 404 page
- Languages
- Portuguese (Brazil)
- Technology
- HTML, CSS and JavaScript, no framework, generated by a custom Python script
- Portal in plain JavaScript: demo state, anchor-based routes, dragging with the pointer and with files from the computer
- Modal windows with the native dialog element and keyboard shortcuts
- GSAP only on the opening timeline; the portal animates with CSS
- Fonts served by the site itself, with a metric-adjusted fallback font
- Per-page CSS and JavaScript minified with esbuild
- schema.org structured data (AccountingService, FAQPage and WebApplication)
- Images
- No photographs: the timeline, the calendar, the sample invoice and the whole portal interface were drawn in HTML, CSS and SVG.
- Accessibility
- Calendar with keyboard arrow keys, a button alternative for dragging files, state labels in text and icon (never color alone), a reduced-motion version and zero violations in axe.
- Industry rules
- Follows Decreto-Lei 9.295/1946 and NBC PG 01: the firm and each accountant appear with a CRC registration marked as an example, with no testimonials, prices or client counts.
Start now
Let's bring your online presence up to the level of your service.
Start with the free diagnosis: we measure your online presence and show you, point by point, what to fix first.
Booking open for new projects
Tell us about your project
A few details are enough. We'll ask about the rest.