A Songwriter’s Guide to UX / UI

Part 5: User Flows and Wireframes

Our moodboards were inspired. Our mixtapes were rockin’. We have effectively communicated our creative vision. HUZZAH! Now, let’s start putting the foundational pieces of our design together.

Our user flows and wireframes will help us organize and visualize the key features of our web or mobile project. These are low to mid fidelity deliverables (often greyscale, no photos, lorem ipsum, basic shapes) that will help us evaluate and work through our solution in its simplest form.

(Example of a user flow / wireframe)

This process came very natural to me as a songwriter. Regardless of how ornate or intricate the final arrangement, my compositions always started with some chords on the piano or guitar and a vague semblance of a melody. I’d often record myself using the handy dandy voice memos app on my phone playing through verse, chorus and bridge ideas while singing nonsense words. These primitive recordings were (and still are!) an excellent way to quickly share my ideas with the band and prime the collaborative process for upcoming rehearsals.

Just as our songs would inevitably evolve and transform, often sounding unrecognizable from the original inspiration, our designs may diverge from the early user flows and wireframes we create. The key is being able to fully articulate your decision making process to teammates and stakeholders along the way. Annotate the initial wireframes with the how / what / why of any alterations you make. Total transparency and clear communication will ensure that your solutions are founded and grounded in sound ux thinking.

Next week we will conduct some user tests, bravely throwing that brand new tune into the set…