Front-End Design Refresh — B2B Analytics Platform -- 2

via Freelancer ·

Budget / Salary€30–250
TypeFreelance project
LocationRemote
Posted14 hours ago
This is a data-dense B2B web application (search, admin, and reporting features) for professional users. The app's JavaScript (Stimulus) is fully built and working — this is a CSS/HTML/visual design engagement only. We are not looking for a JS developer.

We're unhappy with the current visual design: weak typographic hierarchy, inconsistent spacing, and a look that doesn't feel like the polished professional platform we expect. We want a designer with strong visual and typographic judgement, not someone who just matches existing styles or uses AI.

Scope:
12 views total need to be redesigned. Examples include search forms with multiple field types (dropdowns, multi-select, tag-style inputs), filter pills, and dense results tables (50+ rows, 6+ columns, mixed content — status badges, tags, icons, long text in the same row). Some views are simple (forms, settings); a few are more complex (dynamic filters, dense tables, empty/no-data states). Full list of the 12 views, screenshots, and current HTML shared at kickoff.

Design direction:
Professional, precise, trustworthy — think analytical dashboard (Linear, Vanta, Datadog-style), not a marketing site or consumer app.
Strong typographic hierarchy — headings, labels, body, and helper text clearly distinguished.
Existing teal brand colour carries through; latitude to build a fuller palette (neutrals, accents, states) around it.
Consistent spacing, button styles, input styles, and states (hover/focus/active/disabled/error).
Dark mode and WCAG-level accessibility are out of scope.

Technical constraint:
Static HTML and CSS only. No JavaScript of any kind. Restructure HTML/CSS however suits your work, but all existing data-* attributes must be preserved as-is on their current elements.

How this works:
Please submit the screening exercise below along with your proposal answers. We'll review both together and select who to move forward with for the full 12-view engagement directly.

Required in your proposal:
Rate/estimate broken down by category, not a lump sum: (a) simple views, (b) medium/search-form views, (c) complex dense-table views. Hours or fixed price per category.
A link to a client project you delivered — not a personal or side project — where visual consistency across multiple screens mattered.
Confirmation you're comfortable working from static HTML/CSS exports, no live environment access.
How you handle feedback and revision rounds once a view is reviewed.
Your solution to the screening exercise below, included directly in your proposal message.

Brief screening exercise — required

Build these two elements as a single static HTML file, embedded CSS only, no JavaScript:

A) Filter bar — fields in this exact order, left to right: Search input (placeholder "Search by mark name") → Status dropdown (All, All, Pending, Registered, Opposed) → Date range: two separate fields, From - From, both DD/MM/YYYY, side by side in one control → "Apply filters" button, teal colour. Below this row, not beside it: a row of removable filter pills showing 2–3 example active filters.

B) One results table row — columns, left to right: Mark name (text) → Status (colour-coded badge: use Pending/Registered/Opposed as examples) → Classes (2–3 small tag-style chips, e.g. "9", "35", "42") → Date (DD/MM/YYYY) → Owner (a longer text string, e.g. a company name). Show the table header and 2 example rows. Design it to still read clearly if it had 50+ rows.

Submission format — required for security reasons
Paste your full HTML/CSS as plain text directly in your proposal message, plus a screenshot of it rendered in your browser. Proposals with a file attachment or external link instead of pasted text will not be reviewed.
website design graphic design css typography html ui / user interface frontend development front-end design visual design web design
Apply on Freelancer →

Project sourced from Freelancer.com. Applications happen directly on the original platform — we never collect your data.