Case studies/PROTECT/Logo & identity

Branding a statewide legal platform

PROTECT stands for Prosecutor Technology for Case Tracking. It had no visual identity, so it felt like a temporary internal tool. I designed a logo and identity that legal staff, state stakeholders and IT teams would all trust, and that works from a 16px taskbar icon to a printed training manual.

Brand identityFigma · Illustrator · GIMPGovernment
Client
State of Wisconsin · DA IT program
Role
Designer, brand and UI
Timeline
2024 – 2025
Team
Me + business analysts + developers
The brief

Four things the state asked for

The logo would appear on web portals, the desktop app, internal documents, reports, dashboards and training material, so it was seen statewide. The brief named what it had to contain, and I added the practical requirement that mattered most to me: it had to work at every size.

Place

Wisconsin outline

Anchor the platform to the state it serves.

Purpose

Scales of justice

Signal fairness and the legal role of the system.

Name

PROTECT, clearly

Instantly recognizable on every surface.

Use

Every format

From app icons and favicons to slides and print.

Research

Learning the visual language of legal institutions

Before sketching, I reviewed how government and legal bodies present themselves, looked at case management products in other states, studied classic and modern versions of the scales, and listed every place the logo would appear: dashboard headers, email templates, help and FAQ pages, training guides and the Windows desktop icon.

Government & legal brand reviewOther states' case systemsSymbol researchColor & type in legal brandingTouchpoint inventory
What we heard
Fine detail disappears in app icons and favicons.
What it changedSimplify the state outline and the scales so the mark still reads at 16px.
What we heard
Many legal products use a generic shield.
What it changedKeep the shield for trust, but put the Wisconsin outline inside it to make it specific.
What we heard
Legal audiences expect balance and symmetry.
What it changedA centered, symmetrical mark; nothing that tilts or feels playful.
What we heard
Bold acronyms hold up better than thin wordmarks in small UI headers.
What it changedA heavy sans-serif PROTECT, tested inside real header bars.
Design goals

Three goals I checked every sketch against

Recognition

Obviously a Wisconsin tool

Communicate where it comes from without needing explanation.

Trust

Professional and secure

Prosecutors handle sensitive data; the brand had to feel serious.

Versatility

Works at any size

Tested at 16, 32, 64 and 128 px, and in print.

Concept

Shield, state, scales, and a split wordmark

The state outline is simplified to an iconic shape, so it stays legible when small. The scales are drawn with a single line weight, modern but still clearly legal. The wordmark splits on purpose: PRO in navy for the prosecutors who use it, TECT in gold for technology and protection.

Color: navy (#233B63) for authority and stability, gold (#E1C25C) for warmth and emphasis. Gold doesn't have enough contrast for text on white, so the rule is gold only on navy or as a non-text accent.

Figma file

Lockups, size tests and color in one place

I drew the final vectors in Illustrator and exported .ico files in GIMP for the Windows app. The Figma file held the lockups as components (Primary and Reversed), the size tests, and the color variables, so the team could drop the logo into real screens and see it in context.

PROTECT · Brand / Logo
100%
# Logo / Primary
# Logo / Reversed
# Mark / Size test
16px
32px
64px
128px
# Colour
Navy · authority
#233b63 · 11.2:1 on white
Gold · emphasis
#e1c25c · use on navy only
Interactive fileClick a layer or anything on the canvas to inspect it
Tools & delivery

What I handed over

Each tool had one job: Illustrator for final vectors, GIMP for Windows icon files, Figma for showing the logo in real UI, and Word and InVision for collecting stakeholder feedback across review rounds.

  • Primary and reversed lockups
  • Exports in SVG, PNG, ICO and PDF
  • App icon and favicon sizes
  • Color values and usage rules
  • Placement on the login screen, header, help page and inter-county search
Reflection

What I learned

Convention can be the right call

For institutional audiences, symmetry and navy carry trust. Knowing when not to be clever was the key discipline.

Small sizes drive the design

Testing at 16px early removed fine detail before anyone got attached to it, and made the mark stronger.

Explain design in their words

Reviews with legal, IT and state stakeholders taught me to explain choices in plain language, not design terms.