Redesign strategy

1. The finding that shaped this concept

Before I drew anything, I wanted to know what draper.com was actually built on. That turned out to be the most useful hour I spent.

The site’s images and scripts come off a CloudFront host — d1io3yog0oux5.cloudfront.net — that also serves investor materials for Intel, Chimera Investment and Palmer Square Capital. The page URLs run /media-center/news-releases/detail/{id}/{slug}. Both point at the same thing: Q4 Inc., a CMS built so public companies can run an earnings cycle. Filings, quarterly results, shareholder communications, stock tickers.

Draper is an independent nonprofit. There are no shareholders, no filings, no earnings calls.

Then I found the accessibility statement. It lists known delays for “Earnings Webcasts/Media” and “SEC Filings” — accessible versions available on request. Draper holds no earnings webcasts and files nothing with the SEC. That’s the platform’s boilerplate, published word for word on Draper’s own policy page. The mismatch has worked its way into what Draper says about itself.

Almost everything else I’d change comes back to this. The structure is shaped like an investor site — a corporate “About Us,” a seven-item “Media Center,” press releases doing the work of a content engine. What’s missing is what an R&D organization actually needs. No project portfolio. No research library. No route in for a partner. No clear recruiting experience.

The site isn’t underdesigned. It’s on the wrong tool.

Which changes what the assignment is. Not a visual refresh three years on. A platform decision, an audience model and an editorial strategy, with a new design as the part you can see.

2. Who this site is really for

The navigation is organized the way Draper is organized. That’s an org chart, and four very different people are being asked to share one path through it.

Government program managers and technical customers (DoD, Navy Strategic Systems, NASA, IC, BARDA) They show up knowing a problem, not a market-area label. What they want is proof Draper has solved something close to it — a program, a prototype, a paper, somebody’s name. They currently get adjectives and a press release archive.

Prospective engineers and scientists Draper is going after the same people as Lincoln Laboratory, APL, MITRE, Aerospace Corporation and every prime, and most of them have better recruiting sites. Careers sits behind a dropdown and hands off to Workday. “Education Programs” and “Careers” are separate top-level items, even though they’re the same pipeline at different stages.

Academic and industry partners DraperSPARX and Suppliers have been pushed into a small utility bar above the logo. There’s no visible way in, nothing about licensing, and no answer to the question a university lab or a startup would actually ask: how do I start a conversation with you?

Media, policymakers, and the public Served reasonably well, because this is the one audience an investor platform happens to fit.

So the job isn’t mainly to make the site prettier. It’s to build the two layers that don’t exist — evidence and talent — and give each of these people a path to them they can actually follow.

3. The strategic idea

The work is the argument.

Draper has two things its competitors can’t easily claim. Independence — a nonprofit with no product line to defend and no shareholders to please, which makes it a genuinely objective advisor. And range — concept through fielded prototype, in-house, across biotech, electronics, strategic and space systems.

The current site asserts both. It doesn’t demonstrate either.

So the principle I’d build on is that every claim anchors to something you can check: a program, a publication, a patent, a person, a piece of hardware. No capability page without proof attached. I’d enforce that in the content model rather than the style guide: a Capability node can’t publish until it references at least one Program, Publication or Person.

You can test a page against it. If a page is only adjectives, it isn’t done.

It also happens to answer what the brief asked for. Credibility comes from evidence, not from saying you’re credible. The competitive edge is being the lab whose work you can actually read when everyone else hands you a brochure. And brand control comes from owning a content model instead of renting an investor template.

4. Design direction: “Caret”

The brand Draper already owns

Draper’s external style guide gives you three colors and one mark:

It also names the Caret — that’s the “A” in the wordmark — as a brand element in its own right, with its own rules about when it can be orange and when it has to go white.

The whole guide runs seven pages, and that’s all it covers. No typeface. No secondary palette. Nothing about photography, and nothing at all about the web.

Two things follow from that. The site barely uses the brand it already has; draper.com is almost entirely white and gray, and Draper Orange is barely used. Because the guide stops before the web, extending it isn’t me taking liberties. It’s the missing piece, and building it is what this job is.

The direction

Use the brand. That’s the idea.

Look at who Draper competes with for customers and for engineers: Lincoln Laboratory, APL, MITRE, Aerospace Corporation, the primes. They all land in the same place. Navy and blue, dark grounds, hexagon meshes, stock photos of people pointing at screens.

