Spero Solutions

Bringing a changing business into one clear web presence

I designed and delivered a consolidated website that aligned Spero’s online presence with how it presents its professional services, government markets, and capabilities in sales conversations.

Spero Solutions desktop homepage showing the hero and government market cards.
Role
UX Designer and Frontend Developer
Timeframe
Approximately May to June 2026
Platform
Responsive website built with Astro
Client / Org
Spero Solutions, through Lab Sixteen

01. Overview

Three identities, one evolving business

Spero is a professional services organization that augments teams supporting government programs. Its business evolved from a commercial IT focus to supporting a broader range of technical disciplines on government contracts and for the vendors serving those programs.

The web presence had not kept pace. Spero operated three versions of the original website, carrying largely the same content under different logos and brand colors. Those identities extended to business cards, website domains, and email addresses. A prospect could receive an orange, blue, or purple business card depending on whom they met. An account manager might email from the Engineering domain, while billing correspondence arrived from the Solutions domain. Each interaction could present a different identity for the same business.

The content created another disconnect. The original Solutions site mentioned government experience, but lacked the specific market, capability, and program context Spero used in sales conversations. A prospect following up online would find little detail connecting those conversations to the teams and programs Spero could support.

Three Spero identities: orange Solutions, blue Engineering, and purple Technology.
Three identities for one business. Orange, blue, and purple branding carried across business cards, websites, and email domains.
Archived Spero Solutions and Technology homepages with similar navigation, layouts, and messaging under different branding.
Solutions and Technology homepages recovered through the Wayback Machine show the shared website structure. An Engineering screenshot was unavailable.

02. Sales experience

A website that could support the sales conversation

The website's central job was to give prospects a credible place to follow up after speaking with Spero's sales team. The language online needed to match how Spero already presented itself: the government programs it supported, the markets it served, and the capabilities in which it had relevant experience. Updating the copy and organizing that information into clear pages would help prospects connect the sales conversation with what they found online.

I worked directly with Anthony, Spero's CEO, to define the site hierarchy before exploring the visual design. We separated the markets the company wanted to serve from the project functions its technical professionals could support. We reviewed Actalent, Jacobs, and Amentum as reference points for the language and structures prospects might already encounter among larger firms and potential customers.

The resulting structure gave markets and capabilities their own paths. When Spero discontinued its IT talent offering, I replaced the homepage’s two delivery categories, Engineering and IT, with three core competencies: Design and Development, Construction Management, and Project Controls. I updated the imagery and aligned the Capabilities page with those same three areas. These labels describe where Spero places technical professionals within client-led programs.

I also brought context from approximately seven to eight conversations with salespeople, recruiters, and leadership during a broader operational-efficiency engagement. Those conversations helped me understand how staff described the business and the tools they used. They were not a dedicated website usability study.

Organizing markets and capabilities

Open in FigJam (opens in a new tab)

Pan and zoom to explore the sitemap, or expand it to full screen.

Spero sitemap showing the organization of the website.

03. Visual direction

Turning stakeholder preferences into a visual direction

A marketing agency had helped establish Spero's brand voice, but its website concepts and subsequent revisions had not produced a direction Anthony wanted to pursue. I took over website design and delivery while the client continued to supply the specialized business content.

Anthony liked the dark theme of the agency concept, but the page itself did not give us the direction we wanted. I used that concept as a reference in Google Stitch, supplied the Spero logo, and prompted alternatives based on what we disliked and what we wanted to see: prominent imagery, a large hero, and cards that paired images with useful information.

One direction closely matched what he wanted. I used it as a starting point, then developed and refined the designs in Figma for review. This let us discuss specific choices, such as how a header worked or how markets were presented, instead of relying on abstract descriptions.

I created alternatives for filled and outlined cards, button treatments, and interior-page headers.

The resulting design system established typography, background and section colors, buttons, and repeatable page treatments.

Far left: Agency conceptRemaining screens: Stitch explorations
Agency concept at far left, followed by Stitch explorations grouped into home, markets, capabilities, projects, and careers pages.
The agency concept at far left established the dark direction Anthony preferred. I supplied that reference, the Spero logo, and specific feedback to explore alternatives in Stitch before refining the selected direction in Figma.

Comparing typography in context

I used Claude to create a working HTML comparison of five font pairings using the same sample content. Seeing the fonts against the site's dark palette helped Anthony and the marketing stakeholder make a concrete choice: Barlow for headings and Lato for body text.

Heading: Barlow  /  Body: Lato

Sentence case

Trusted When It Matters

All caps

Trusted When It Matters

Spero deploys technical professionals across design development, construction management, and project control scopes on federal programs where the standard is high and the schedule does not move.

Heading: Libre Franklin  /  Body: Source Sans 3

Sentence case

Trusted When It Matters

All caps

Trusted When It Matters

Spero deploys technical professionals across design development, construction management, and project control scopes on federal programs where the standard is high and the schedule does not move.

Heading: Archivo  /  Body: Public Sans

Sentence case

Trusted When It Matters

All caps

Trusted When It Matters

Spero deploys technical professionals across design development, construction management, and project control scopes on federal programs where the standard is high and the schedule does not move.

Heading: Space Grotesk  /  Body: IBM Plex Sans

Sentence case

Trusted When It Matters

All caps

