Improve Your Website Design Process With Skeletons

Erik Johnson
Jun 11, 2025

Maybe should've saved this post for Halloween...

At Purpose UX, we are more of an application design shop, but from time to time we do marketing sites. While some people think “it’s all just design,” I’ve found there to be significant differences in how to approach each type of project. Approaching a marketing site project like it’s an application design can get you blown up because of one major difference: The process for getting alignment from stakeholders.

For applications, you can usually put people in a room, do some collaborative design exercises and come out with a pretty good understanding of what the key features are, what the user journey should be, etc. And as the designs evolve, you can point back to those foundational points of agreement to manage conflicting feedback and keep things on track. In case of stakeholder impasse, user testing and customer insights can be brought in move decision-making forward.

With marketing sites, it’s much harder to avoid deadlock and keep that shared understanding in place (especially at larger organizations!) There are usually more stakeholders involved, they come from all across the company with significantly different needs and priorities, and it’s far more likely that the project gets sidetracked by stakeholder conflicts. There’s also a much higher risk of a new decision-maker stepping in later in the process and changing requirements or blowing up what you thought was an agreed-upon design. And because these sites often have more diverse audiences and more nebulous workflows, it’s often harder for research to break through and change the opinions of stakeholder who have strong feelings one way or the other.

So what's to be done?

Of course stick to best practices, build empathy for your users, run your collaborative workshops, and design your research backwards, but there’s a particular exercise I’ve found that really helps break through the noise and keep a website project grounded.


I call it The Skeleton Breakdown. (I first learned this technique from Denise Pasquinelli). It’s best to do this exercise after initial discovery to kickstart the design phase, then refer back to it as the design evolves.

Background Discovery Work to set the stage:
  • Hold discovery conversations + collaborative working sessions with stakeholders to establish high-level success criteria and goals for the site.
  • Review existing analytics and research to understand current pain points.
  • Choose some sample competitor websites to serve as inspiration (either based on stakeholder input, or source them yourself)
  • Invite the right people to the workshop — you want a broad cross-section of stakeholders, including people who can act as veto points over the finished design. For large sites, you may have to break things up into subsites and work with the appropriate team for each section — try to include a few people who “cut across” subsites to avoid silos.
Prep Work for the Skeleton Breakdown:
  1. Take a full screenshot of the existing site (for a redesign) and relevant competitor site “inspirations” (I use GoFullPage)
  2. Import the full page images into FigJam and break each one down into content block
  3. Label each content block with the intent behind that content, as well as relevant CTAs
  4. Drag out starter sets of “What’s working well” notes (green) and a “What can be improved” notes (red)
  5. (optional) Prep your favorite  Warm-up Activity to frame the session’s goals and get participants on the same page (~3–5 mins, tops)

FigJam board with columns. First column contains "What's working well" green notes and "What can be improved" pink notes. Second column contains the skeleton of content blocks - "hero image", "what we do", "our experience", etc. Third column is a screenshot of the actual PUX site. Fourth column is for "off-ramps" - contact us page, case study detail page, etc.
For a real exercise, you should size the image + content blocks larger so that participants can fit a lot of notes into the space.
Run the Breakdown Activity

The essential element is to have the “skeleton” side-by-side with the existing site so the content blocks line up. This lets you move between the high-level layout and the tactical design in a flexible and fluid way.

Stakeholders with different levels of comfort with web design projects can engage in the way that makes the most sense to them. I usually talk through the first few sections and model adding green and red notes, then give the group silent working time to add their own (~5 minutes can be enough time, but if they’re going strong, let them cook). Lead a discussion based on what people add, then repeat as needed. (TIP: have someone else available to transcribe the verbal discussions as visible notes so it’s all in one place).


