Sense to Sense Publication Website
Sense to Sense was a writing class about the five senses, taught at Ultralight School by Laurel Schwulst and Meg Miller.
This website complements the printed book, layering sound, image, and text. In the editors' words, the layering "added tactility to our digital class ('touch from a distance')." I worked on the interaction and sound design.
Check out the live website at: https://s2s.ultralight.school/#
Role
Interaction Design
Sound Design
Timeline
Summer 2026
Tools
Figma
RX IZotope
Logic Pro
Team
2 Designers
3 Developers
1 Art Director
Challenge
Translating art direction to a scalable system of interactions
Our publication had 15 pieces, each with its own audio and print layout, and we had 4 weeks to ship. I owned layout design and prototypes for interaction with 3 main goals.
1
Keep the art direction's tactile, playful feel
We wanted written pieces layering dynamically, inspired by texture & wonkiness of real paper.
2
Easy for readers to navigate
Usability and reading experience was priority for visitors to read pieces as a stand alone website.
3
Buildable for developers in a tight deadline
Hand-coding with only 4 weeks to ship. Communicate with developers to keep scope technically feasible.
Interaction Design
How might we let readers layer pieces into a soundscape, without losing track of which sound belongs to which piece?
Each piece came with its own audio, and we wanted readers to build their own soundscape by layering pieces together. Clicking a vessel (an illustrated icon for each piece) opened its text and added its sound to the mix. The challenge was making this feel intuitive.
Iteration 1 — Pieces slide in from right
Following the wireframe handoff from the art director, I prototyped an interaction where clicking a vessel slid its piece in from the right and added its audio to the mix.
Where it broke
As more pieces were open, the stacked pages covered the vessels, which were the controls users needed to keep exploring. This interaction worked well with 5 or fewer pieces, but not for all 15 pieces.
Iteration 2 — Pieces slide in from bottom
What if pieces slid in from the bottom instead? That would keep the vessels uncovered.
Where it broke
Our developers flagged that scroll behavior would be unpredictable with scrollable pages stacked on top of each other. The reading space was also compromised.
Final Iteration — Split screen, separating listening from reading
Iterations 1 and 2 both failed because each piece opened its text and its audio together.
Key Insight
We realized that listening and reading don't work the same way.
You can hear several sounds at once, but you can only read one.
Solution
We split them into two sides. Linked hover states connect the two sides, so readers always know which sound belongs to which piece
Left — vessel illustrations act as audio mixer
Right — select title to read one piece at a time
Design System
One template instead of 15 custom layouts
Adapting for mobile
Removed layering for audio
Layering depended on the split screen and on hover states, and phones have neither. Instead of squeezing the desktop layout onto a small screen, we simplified it into a single list with each vessel next to its title, and one piece's audio playing at a time.
Sound
Layering 15 DIY field recordings with varying quality
Each author recorded an ambient field recording of the place where they'd want their piece read, all on iPhone Voice Memos. Each one had its own background noise, clippings, and volume, and stacking them without any processing sounded harsh to the ears.
Testing how different combinations layer in Logic Pro
Readers could mix any combination of the 15 sounds, including all of them at once with "play all." Balancing EQ and loudness across every track was important in making sure that no single sound jumps out.
Denoising each field recording using RX IZotope
I removed the hiss and hum from each recording so that, when layered together, they wouldn't build into static.
Takeaways
Managing scope with a tight deadline
This project taught me a lot about managing scope when working with and communicating effectively with a diverse team. Working with a tight publication deadline, I learned to iterate fast alongside developers, as well as being mindful of what features are technically feasible.
Scaling takes planning
Our initial art direction worked effectively with fewer moving parts. Scaling it to 15 pieces required more iterations and testing for edge cases before making sure it was ready for development.