Skills Nation

The front door to career growth in DC

1 0 0 1 0 0 1 1 1 1 0 0 0 0 0 1
1 0 0 1 1 1 1 0 0 1 1 0 1 0 1 1
0 0 0 1 1 1 0 0 0 0 1 0 0 0 0 1
0 0 0 1 1 0 0 1 0 1 1 1 1 1 0 0
0 0 1 0 0 0 1 1 1 0 0 0 0 0 0 1
0 1 0 1 1 1 0 0 1 0 0 0 0 1 1 1
1 1 1 0 0 1 1 0 1 1 0 1 0 0 0 1
0 1 0 1 1 1 0 0 0 1 1 0 0 0 0 0
0 0 0 1 1 0 0 1 0 0 0 0 0 0 1 1
0 0 1 1 0 0 1 1 0 1 0 0 1 1 0 1
0 0 0 0 0 0 0 1 0 1 1 0 0 0 1 1
0 0 1 1 0 1 1 1 0 1 1 0 1 0 0 0

brief.json

Redesign of Skills Nation, the portal where DC residents find free training, certifications and paid work experience. At BuildWithin, I reorganized the sitemap around its eight programs and redesigned the brand imagery. I rebuilt it with Claude in two weeks so it works on any device.

Year: 2026
Client: Skills Nation
Industry: Workforce
Duration: 2 weeks
Type: Web redesign & build

Services

Creative AIWeb redesignUX/UIBrand imagerySEODevelopment

Visit live site

Shown for portfolio purposes only. Brands belong to their owners; if you own it and want it removed, email me. Terms ↗

Skills Nation, eight programs, a hard site to get around

// eight-programs-a-hard-site-to-get-around.md
const skillsNation = {
  industry: "Workforce",
  duration: "2 weeks",
};

01Challenge

Eight programs, a hard site to get around

Skills Nation brings together eight free programs for DC residents. They range from paid internships for recent graduates to AI courses and apprenticeships in District agencies. The old site didn’t hold up across devices. It was also hard to understand and navigate.

Skills Nation, a sitemap that starts with the person

0 1 1 0 0 0 0 0 1 1 1 1 0 1 0 0
1 0 0 1 0 0 0 0 1 1 0 0 1 0 1 1
1 0 0 1 1 0 1 1 1 0 1 1 0 1 1 0
0 0 1 0 1 0 0 1 0 1 0 1 1 0 0 1
0 0 1 1 0 1 1 1 1 0 0 0 0 0 0 1
0 1 0 0 1 0 0 1 0 0 0 1 1 1 0 1
0 1 1 1 0 0 0 0 0 1 0 1 1 0 1 0
1 0 1 1 0 0 0 1 1 0 1 1 0 0 0 0
0 0 0 1 1 1 1 0 0 0 0 1 0 0 0 1
0 1 1 1 1 1 0 0 1 1 0 0 1 0 0 0
1 1 1 1 1 1 1 0 0 1 1 0 0 1 0 1
1 1 0 0 1 0 1 0 0 1 1 1 1 0 0 0

02Strategy

A sitemap that starts with the person

I reorganized the sitemap so each program has its own page. Every page follows the same logic: key facts, who it’s for, eligibility and how to apply. On the home page, the path starts with what Skills Nation offers. Then it moves through the four steps of a career journey and lands on the eight programs. That way, everyone can find theirs.

// brand-imagery-and-a-site-that-adapts.md
const skillsNation = {
  type: "Web redesign & build",
  year: 2026,
};

03Build

Brand imagery and a site that adapts

I redesigned the interface and the brand imagery in Figma: black-and-white portraits over color shapes, one per program. Then I rebuilt the site with Claude to work on any screen. Every page has its own SEO, and the form has anti-spam. The YouTube videos load nothing from Google until someone presses play.

Skills Nation, easier to get around, more clicks

1 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0
0 0 1 1 0 1 0 1 1 0 1 1 0 1 1 1
0 0 0 1 1 1 1 0 1 0 1 1 0 1 0 1
1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0
1 0 1 1 0 1 0 0 0 0 1 1 1 1 0 0
1 0 0 0 0 0 1 0 0 1 0 0 1 1 0 0
0 0 1 0 0 1 1 0 1 1 0 1 1 1 0 1
1 1 1 0 1 1 0 1 0 1 0 0 0 1 0 0
1 1 0 0 1 1 0 0 1 0 0 0 0 0 1 1
0 1 0 1 1 1 0 1 1 0 0 1 1 0 1 1
0 1 0 1 1 0 1 0 0 1 0 1 0 0 0 0
0 0 0 1 1 1 1 1 0 1 0 1 0 1 0 0

04Result

Easier to get around, more clicks

The site now works across devices. It’s easier to understand and navigate, and you can see it in more clicks within the page. Its search performance improved too.

[ OR™ ‒ RELATED / skills-nation.related ]

The closest matches to this case come first. Use the arrows to browse the rest.