Prototyping Theory

Reflection on "What do Prototypes Prototype?" by Stephanie Houde and Charles Hill

Marcus Thomas

Dec 21, 2024

Choosing the right kind of more focused prototype to build is an art in itself, and communicating its limited purposes to its various audiences is a critical aspect of its use.

This quote does a great job in emphasizing the challenge of aligning a prototype's purpose with the audience’s expectations. Each audience—users, designers, and stakeholders—often views a prototype through different lenses. For example, while designers may focus on functionality, stakeholders may prioritize feasibility or market readiness. By clearly defining and communicating a prototype's scope, designers can avoid any misinterpretations or crossed wires via their audience and ensure it effectively serves its purpose. Prototyping, after all, is a communicative art as well as a technical one.

The ‘SoundBrowser’ prototype...allowed a user to browse digital audio data recorded on a special personal tape recorder equipped with buttons for marking points in the audio...It was far easier to do this in a visual design tool than by programming in C.

The Sound Browser was a really interesting example to me, as it combined three dimensions—role, look and feel, and implementation—therefore making it an “integration prototype” designed for user testing. This affords a more realistic experience when prototyping, and is especially useful for a more well-rounded and comprehensive kind of user feedback. I tend to gravitate towards using digital design tools first, and seeing this example do the same was interesting to see how the team could iterate on the “look and feel” independently before integrating them into the final prototype.

Define ‘prototype’ broadly. Efficient prototypes produce answers to their designers’ most important questions in the least amount of time.

Flexibility and efficiency are core to the practice of prototyping, and I like how the authors were also able to advocate for that in this quote. I've fallen into the rookie trap of seeing my prototypes as fully fleshed-out versions of a product, which has resulted in them becoming Frankenstein-ian before, but that shouldn't be the case at all. Houde and Hill see them as fast, iterative tools for gaining specific insights. As designers, we should be seeing prototypes as a means to quickly gaining those critical insights before rolling out a full-fledged product the first time. The takeaway here is that design is iterative and practical; prototypes serve to move the project forward, even if they are ultimately disposable. Keeping this at the front of mind is crucial.

‍

Prototyping Theory

Reflection on "What do Prototypes Prototype?" by Stephanie Houde and Charles Hill

Marcus Thomas

Dec 21, 2024

Choosing the right kind of more focused prototype to build is an art in itself, and communicating its limited purposes to its various audiences is a critical aspect of its use.

This quote does a great job in emphasizing the challenge of aligning a prototype's purpose with the audience’s expectations. Each audience—users, designers, and stakeholders—often views a prototype through different lenses. For example, while designers may focus on functionality, stakeholders may prioritize feasibility or market readiness. By clearly defining and communicating a prototype's scope, designers can avoid any misinterpretations or crossed wires via their audience and ensure it effectively serves its purpose. Prototyping, after all, is a communicative art as well as a technical one.

The ‘SoundBrowser’ prototype...allowed a user to browse digital audio data recorded on a special personal tape recorder equipped with buttons for marking points in the audio...It was far easier to do this in a visual design tool than by programming in C.

The Sound Browser was a really interesting example to me, as it combined three dimensions—role, look and feel, and implementation—therefore making it an “integration prototype” designed for user testing. This affords a more realistic experience when prototyping, and is especially useful for a more well-rounded and comprehensive kind of user feedback. I tend to gravitate towards using digital design tools first, and seeing this example do the same was interesting to see how the team could iterate on the “look and feel” independently before integrating them into the final prototype.

Define ‘prototype’ broadly. Efficient prototypes produce answers to their designers’ most important questions in the least amount of time.

Flexibility and efficiency are core to the practice of prototyping, and I like how the authors were also able to advocate for that in this quote. I've fallen into the rookie trap of seeing my prototypes as fully fleshed-out versions of a product, which has resulted in them becoming Frankenstein-ian before, but that shouldn't be the case at all. Houde and Hill see them as fast, iterative tools for gaining specific insights. As designers, we should be seeing prototypes as a means to quickly gaining those critical insights before rolling out a full-fledged product the first time. The takeaway here is that design is iterative and practical; prototypes serve to move the project forward, even if they are ultimately disposable. Keeping this at the front of mind is crucial.

