American Religious Sounds

§ 01Context

American Religious Sounds is a graph-theory-driven data visualization platform that catalogs, connects, and explores America's religious soundscape. It serves academic researchers and the general public, and integrates audio, image, and text into a single interactive archive.

§ 02The problem

Designing an interface that handles enormous information density without losing non-technical users. The platform spans multiple datasets, nine distinct view types, and views with up to twenty-eight individual filters. The faculty leads required graph-theory visualization for the main "Connections" view, which demanded maximum screen real estate for node interaction while still leaving room for intuitive filter controls.

§ 03Approach

1. 01

   Started with low-fidelity iPad Pro mockups exploring layouts that maximized space for the graph view. Initial concepts used off-canvas UI panels.

2. 02

   Designed a thin, collapsible icon strip, toggleable, collapsible, and draggable, so users could reposition controls anywhere on screen.

3. 03

   Built an animated first-load sequence: labels appear, fade out after a beat, return on hover. Onboarding without permanent screen cost.

4. 04

   Iterated to high fidelity in Sketch and Photoshop. Built a working Axure RP prototype to demonstrate the interaction model.

5. 05

   Designed an interactive audio player concept with real-time sound visualization in After Effects.

§ 04Selected artifacts

Artifacts shown below are placeholders. Cleared, sterilized screens will be supplied for each.

WIREFRAME

HI-FI

PROTOTYPE

PATTERN

Client applauded the unveiling in conference review. The collapsible draggable filter strip and animated onboarding sequence carried through to the production interface. The audio player visualization concept was scaled back to a cleaner aesthetic at the client's request to keep focus on the audio itself.

§ 06Reflection

Constraint-driven design, maximizing the graph and keeping robust filtering at the same time, is where the interesting work happens. Solving for screen real estate via interaction beats capitulating to it.