SoundScape

An audiophile’s information repository prototype.

Figma prototyping

Webflow

Paper Prototyping

CMS Cataloging

Visual Design

Online audio equipment advice is abundant but most is complex to both learn and source .

I created SoundScape to serve as a beginner-friendly guide and proof of concept to help users navigate the complex world of sound. with educational content aggregated in the form of blog posts organized by a CMS.

Background

So, your earphones just frayed their very last copper wire. The two options you have are to go without music forever, or maybe find a replacement so you can continue to find joy in your life.

When browsing the internet for help it’s apparent that the old adage is true— everyone’s got an opinion, except in this case, some are factual and others may be bought and paid for.

The concept behind SoundScape was to create an accessible and beginner friendly starting place to learn about the mysterious world of sound.

Progression of the Prototype

The feedback from casual user-tests pointed to a key insights. Despite trying to collect all educational materials in one place, there is no way I could compile all of it in one place without it seeming overwhelming. In fact, many of the users suggested that a wiki-style information repository may actually benefit high-level users more than the beginner— as I had intended.

Despite trying to collect all educational materials in one place, there is no way I could compile all of it in one place without it seeming overwhelming. In fact, many of the users suggested that a wiki-style information repository may actually benefit high-level users more than the beginner, as I had intended.

In order to better visualize what this service could look like I began by prototyping the website architecture and layout. I first completed a basic wireframe in Figma before moving to Webflow to build out a more interactive prototype to get feedback on.

In order to better visualize what this service could look like, I began by prototyping the website architecture and layout. I first completed a basic wireframe in Figma before moving to Webflow to build out a more interactive prototype.

Paper prototyping an interactive mixed reality feature deepened understanding of content

Paper prototyping an interactive mixed reality feature deepened the user's understanding of key sound-design concepts

iterating on the feedback it was apparent that a more interactive design was able to capture the attention of users. A paper prototype was developed to simulate an augmented reality experience which served to help users set up their listening experience.

Specifically, even low knowledge individuals displayed their ability to understand certain concepts after interacting with the paper prototype.

Iterating on the feedback it was apparent that a more interactive design was able to capture the attention of users. A paper prototype was developed to simulate an augmented reality experience which served to help users set up their listening experience.

Specifically, even low knowledge individuals displayed their ability to understand certain concepts after interacting with the paper prototype.