Draper’s own color is a hot orange on a light ground. Follow the existing guidelines and you get a site nobody could confuse with a competitor’s.

The Caret as system device

The caret does the structural work, for three reasons. It already belongs to Draper, it points somewhere, and it holds up at 14 pixels and at full bleed.

• Wayfinding and hierarchy. Section markers, link affordances, breadcrumb separators, filter states, button indicators — one shape doing the work that generic chevrons and arrows do on every other site.
• Connective tissue across breadth. The caret is what makes four unrelated content domains read as one company. It is the element that survives across a microfluidics photograph and a spacecraft render.
• Forward motion. It points up and ahead. Draper’s own line is “We enable progress.”

Under the hood it’s one SVG <symbol> referenced everywhere, so there’s a single source of truth for the mark. The wordmark’s caret color is a CSS variable, which is how one file covers both the dark-ground and orange-ground versions the guide asks for.

Interior pages are identified by a constructed icon, not a photograph. The capability page carries a bearing ring built around the caret, with one arc drawn dashed to signify the missing reference. Every capability icon shares the caret at its center; what surrounds it identifies the subject. That implies the rest of the library without anyone having to draw it.

I also measured the caret’s angle off the official path — 20.95° from vertical — and tried it as a chamfer cut into the color bands. Then I took it out. The caret markers were already saying that across the page, and the chamfer argued with them instead of backing them up.

Typography

The guide doesn’t name a typeface, so this is a proposal, not a constraint.

Archivo, one variable family used across its full width and weight range. It handles executive narrative, dense technical content and publication citations without changing personality, and the width axis does the display work — headlines at wdth 116 / wght 800, body at 100 / 400. The big type is a setting rather than a second font, so the whole scale costs one file.

The prototype loads it from Google Fonts. In production it should be self-hosted, subsetted, and preloaded.

I’d originally planned a monospace face for technical metadata and dropped it. On the page it read as decoration rather than information, and Archivo’s tabular figures already do the job.

The scale is fluid with a hard floor of 16px anywhere on the page. Engineering credibility comes from being clear, not from cramming.

Color rules, derived from contrast testing

Draper Orange is the best thing the brand owns, and it comes with a constraint nobody wrote down. The guide stops at three colors, so I built the rest of the palette and measured all of it.

Draper’s federal customers need Section 508 conformance, so these aren’t preferences. Each one falls out of a number:

1. Orange never carries body copy on white (3.42:1). Body text is Draper Black at 17.91:1; orange-toned links use #B82D08 at 6.15:1.
2. Orange is used at display scale — headlines above 24px, the caret, and UI components where 3:1 is sufficient.
3. Text on orange fields is Draper Black, never white. Ink reads 5.23:1 on the primary and 6.04:1 on the tertiary; white is 3.42:1 and fails. This is counterintuitive and it is where most designers would get it wrong.
4. White carets only on true Draper Orange. The guide mandates a white caret on orange grounds, but on the tertiary that is 2.96:1 — under the 3:1 floor for non-text components. The guide states the rule without stating its boundary.
5. Orange text on dark grounds uses the tertiary, not the primary — 6.04:1 against 5.23:1.
6. Focus rings invert inside orange sections. The orange ring is 1.15:1 on the tertiary field and effectively invisible; it switches to ink at 6.04:1.

None of this is in the guide existing. Though it's the part a web team would open every day.

Imagery and motion

• Photograph the actual work. The prototype uses Draper’s own pictures — a researcher at a microfluidic instrument, a chip in a cleanroom, a control station, a spacecraft on orbit, an engineer at a bench, employees outside the Cambridge building, and one archive frame from a lecture in the fifties.
• Watch the temperature. Draper’s published photography runs cool blue, which is the palette this whole concept argues the competition lives in. I balanced the four market tiles warm, cool, dark, near-black so the orange stays in charge.
• Optimize on the way in. The source files ran from 2 MB to 8.5 MB. Everything was resampled and re-encoded; the museum frame came down 93%, to 547 KB.
• Motion is two ideas. Images breathe slightly on hover; carets move the way they point. One slow settle on the hero at load. Nothing is scroll-triggered, and the whole set is gated on prefers-reduced-motion — which also removes the current site’s autoplaying hero video and its second background video below the fold.
• Keep the heritage alive. The founding instrumentation work and the Draper Museum are two of the strongest assets in American engineering, and right now they’re a paragraph and a set of opening hours.

The result should feel confident and open. It’ll also be the only site in the category that isn’t blue.

5. Information architecture