Trusted When It Matters

Spero deploys technical professionals across design development, construction management, and project control scopes on federal programs where the standard is high and the schedule does not move.

Heading: Fraunces  /  Body: Inter

Sentence case

Trusted When It Matters

All caps

Trusted When It Matters

Spero deploys technical professionals across design development, construction management, and project control scopes on federal programs where the standard is high and the schedule does not move.

Five font pairings from the HTML prototype. We selected Barlow for headings and Lato for body text.

04. Iteration

Testing visual choices against real content

I explored three directions for interior-page headers: an abstract pattern in tall and compact layouts, photography with orange overlays, and photography with a subtle dark gradient. Comparing the options with real imagery helped us evaluate the header height, readability, and use of brand color.

The client chose photography with a subtle dark gradient. It helped the title and supporting text stay readable while preserving the image's natural colors. The orange treatments, both a full overlay and a gradient, sometimes clashed with the selected photography and did not work consistently across the image set.

The comparison reinforced that a header treatment needed to work with the actual content across the site.

Abstract orange light patterns behind Spero headers, comparing a taller Our Markets header with a compact About Us header.
01. Abstract backgrounds. Tall and compact versions explored how much space the header should occupy.
Compact photographic Spero headers comparing a full orange overlay on Contact Spero with an orange gradient on Careers at Spero.
02. Orange overlays. A full brand-color overlay and an orange gradient connected the imagery to the brand, but sometimes clashed with the photograph's colors.
Selected photographic header treatment with subtle dark gradients behind the Our Capabilities and Our Portfolio titles and supporting text.
03. Photography with a dark gradient. Selected by the client. A subtle dark gradient supported text readability while keeping the photography's natural colors.

05. Development

Building a foundation I could extend

The previous WordPress site was rarely maintained and included unwanted comments, despite having no business need for commenting. I recommended Astro for a largely informational site that did not require the existing CMS workflow. The choice also supported the planned use of reusable templates for future case studies.

I coded the homepage and Markets page, establishing the layout, styling, and shared components. I then used AI to help organize the CSS into reusable variables before extending the site.

For subsequent pages, I created the designs in Figma and directed Anti-Gravity to implement them using the existing project components and styles. I reviewed the results and directed corrections to typography, spacing, and other details. The finished site combined my initial implementation with AI-assisted development under my direction.

S
SPERO SOLUTIONSFEDERAL CONSULTING
Design System & Component Library

Typography

Barlow
Headings & UI
Aa Bb Cc
TRUSTED WHEN IT MATTERS
SemiboldButtons · Labels
BoldSubheads
ExtraBoldDisplay / H1–H2
Lato
Body copy
Spero deploys technical professionals across design development, construction management, and project control scopes on federal programs where the standard is high.
Regular16–20px paragraph
BoldEmphasis / labels
1.6Line height

Color Palette

Background
#121110
Surface
#1F1D1C
Primary Gradient
#EF4238 → #F26A2E
Accent Orange
#F26A2E
Text / White
#FFFFFF

Buttons

Get StartedLearn More →Explore Capabilities

Card Component

Defense

DoD military construction programs across USACE, NAVFAC, and AFCEC where the delivery standard does not move.

Learn More →
  • ContainerSurface #1F1D1C · 1px hairline border (5% white) · 8px radius
  • MediaFull-bleed image, fixed aspect, top of card
  • HeadingBarlow ExtraBold, uppercase, 20px
  • BodyLato Regular, 14.5px / 1.55 line height, dimmed white
  • ActionGhost button, 2px orange border, uppercase label + arrow
  • ReuseSame shell powers market cards, capability cards, and case-study tiles
A design-system reference assembled from the site, showing typography, colors, buttons, and a reusable card. I coded the homepage and Markets foundations, then directed AI-assisted implementation of subsequent pages from Figma designs.

06. Launch and reflection

Launch and reflection

I coordinated the domain redirects and DNS cutover to Netlify. During launch preparation, I used Lighthouse reports to identify issues and directed fixes with AI assistance.

The delivered result was one consolidated website positioning Spero as a professional services partner for team augmentation on government programs. Its market and capability structure replaced three overlapping presentations of the business and gave project leaders a clearer view of the technical talent Spero could provide. A homepage Lighthouse run captured on September 17, 2026 scored 100 in Performance, Accessibility, Best Practices, and SEO.

The strongest lesson was to establish content readiness and disclosure review earlier. For a similar project, I would set clearer checkpoints for final copy and imagery, and have the client confirm that project-specific claims and visuals were approved for public use before building them into pages.

The work also reinforced the value of making decisions visible. Concrete layouts, font comparisons, and implemented pages helped stakeholders give useful feedback. A reusable design and code foundation then made it possible to carry those decisions across the site as the business changed.

Published Spero Nuclear and Capabilities desktop pages.
Published Nuclear and Capabilities pages, presenting the government markets and technical disciplines Spero supports.
Spero homepage with Lighthouse scores of 100 in all four categories, alongside the Design and Development page on mobile.
Homepage Lighthouse run captured September 17, 2026: 100 in Performance, Accessibility, Best Practices, and SEO. Alongside it, the Design and Development page on mobile.

Have a product problem worth untangling?

I’m open to UX, product, product-owner, and technically complex contract or full-time opportunities.