‍

Code Breakdown

Figure 8 Track

// Parametric curve + tangent
x = a * sin(t),  y = (b/2) * sin(2t)

function infinityPoint(tau, a, b) {
  const x = a * sin(tau);
  const y = (b * 0.5) * sin(2 * tau);
  const dx = a * cos(tau);
  const dy = b * cos(2 * tau);
  const ang = atan2(dy, dx); // tangent angle
  return { x, y, ang };
}

We draw the track as a polyline (sampled points) and orient all glyphs by rotating to the tangent (rotate(p.ang)).

4-Behaviors

behaviors = [
  { name:'SEASONS', slots:32, period: base * PI * FEEDING_CYCLE, hue:30,  glyph:'chev' },
  { name:'STROKES', slots: 8, period: base * 1.414 * FIN_STROKES, hue:280, glyph:'bar'  },
  { name:'BREATH',  slots:12, period: base * 1.618 * SLOW_BREATH,  hue:205, glyph:'mark' },
  { name:'BLINK',   slots:12, period: base * 2.718,                hue:150, glyph:'eye'  }
];

Seasons = Turtle feeding cycles
Fin Strokes = Distance Measuring
Breath = Religious Timing/Calendar
Blink = Day/Night Cycle

Visual Language

const seasonHue = seasonalHue(seasonCyc); // amber → green → violet → cyan
stroke(seasonHue, …); drawInfinityPolyline(...);

Track Color
Season color slowly shifts via four stops using seasonalHue() and wrap-aware lerpHue():

const seasonHue = seasonalHue(seasonCyc); // amber → green → violet → cyan
stroke(seasonHue, …); drawInfinityPolyline(...);

Track Color
Season color slowly shifts via four stops using seasonalHue() and wrap-aware lerpHue():

Prototyping Theory

Reflection on "What do Prototypes Prototype?" by Stephanie Houde and Charles Hill

Marcus Thomas

Dec 21, 2024

Choosing the right kind of more focused prototype to build is an art in itself, and communicating its limited purposes to its various audiences is a critical aspect of its use.

This quote does a great job in emphasizing the challenge of aligning a prototype's purpose with the audience’s expectations. Each audience—users, designers, and stakeholders—often views a prototype through different lenses. For example, while designers may focus on functionality, stakeholders may prioritize feasibility or market readiness. By clearly defining and communicating a prototype's scope, designers can avoid any misinterpretations or crossed wires via their audience and ensure it effectively serves its purpose. Prototyping, after all, is a communicative art as well as a technical one.

The ‘SoundBrowser’ prototype...allowed a user to browse digital audio data recorded on a special personal tape recorder equipped with buttons for marking points in the audio...It was far easier to do this in a visual design tool than by programming in C.

The Sound Browser was a really interesting example to me, as it combined three dimensions—role, look and feel, and implementation—therefore making it an “integration prototype” designed for user testing. This affords a more realistic experience when prototyping, and is especially useful for a more well-rounded and comprehensive kind of user feedback. I tend to gravitate towards using digital design tools first, and seeing this example do the same was interesting to see how the team could iterate on the “look and feel” independently before integrating them into the final prototype.

Define ‘prototype’ broadly. Efficient prototypes produce answers to their designers’ most important questions in the least amount of time.

Flexibility and efficiency are core to the practice of prototyping, and I like how the authors were also able to advocate for that in this quote. I've fallen into the rookie trap of seeing my prototypes as fully fleshed-out versions of a product, which has resulted in them becoming Frankenstein-ian before, but that shouldn't be the case at all. Houde and Hill see them as fast, iterative tools for gaining specific insights. As designers, we should be seeing prototypes as a means to quickly gaining those critical insights before rolling out a full-fledged product the first time. The takeaway here is that design is iterative and practical; prototypes serve to move the project forward, even if they are ultimately disposable. Keeping this at the front of mind is crucial.

