Find the right practice area
Six service cards lead to individual pages with plain-language summaries, examples of work and audience cues. A FAQ and contact links keep the next step close when the visitor is unsure which area fits.
01 / PROJECTConcept / demo project
CounselFlow
A fictional legal-practice website that helps visitors find a service and send a real demo enquiry to the developer, with a clear option to request a preferred time.
THE PROBLEMWHY IT EXISTS
Make a complex service feel approachable.
Legal work can be difficult to classify before a first conversation. A visitor needs a useful starting point, enough detail to judge relevance, and a clear way to ask for help without mistaking a portfolio demo for a law firm. CounselFlow brings the service information and contact decision into one calm path.
VISUAL SYSTEMDESIGN DIRECTION
Trust through clarity and restraint.
Editorial Playfair Display headings and generous ivory space make longer explanations readable. Charcoal panels give important transitions weight; a muted gold accent marks primary actions without overwhelming the copy. Consistent service cards, short section labels and direct disclaimers help a visitor understand both the offer shown and the demo’s limits.
Ivory #FAF8F5
Cream #F3EFE9
Charcoal #1C1C1E
Gold #B8965A
THE SOLUTION04 PILLARS
Ask without losing context
The consultation form asks for a service, contact details and a short message. Required fields and Canadian or international phone validation catch mistakes before a real Formspree request is sent.
Request a convenient time
A separate modal lets visitors suggest a future weekday and time in America/Toronto. It uses the same delivery channel as the main form, but clearly states that the choice is a preference, not live availability or a confirmed booking.
Show an honest outcome
The UI waits for Formspree to accept the request before showing success. Network or service errors keep the entered data and offer a retry; demo notices explain that requests reach the developer and no legal service is offered.
USER JOURNEYHOW IT WORKS
From an unfamiliar question to a clear request.
Both entry points converge on a real submission flow, while the visitor stays informed about what will happen next.
- 01
Explore
Scan practice areas, a service page or the FAQ to identify a likely starting point.
- 02
Choose a path
Open the consultation form or select a Toronto weekday and time preference.
- 03
Send
Complete validated contact fields; the browser sends the request to Formspree and blocks duplicate submission while it is pending.
- 04
Get a truthful result
A confirmed service response produces success. An error keeps the form available for correction or retry; no appointment is created.
IN PRACTICESCREENSHOTS
LIVE DEMOINTERACTIVE
Try it in your browser.
Fictional legal practice. Enquiries are sent to the portfolio developer; do not include confidential legal details. Open standalone ↗
UNDER THE HOODTECH
How it is built.
- Astro static pages + React islands
- Tailwind CSS with locally bundled fonts and imagery
- Six practice-area pages and an interactive FAQ
- Shared Formspree delivery for consultation and preferred-time requests
- libphonenumber-js validation
- America/Toronto calendar keys and future-date validation
- Pending, accepted and retryable error form states
HONEST LIMITSWHAT IT IS NOT
Where the demo stops.
CounselFlow is a portfolio demo of a fictional practice, not a legal-services business. The service descriptions, people and cases are illustrative. Requests really reach the portfolio developer via Formspree, not a lawyer; submitting one does not establish a lawyer-client relationship. Preferred times are not live availability and do not create appointments. Visitors should not enter confidential or time-critical legal information.