Today (7 primary + 3 utility): About Us · What We Do · Market Areas · Media Center (7 children) · Careers · Education Programs · Contact — with DraperSPARX, Suppliers, and Visitor Information stranded in a utility bar.

Two problems with that. “What We Do” holds capabilities and “Market Areas” holds markets — a real distinction inside Draper that a visitor has to work out for themselves, so a program manager just tries both. And the deepest, most developed part of the whole site is the press release archive.

Proposed:

On the homepage those two show up as one section. Each market area carries its own proof item right under its description, so the page enforces the content rule instead of announcing it. I had them as two separate blocks at first and it repeated three of the four markets inside a single scroll, which is how I ended up merging them.

• Research (New): Publications, technical papers, patents, conference presentations.
• Partner With Us: DraperSPARX, technology transfer and licensing, suppliers, university collaboration — unified into one visible path.
• Careers: Absorbs Education Programs. One talent pipeline: students → Draper Scholars → service members → professionals.
• About: History, the Draper Museum, leadership, Engineering Fellows, and the independence story told as positioning rather than boilerplate.
• Newsroom | Seven items flattened to news, stories, events, and press kit.

Two new sections, one merge, one flattening — fewer things in the nav and a lot more behind them.

6. Resources to add

Ranked by impact:

1. Program & project library — faceted, filterable, cross-linked to capabilities and people. The single highest-value addition. This is what a program manager came for.
2. Publications & patents repository — an R&D organization with no visible research output is invisible to the exact people evaluating it. See section 7.
3. Unified careers hub — job feed integrated from Workday with JobPosting structured data, engineer profiles, life-at-Draper content, and the education pipeline in one place.
4. Technology transfer & partnering pathway — a clear front door for licensing, CRADAs, and university collaboration.
5. Draper Museum digital experience — Apollo Guidance Computer heritage, archive holdings, visitor booking. A brand asset currently reduced to hours and an email address.
6. Working site search — federated across the new content types, with facets. Currently a basic search box against a shallow site.
7. Accessibility statement and VPAT — Draper’s customers are federal. Section 508 conformance documentation is a procurement asset, not a nicety.

7. Findability: SEO, AEO, and GEO

How people find a defense R&D lab has changed since this site last shipped. A program manager wondering who does microphysiological systems work for BARDA is as likely to ask an AI assistant as Google now. So is the graduate student looking for labs working on lunar navigation.

To come up in those answers you need content an engine can cite, and draper.com doesn’t have much. Press releases, mostly, which announce things rather than explain them.

Here’s what I’d do about it.

• Structured data across the board. Organization, ScholarlyArticle for publications, JobPosting for openings, Article and FAQPage for capability content, Event for museum and student events. This is the mechanical prerequisite for AI citation.
• Answer-shaped content. Each capability page opens with a direct, extractable answer to the question it exists to serve, before the narrative.
• The publications library as the citation engine. Papers, patents, and technical explainers are the most citable content an R&D organization can publish, and Draper currently publishes almost none of it publicly.
• Entity consistency. Draper’s name, structure, and expertise areas expressed consistently enough that models resolve “Draper” to the right entity — non-trivial given Draper Laboratory, Draper Associates, and Draper Startup House all compete for the term.
• Baseline first. I would not commit to targets before seeing GSC and GA4 data. My method is the one I ran at UChicago: instrument, baseline, remediate, monitor — SEO score 87 → 93.8, against an industry benchmark of 83.1.

(There’s an AEO and GEO audit engine and a Search Visibility Program write-up in my portfolio if you want the longer version.)

8. Accessibility and performance

Draper sells to the federal government, so Section 508 conformance is contractual rather than optional. The current accessibility statement is a page. What’s needed is a program.

I measured every color pair in my own prototype before publishing it, and four of them failed. Here’s what I found and fixed:

The focus ring is the one that mattered. An orange ring on an orange field is effectively invisible, so anyone tabbing through the careers section would have lost their place completely — and nothing about the page looks wrong. You only find that by measuring it.

I also hid 75 decorative carets from assistive technology. Inline SVG without aria-hidden can get announced as an unnamed graphic, which would mean an interruption before every link and heading on the page.

Everything else passes — body text at worst 5.03:1, display type, links, component borders, the other focus states. Structurally there’s one h1 per page, no skipped heading levels, a skip link, labelled landmarks, alt text on every image, a real label on the search field, a 16px floor and 44px touch targets.

What I haven’t done yet: reflow at 320px and 400% zoom, text-spacing overrides, actual screen reader output, and keyboard operation end to end. The mobile menu still needs focus management and an Escape handler.

So the prototype is: built to WCAG 2.2 AA, contrast and structure tested, manual screen reader and zoom passes still to come.

Longer term, accessibility belongs in the component library so editors inherit it rather than being trained to preserve it. That’s what moved the accessibility score 16 points at UChicago and took QA from 84.3 to 97.1. Monitoring goes into the editorial workflow so regressions surface in days rather than at the next audit, the performance budget runs in CI, and the VPAT gets published as a procurement asset.

9. Platform recommendation

Drupal 11, hosted on Acquia Cloud.

Considered, not recommended:

• WordPress VIP — faster editorially, materially weaker for structured, deeply interrelated content. Would reproduce the current problem in nicer clothes.
• Fully headless (Next.js + a SaaS CMS) — technically appealing, but it adds a JavaScript build pipeline and a second system to a small web team. Operational risk without proportional benefit. Drupal 11 can go decoupled later for specific surfaces if a case emerges.
• Staying on Q4 — the platform is competent at what it was built for. Draper doesn’t need what it was built for.

Pantheon is a good cheaper alternative if FedRAMP-aligned hosting isn’t required for a public marketing site. That’s a call to make with Draper’s security team rather than assume. I’ve run production Drupal on Pantheon and would be comfortable either way.

The intranet stays on SharePoint. It’s the right tool for an employee portal in a Microsoft environment and replacing it isn’t the problem. What’s interesting is connecting it — pulling selected internal content through the Graph API onto the public careers pages, so employee stories and recognitions stay current without anyone writing them twice.

10. Measurement

I’d agree these with stakeholders and baseline them in the first 30 days, because targets set before you have numbers are just wishes.

• Customers: contact and partnership inquiries; depth of engagement in Our Work and Research; return visits from .mil, .gov, and known partner domains.
• Talent: careers-page-to-Workday conversion, application starts, source attribution, time-to-fill on hard technical requisitions.
• Findability: organic visibility on capability terms, citation appearance in AI answer engines, publication library indexation.
• Quality: Core Web Vitals, accessibility score trend, broken link and content-quality scores.
• Operations: time from content request to publication — the metric that tells you whether governance is working.

11. Phasing

Phase 0 — Discovery, four to six weeks. Inventory and audit what’s there now. Talk to engineering, communications, HR and security. Get an analytics baseline. Work out what can and can’t be published.

Phase 1 — Foundation. Content model, design system, component library, accessibility standards, editorial workflow. Migrate what exists.

Phase 2 — The evidence layer. Our Work and Research. This is the valuable part, and it has to launch with enough in it to be credible on day one.

Phase 3 — Talent. The careers hub, Workday integration, the Graph API connection to SharePoint.

Phase 4 — Optimization. Structured data, performance tuning, accessibility monitoring, and content that keeps coming.

12. The prototype

This is a working build, not a set of mockups.

13. What I’d need to validate

Stating these is part of the recommendation. Everything above was worked out from the outside. Some of it will survive contact with the inside of Draper and some won’t, and it’d be a bad sign if I pretended otherwise.

1. Publication review process. How much program content can actually be published? Some Draper work is classified, export-controlled, or customer-restricted. The evidence layer only works if there’s a workable security and public-affairs review path, and that constraint should shape the content model rather than be discovered after launch.
2. Content volume. A full inventory determines migration scope and whether Phase 2 launches with 20 programs or 200.
3. Q4 contract terms. Renewal timing affects sequencing and the cost argument.
4. Brand extension approval. The external style guide covers logo and three colors. Typography, the interface palette, imagery direction, and motion standards proposed here extend the brand into territory it doesn’t currently define, and that extension needs sign-off from Draper Communications. Whether an internal guide already covers this, and whether existing photography can carry the direction or a commission belongs in Phase 1, are open questions.
5. Analytics access. GA4 and Search Console history, to replace assumptions with baselines.
6. The journeys themselves. Two paths run end to end in the prototype — a program manager reaching a capability page and a contact route, an engineer reaching open roles through the work. Both are traced from what’s built, not drawn from research. The partner path stops at a link. Real journeys need session data and a handful of interviews, and that’s Phase 0 work.
7. Team and budget. I scoped this for a small in-house team with selective agency support, because that’s the shape most organizations this size actually have. If Draper’s is different, Phase 1 changes.