‍

Early Draft

After sharing the first version of my Outlook redesign, I got some great feedback that’s helping me rethink a few key areas. One of the biggest notes was to cut back on overlapping panels—they were crowding the interface and taking away from the clean, focused experience I was aiming for. People also pointed out some redundant information popping up in multiple places, which added to the clutter instead of reducing it. The most exciting piece of feedback, though, was the push to reimagine how relationships between groups are displayed. There’s a real opportunity to move past the usual lists and folders and come up with something more visual and meaningful. It was all great fuel for the next round of design updates.

Final Version

Future Considerations//
Reflections
‍

In the final round of feedback, a lot of the earlier critiques were addressed—I successfully reduced overlapping panels and cut out redundant information wherever it crept in. The new approach to showing groups was also really well received, and I think dropping the old-school ‘VIP’ concept helped make the whole system feel more inclusive and context-aware. One piece of feedback that really stuck with me, though, was a suggestion to reimagine the Focus Mode as something closer to a social media-style feed. The idea is to surface important emails from key groups or favorited contacts in a way that feels more natural and scrollable—something familiar, but tailored for productivity. It’s a direction I hadn’t fully considered before, but it opens up a lot of exciting possibilities for how users might intuitively engage with what matters most.

All things considered, this was a much more enjoyable process than I initially thought it would be. Don't get me wrong, the project interested me from the start, but it wasn't until the push to go further and unshackle myself a bit from UX conventions that I felt like this was something special. This project was a great reminder that even though us designers aren't often seen as people that consider self-expression first when creating, it's great exercise to give ourselves the opportunity to become the client. By just focusing on working out our creativity outside of what's trending, on 'this thing is so ubiquitus it's almost weird that we haven't revisited this', we're opening ourselves up to new ways of lateral thinking.

Prototyping Theory

Reflection on "What do Prototypes Prototype?" by Stephanie Houde and Charles Hill

Marcus Thomas

Dec 21, 2024

Choosing the right kind of more focused prototype to build is an art in itself, and communicating its limited purposes to its various audiences is a critical aspect of its use.

This quote does a great job in emphasizing the challenge of aligning a prototype's purpose with the audience’s expectations. Each audience—users, designers, and stakeholders—often views a prototype through different lenses. For example, while designers may focus on functionality, stakeholders may prioritize feasibility or market readiness. By clearly defining and communicating a prototype's scope, designers can avoid any misinterpretations or crossed wires via their audience and ensure it effectively serves its purpose. Prototyping, after all, is a communicative art as well as a technical one.

The ‘SoundBrowser’ prototype...allowed a user to browse digital audio data recorded on a special personal tape recorder equipped with buttons for marking points in the audio...It was far easier to do this in a visual design tool than by programming in C.

The Sound Browser was a really interesting example to me, as it combined three dimensions—role, look and feel, and implementation—therefore making it an “integration prototype” designed for user testing. This affords a more realistic experience when prototyping, and is especially useful for a more well-rounded and comprehensive kind of user feedback. I tend to gravitate towards using digital design tools first, and seeing this example do the same was interesting to see how the team could iterate on the “look and feel” independently before integrating them into the final prototype.

Define ‘prototype’ broadly. Efficient prototypes produce answers to their designers’ most important questions in the least amount of time.

Flexibility and efficiency are core to the practice of prototyping, and I like how the authors were also able to advocate for that in this quote. I've fallen into the rookie trap of seeing my prototypes as fully fleshed-out versions of a product, which has resulted in them becoming Frankenstein-ian before, but that shouldn't be the case at all. Houde and Hill see them as fast, iterative tools for gaining specific insights. As designers, we should be seeing prototypes as a means to quickly gaining those critical insights before rolling out a full-fledged product the first time. The takeaway here is that design is iterative and practical; prototypes serve to move the project forward, even if they are ultimately disposable. Keeping this at the front of mind is crucial.

‍

Designing experiences that
touch, move, and inspire

HomeHome
AboutAbout
WorksAbout
ServicesServices
BlogBlog
ContactContact