WIREFRAMES - IBM

May 18 – May 24

Brief: Design a way to counter some of the alienating effects of remote working online.
My group: Melanie, Nayla, Lea

After our tutorial, we discarded the idea of doodling and focused on the 3D sound app. With just four weeks remaining, we decided to start working on the wireframes for the app. First we created a log in, sign up and profile page since this is a quite straightforward design.

Log in in Figma.

Afterwards we started sketching and thinking about what the actual app would look like, where to place the menus, what the functionalities are and so on. We started by designing a basic room and a bottom menu that would include all the options one would need when using this communication app. We included the basic features of the audio and camera settings, participants, the chat function and availability. As a bonus, we also added the option of creating a private chat and music that can be added into a room.  The private chat function would allow you to have a chat with a person without disturbing the others and would mute people within its boundaries to others. The option of music would enable the user to add music from Spotify or YouTube and share it with people in the room. We created three different views, the first one displaying the space with various rooms, then a single room, and the last one allowing users to video chat with each other. Person could than move around the room and hear people according to the proximity between them. That would permit them to feel the presence of the others, visually and aurally. We also added an option to create and customize your own space, by adding rooms with different volume, colours and affordances.

Our system in Figma.

The feedback we received was somewhat critical, but very useful and helpful. John and Mor asked many questions about various functions and suggested some improvements regarding the interface. They also made us realize that our presentation was a bit chaotic and did not reflect the work we had done in full.