Common moves I use:
  1. For existing sites, work down the existing site’s skeleton and ask “Are we telling the right story?” “Are these blocks in the correct priority order?” “Are we sending people to the right off-ramps?” You can re-order the content blocks as you go — just make sure to duplicate the skeleton so one copy stays side-by-side with the page image for clarity.
  2. Go block-by-block and ask whether the tactical design choices in the actual page are effectively communicating the goal of the content block.
  3. Compare across existing competitor sites (prepared this same way) and lead a discussion about which choices are inline with stakeholder’s vision for their site and which are opportunities to contrast or differentiate.
  4. Have a draft “skeleton-only” layout for new sites. After working through some competitor sites, work through the skeleton reordering blocks, adding new ones, etc. until people are satisfied with the draft layout.

In any case, the goal at the end of the session should be an agreed-upon draft skeleton to use as a base for your design work (or clearly-owned action items to get the team there if there needs to be more discussion / research / etc.)

Same screenshot before but now the "content block" column and "screenshot" column are annotated with green and pink notes pointing out issues
Sample “working state” of a skeleton exercise

Keep your skeleton relevant as you design

When you present your design work, present it alongside the agreed-upon skeleton. Make it explicit whether feedback is about the high-level content layout (skeleton) vs. the tactical execution (wireframe). Take visible notes in the appropriate places!

Start with low-fidelity wireframes and move up to medium- and high-fidelity mockups, but always present with the skeleton & CTAs highlighted. I often use the same FigJam board so it’s easy to scroll up and reference specific bits of feedback or direction.

This helps triage feedback between layout-level (“We’ve got our blocks in the wrong order”) and block-level (“We’re not achieving our goal with this block”). It also keeps the team grounded in what the initial vision for the site was and why particular decisions were made.

So next time you’re designing a site, whether it’s Oct 31st or not, bring your skeleton!

========

You can find our work at www.purposeux.com, or sign up for our newsletter to get UX insights in your inbox, once per month.

Also I’m on bluesky now: https://bsky.app/profile/ejexpress.bsky.social

Read More

a child out in the snow wearing a puffy coat
Erik Johnson
May 14, 2025
A simple story about talking to people
Research
James Gartrell
Apr 25, 2025
UXUI Design
Prototyping
Research
Erik Johnson
Apr 21, 2025
Recap from Raleigh-Durham Startup Week
Community
Erik Johnson
Mar 14, 2025
Do's and Don'ts for designing AI interfaces
UXUI Design
Erik Johnson
Jan 27, 2025
Why people love "bad" interfaces
UXUI Design
Erik Johnson
Dec 18, 2024
5 Accessibility Tips for Content Creators
UXUI Design
Erik Johnson
Nov 13, 2024
5 Principles for Improving your small business website
UXUI Design
Erik Johnson
Oct 7, 2024
Robots aren't going to take your job but the push to make all things AI might.
UXUI Design
Candida Hall
Aug 14, 2024
A discovery session can be the difference between success and failure. We're outlining exactly how to get the most from one of these engagements.
UXUI Design
Workshop
Candida Hall
Apr 22, 2024
We explore when and how to use the dashboard to help improve the overall experience.
Research
UXUI Design
Candida Hall
Feb 8, 2024
Being in the tech industry, it’s impossible to escape the conversation about AI. This article discusses 3 reasons why AI can't replace product designers.
UXUI Design
Erik Johnson
Nov 29, 2023
Increase participation and get better results with these 10 tips.
Workshop
UXUI Design
Candida Hall
Oct 20, 2023
Empathy is one of the buzziest buzz words in Design for good reason - it’s an essential skill for producing good usability. This article is about strengthening your empathy skills and incorporating them into design, management, and your everyday life with 5 easy tips.
Research
Workshop
Erik Johnson
Sep 7, 2023
Quick and collaborative, design teardowns are a great way to get out of creative ruts that we all experience. The technique is low fidelity, easy to do, and has a high reward - plus it’s fun!
Wireframing
Prototyping
Erik Johnson
Aug 31, 2023
Sometimes we start user research not knowing exactly what we want to learn by the end, which means it’s not always clear how to use what we learned, or worse, what we learn isn’t relevant to the product team. Applying the “Understanding by Design” framework allows your team to collaborate on what needs to be learned to move the product forward.
Research
Workshop