UI design credit: Nayla Fayoumi
Logo design credit: Nayla Fayoumi
Project timeline scheme - Credit: Nayla Fayoumi
When Absence Becomes Presence in Teleworking
In 2020, the Coronavirus pandemic re-shaped human interactions across multiple cities, forcing us to depend on concurrent video streams to work. Our work experiences became less real and more complex. In partnership with IBM design team, I was part of an ambitious project with the purpose to design a way to mitigate some of the alienating effects of remote working online.
To comply with my non-disclosure agreement I have omitted confidential information related to IBM. All the information in this project is my own and does not necessarily reflect the views of IBM.
The challenge –
Design a project during lockdown
The project goal was to recall the feeling of being physically present while collectively working with partners. We aimed to create a robust app used by designers and students to connect in a virtual shared environment through 3D audio sound. This foundation aimed at implementing a rapidly evolving business and diverse user base.
Research question
How can we work collectively when physical experiences became purely digital?
My role
My role was to research, design and test all UIs related to this project. I collaborated with three other partners (content strategist, front-end developer, and a biology graduate) on the home screen and app features.
The app was not launched as it was a 3 months base project.
Project Timeline
April - June 2020
Key Goals
• Make it fast, easy to use by designers and students everywhere.
• Give users the ability to feel present and engaged while working online.
• Create a platform for innovation, bringing remote working closer to real life.
Kickoff -
1. Connecting the dots
At the start, we did not have a clear mission for the remote working experience. We collaborated to explore how teleworking impacts the psychological state and behavioural activity in humans. Thus, we decided to focus on creative work and the importance of body presence in teleworking.
A main question was:
How can we come up with another way for people to work collectively and communicate remotely?
2. Testing insights
Based on the research and practice review we had conducted, we created four experiments tested with 12 participants.
Goal:
To understand the challenges people face while creating online interpersonal communications, and the driven factors that would increase their attention span and engagement while doing so.
3. Design Experiments
The four experiments focus on: Sensory experiences, memory, creativity, and imagination.
After creating these experiments, we individually went and conducted all four of them on three different participants each. Primarily between the four of us, we did almost fifty tests, then integrated the participants’ answers on a Google document sheet. We re-grouped on the Miro program and analysed our findings.
Experiment 1: Sensory Experiences
Goal:
Gather insights about people’s feelings for online interpersonal communications.
Task:
A zoom call with another individual, during which the first five mins are with full audio and video, the next five minutes are based on audio-only with no visual, and the last five minutes, are visual with no audio.
Finding:
Doodling is a way to provide secondary and voluntary attention activating our brain to be more focused.
Experiment 2: Memory
Goal:
Test the auditory concentration while doodling.
Task:
Listening to a podcast on neuroscience. Halfway through the test, participants doodled if they desired, then we asked them four questions, two of which relate to their act of ‘hearing’ the podcast, and the other two linked to their act of doodling.
Finding:
Doodling relaxes the senses of humans while information enters the auditory system.
Experiment 3: Creativity
Goal:
Determine whether sound can induce divergent thinking among participants.
Task:
Solve a creative problem then find as many affordances of objects as possible while listening to different types of audio sounds.
Finding:
The type of sounds is the most important aspect for it to induce divergent and creative thinking.
Experiment 4: Imagination
Goal:
Understand if sound can be perceived visually.
Task:
Listen to three types of audio sounds and draw them, then about the motive behind their drawings.
Finding:
Sound broaden users’ imagination.
The discovery -
The ‘type’ of produced audio sound and the act of doodling facilitates users’ engagement while working remotely.
I was surprised by the facts we found.
1. Users retained induced information from audio sounds better when they doodled as data entered their auditory system.
2. They preferred audio sounds over visuals in teleworking.
3. We were astonished that although studies showed that 3D audio sounds boost people’s ability to be creative, this creativity relies on how they choose audio sounds’ setting contexts wisely.
Deeper insights -
4. Identifying key concepts
• The act of doodling is a way for people to relax.
Thus, I created an affinity diagram of the ‘draw sound’ experiment to unmask the hidden meanings of participants’ doodles. I used colour coding to circle common shapes and check what they uncover about users’ feelings.
Affinity diagram, a hunt for meanings based on participants’ drawings - Credit: Nayla Fayoumi
It was vital for me to lay everything out so that I could connect our concepts to form a prototype.
Brainstorming sketch for potential design outcomes - Credit: Nayla Fayoumi
5. Design directions
Virtual Doodling
Based on gathered insights from our experiments findings, we thought of having a playful tool, ‘virtual doodling’ implemented in remote working platforms, offering users the opportunity to feel their senses and physical presence.
Doodling illustration - Credit: Nayla Fayoumi
Knowing that through online remote working, we have lost the power of body presence and gestures, we illustrated three scenarios with similar functions to show potential applications of this tool:
1. The below scenario shows an academic seminar session where students are engaging with their tutor. Therefore, we envisioned this experience as being a potential add- on to a platform like Zoom, if not its platform.
Scenario 1’s storyboard for virtual doodling idea - Credit: Nayla Fayoumi
2. The below scenario showcases IBM designers co-working through their senses, where they can either share, save their mind maps or doodle with one another.
Scenario 2’s storyboard for virtual doodling idea - Credit: Nayla Fayoumi
3. The below scenario shows employees taking a zoom break by playing a virtual doodling game to engage in ‘fun’ moments. Knowing I am good at drawing, we decided that I should illustrate the storyboards.
Scenario 3’s storyboard for virtual doodling idea - Credit: Nayla Fayoumi
3D immersive sound experience
On a second note, we noticed that people face difficulties while having video calls where the sound is unnatural, leading to Zoom fatigue. Then, we looked into the benefits of 3D audio sound and discovered that it encourages creativity and imagination and thus helps our brain better process sounds to feel present.
Thus, first, we created a speed dating approach displaying a group of people using 3D audio sound in a conference call. Then, we imagined how it would look on the screen, bearing in mind that the system needs to be highly interactive for users to feel present.
Therefore, we thought of three features:
1. Where the user can move around the virtual space as he comes closer to groups and hears them more clearly.
2. He is able to zoom in or out people’s cameras while having a conversation with them.
3. He can add music or ambient sound to the room to engage with his surrounding environment.
System features - Credit: Masa Planinc
As a second step, we generated four storyboards:
1. The below scenario shows a group of friends connecting through 3D sound to feel each other’s presence.
Speed dating scenario 1 of friends using 3D sound in a conference call - Credit: Masa Planinc
2. The below scenario shows a lecture session where students connect with their tutor while having the option of being divided into groups.
Credit: Masa Planinc
3. The below scenario portrays employees working remotely and sharing their ideas with professionals.
Scenario 3’s storyboard - Credit: Masa Planinc
4. The below scenario showcases friends having a virtual party with a DJ.
Scenario 4’s storyboard for the 3D sound idea - Credit: Masa Planinc
The discovery of a problem with doodling
As we received feedback from IBM design team on our midpoint review meeting, the UX design department director, Scott Rushton highlighted that:
“Not all users know how to draw.”
– Scott Rushton
Feedback from people
Finally, we showcased our storyboards to a total of sixteen individuals. The responses were very positive across the board for both directions. However, they had a concern regarding the doodling concept. They were worried that they wouldn’t be able to have enough space to draw on the screen. As for the 3D sound idea, some among these individuals thought that they would not have time to activate a 3D ambient noise due to their tight schedule.
6. Visual design cues
Doodling for a divergent thinking
Based on the feedback we received, we looked at different design iterations, one of which was creating intuitive presets that facilitate drawing/doodling for users who lack the technical ability to do so.
Presence through 3D sound
As for 3D sound concept, we decided to have different rooms in our platform where users can move in and out and talk to each other.
We thought that having 2D visual cues is crucial because they show users’ activities and play on the absence/presence concept that we already tackle. For instance, using colour shapes and sizes to identify the proximity of people on the screen is one of great success.
3D sound idea design iteration - Credit: Nayla Fayoumi
The breakpoint –
7. Design alteration
As we explored both directions, we reached a point where we had to either choose the most powerful concept that responds to our project brief, or merge them both.
Since virtual doodling could have a limitation on the technical ability and preferences of users, we decided to move forward with the 3D sound direction as it is purely related to audio induced sounds in remote working platforms.
The realisation of the project - Early phase
8. Design demonstration
Moving forward, we noticed we had to think constructively about demonstrating the system we want to convey through starting with the design work of the project so people could see what we are doing.
Henceforth, we decided to do a digital app as a 3D audio and video conference call platform.
As an early step, we created wireframes on Figma software showcasing our potential product.
Prototype features
We have started by creating prototype features for our app.
Moving Rooms
In these rooms, users have an avatar icon enabling them to move in and out of places, aiming to play with the frequency of different sounds.
Personalized Rooms
Users can personalize their experience. They can either name their room, invite people over, or resize it accordingly.
3D Panning for Music
Users can add a 3D panned music linked to music apps so they can tune it from several parts of their surrounding space.
Moving Closer to the Designated Person
Users can individually see rooms and who’s present in them when entering their 3D space. Consequently, their input volume will change based on the level of closeness they have with one another.
If they desire to have a video call, we enabled them to select the people in their proximity and move closer to them to start the call.
The breakpoint –
9. New design decisions
Based on IBM’s design team feedback, we thought of re-vamping the whole platform we have in terms of features, mechanics and high-fidelity designs.
We realised that using many rooms in our platform would make users’ experience very complicated since moving around rooms will be hectic for our users. Therefore, we moved away from having multiple places in our app to instead one single shared space among users.
10. Reconfiguration of the app features
Furthermore, we realised that it was imperative to re-think of the missing components of our app features.
Sound panning aspect
we created a panning system dividing the screen to clearly show the panning aspect of headphones’ having a left and right side.
Users’ sound volume changing with proximity
We designed several circles around the user’s avatar icons to set their volume, increasing or decreasing as they move closer to one another to initiate conversations.
Panning toggle for music
We noticed that the music panning system is intersecting with the panning of the volume of avatars which might be puzzling for the users. Thus, we created a panning toggle for music synced to Spotify, YouTube or other music apps, where users can control whether they wants to pan it to the left or right.
Grouping of users
Users can drag themselves and join a conversation. The moment they enter a group; their sound gets quieter so that their discussions with one another are as smooth as possible. They can still hear each other, but less than usual so they can have a proper debate.
Plugins inducing collaborative work
We created a set of plugins where users can use multiple softwares and collectively work together, while still using our app.
Choosing a name for our product -
11. Introducing ‘Soundscape’
Finally, we had to come up with a name for our product. We collectively brainstormed and came up with ‘Soundscape’, meaning ‘components of a sound’.
App interface design prototypes - Credit: Nayla Fayoumi
Visual identity
Also, since our product has a futuristic mood, I thought that the logo should be very minimal in terms of shapes. I started experimenting with forms to be able to convey a set of ‘orbital’ system that links back to the levels of sounds until I generated a four-circle emblem with multiple hues of blue that is symbolic to the sound frequency we have in our product.
App logo design process - Credit: Nayla Fayoumi
A spatial metaphor: Interactive Demo
Knowing that all social interactions are usually political, we decided to think of the type of use cases or conversations happening in that virtual space.
One example could be focusing on the hierarchy of authority arising between users in an absolute scenario and the types of structures regarding this matter, among people.
Thus, we collectively discussed the types of scripts that we needed to include. Due to the limited time we had to work on this project, we decided to create a Demo of how our app would work in a real-life setting.
We used our voice over and recorded the voice of other volunteering individuals, implemented in the demo.
Soundscape app demo - Credit: Melanie Shortell.
The Impact -
12. Positive feedback
The overall feedback was breathtaking. The IBM design team loved our project to the extent that they called it ‘a ready to launch product’ where they would sign up to it if this gets released in the near future in the market. Additionally, the fact that we added plugins for various programs in our app targets a particular demographic such as younger designers and artists, adding a gravity to our product.