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.

Different identities at every touchpoint

The same business could look different on a card, a website, or an email.

Orange Spero Solutions, blue Spero Engineering, and purple Spero Technology logos.
Three identities carried across business cards, website domains, and email addresses.
Archived Solutions and Technology homepages with similar structure under different branding.
Recovered through the Wayback Machine. 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.

Two clear paths into the business

The hierarchy separated the context of a program from the work Spero’s professionals could support.

Markets

Where Spero works

The government markets and programs its professionals support.

Capabilities

What its professionals support

Design and Development, Construction Management, and Project Controls.

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.

Making the direction tangible

The agency reference and two homepage explorations show how the dark palette, imagery, and card treatments were explored before refinement in Figma.

Agency reference
Agency reference showing a dark hero, photographic panels, and orange market cards.
The dark theme provided a starting point for the conversation.
Homepage exploration 01
First Stitch homepage exploration with prominent hero imagery and a grid of market cards.
A large image-led hero and a compact grid of cards.
Homepage exploration 02
Second Stitch homepage exploration, showing a large hero and photographic cards.
Another treatment of imagery, contrast, and content hierarchy.

Details from the individual concept exports. These examples are explorations, not the final implemented pages.

View the complete agency and homepage concepts

Agency reference

Complete original agency homepage concept.

Homepage exploration 01

Complete first Stitch homepage exploration.

Homepage exploration 02

Complete second Stitch homepage exploration.
View additional Stitch explorations
Stitch board comparing five market-page explorations and a capabilities-page exploration.
Markets and capabilities: alternative hierarchy, imagery, and header treatments.
Stitch board comparing project-page layouts and a careers-page exploration.
Projects and careers: explorations of content cards and photographic layouts.

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.

Selected: Barlow and Lato
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.

View the four alternative font pairings
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.

One treatment that could work across the image set

Each example below isolates a header so the height, readability, and use of color are easier to compare.

01. Abstract pattern
Tall Our Markets header with an abstract orange light pattern.

Explore height and atmosphere

The abstract direction included tall and compact versions.

02. Orange overlay
Contact Spero photography covered by an orange overlay.

Test the brand color

Full overlays and gradients sometimes clashed with the photography.

Selected by the client
Our Capabilities photographic header using a subtle dark gradient behind the text.

Preserve natural colors

A subtle dark gradient supported readable text across the image set.

Crops from the original header explorations. Different pages and photographs illustrate each treatment.

View all header variations
Tall and compact abstract header variations.
Abstract pattern: comparing tall and compact headers.
Full orange overlay and orange gradient header variations.
Photography: comparing a full orange overlay with an orange gradient.
Capabilities and Portfolio headers with subtle dark gradients.
Selected direction: photography with a subtle dark gradient.

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.

  1. 01

    Build the foundation

    Code the homepage and Markets page, establishing shared layouts and styles.

  2. 02

    Design subsequent pages

    Develop page designs in Figma using the established direction.

  3. 03

    Direct implementation

    Use the existing components to guide AI-assisted development.

  4. 04

    Review and refine

    Check the implemented pages and direct corrections to spacing and typography.

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.
Launch verification

A responsive site, with a captured quality check

The homepage Lighthouse run captured September 17, 2026 scored 100 in all four categories.

Performance
100
Accessibility
100
Best Practices
100
SEO
100
View the captured Lighthouse reportSeptember 17, 2026 Spero homepage Lighthouse report showing 100 in Performance, Accessibility, Best Practices, and SEO.

One captured homepage run. The scores describe that page and test, rather than every page or visitor’s experience.

Published Design and Development page on mobile, with readable headings and photographic hero.
The published 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.