S.J.Zhang
 
 

Personal PROJECT

Islands of Sound App

This is an extension project from a physical installation Island of Sound. Since we also want to give all the users ability to take the sounds with them, so we designed this app for mixing ambient sounds.

 

Role

Interaction Design

Visual Design

TOOL

p5.js

Sketch

React.js

TIME

2018.11 - Now

Ongoing


 
 
App Presentation.png
 
 

Designing the App 

During our concept development of the original project Islands of Sound, we wanted to find a way to let the experience live beyond the in-person interactions. As we crafting objects and materials with beautiful shapes and textures, we wonder if we can translate that into a digital space accessible to everyone. Cross-working between physical and digital interfaces has been more than fun.

The app serves one purpose, mix relaxing ambient music. As a one-page-web-app for the most part, we really took our time wire-framing all the interactions and flows, addressing all the needs while keeping it minimal. We are considering a function to let users uploading their own sound tracks and take advantage of the beautiful interface to create a truly unique mixer of their own.

 
 
 
 
 
 

Having decided on basic interface layouts, we went ahead making a few Hi-Fidelity mock-up and mapped out user flows.

 

Mobile Interface

The design started with three main interactions.

  • Play/Pause the sound

  • Adjust the mixing of tracks

  • Switch between compositions

The tree interactions are allocated to the bottom, lower center and the top for the quickest accessibility. With the Play/Pause button, when you pause the sound, the graphic would fade out toward the center. In the mixer area, you can swipe left to access more built-in tracks hidden on the right side. On the top, you can slide between compositions, rename/duplicate/delete them and slide to the far right to create a new composition.

Apart from the three main interactions, two additional buttons were added to the sides of the Play/Pause button. The list button on the left allows you to View All Compositions in a list view and the plus button on the right allow you to Add a New Composition.

 
 
 
 

UI Components

As we break down UI components from a single page design, we went on and established the interaction map. We designed a list page to see and manage all the composition, as well two ways to add a new composition.

 
 
 
Screen Shot 2018-11-11 at 2.20.32 PM.png
 
Screen Shot 2018-11-11 at 2.25.35 PM.png
 
 

Web interface

For the web version, the interface can serve as a screen saver. So the App would hide most interface elements except for pause button and the composition’s name while the browser activity is idle. Once the mouse moved or keyboard pressed, interface elements would fade in and enable user to control.

We also added another layer of volume control for the web version. It can be used to adjust volume of the mixed track independent from the OS’s sound setting.

 
 
 
 
Screen Shot 2018-11-11 at 2.25.35 PM.png
 
 

In term of actualizing the app, the initial idea was to code it with p5.js, which is where we will be programming the in-screen-graphic’s reaction to sound. However, we are considering teaching ourselves react.js which is more interface friendly and with React Native we may turn it into a native mobile application later. 

*Coding in progress

 
 
 

Check out the art installation that inspired this project: