Product case study · Law firm website · Five visual directions · Design concept

Hartwell & Reyes

A calm law-firm website concept with five distinct visual directions, clear practice-area discovery and a consultation flow that visitors can try.

Open design ↗ All work

RoleUX/UI · Art direction · Responsive prototype

ScopeHomepage, five style systems, consultation demo

DeliveredFive shareable design directions around one clear consultation journey

BuildPublished HTML/CSS/JS concept, verified on desktop and mobile

01 / Situation

The situation

The brief described a small personal injury and family law practice seeking a credible, calming website for people facing a stressful legal situation. Visitors needed to understand the practice and find a consultation without navigating visual noise. This proposal concept uses fictional Hartwell & Reyes branding to explore that experience before a WordPress/Elementor build.

Audience

Prospective clients exploring personal injury, family law or estate planning, and a firm owner choosing a visual direction before implementation.

Journey

Orient → Understand → Consult

02 / Design logic

Design decisions

Make the first step feel manageable

Plain-language practice descriptions, a calm introduction and a consistent consultation route reduce the number of decisions a visitor must make. Firm approach, next steps and honest content placeholders keep the journey understandable.

Compare complete design directions

Corporate Blue, Quiet Minimal, Sage & Care, Editorial Red and After Hours change composition, typography and color while keeping the content consistent. A persistent selector and shareable style links let the firm compare specific directions in context.

Make the consultation flow reviewable

The form demonstrates required fields, email validation, reset and a clear completion state. It sends no request or personal data. This makes the interaction tangible while keeping real booking and intake integrations as a later delivery stage.

03 / Structure

Interface blueprint

These diagrams map the real blocks, order and proportions used in the finished interface, making the layout decisions easier to inspect.

Hand-drawn interface blueprint: Understand — Three comparable cards introduce personal injury, family law and estate planning, each with the same route toward a conversation.

Hand-drawn interface blueprint: Consult — A short explanation sits beside labelled form fields, with a visible demo boundary, validation and reset behavior.

04 / Final interface

Final interface

05 / Business impact

What the work changes

Delivered

Five shareable design directions around one clear consultation journey

The published concept supports five persistent, shareable styles, responsive navigation and a working no-send consultation demonstration. All five styles were checked at 360, 390, 768 and 1440 pixels, alongside 30 interaction and contrast checks. WordPress, calendar booking and CRM delivery are outside this concept.

Direction choiceCompared styles → selected direction

Observe whether the firm can choose a specific direction and explain which qualities fit its clients.

Consultation pathPractice area → consultation form

In usability sessions, check whether visitors find the relevant practice and reach the next step without assistance.

Mobile clarityFirst visit → understood next step

Test whether phone users can explain what the firm offers and what a first conversation involves.

Open design ↗