Blink WebApp Design Exercise
Design exercise applying Double Diamond and Human-Centered Design to a video conferencing concept, with comparison matrix and feature exploration.
Challenge
How would you design a video conferencing experience concept?
Scenario overview
For many of us, working from home during COVID-19 has meant we are spending a lot of time on video meeting applications like Zoom or Google Meet. The effects of this have taken us by surprise:
- We miss out on a lot of non-verbal communication. On a video chat, we need to work harder to process nonverbal cues. Paying more attention to these consumes a lot of energy.
- We feel anxious about our remote workspace. That might make us look bad to our colleagues.
- Looking at our own face is stressful. The heightened emphasis on facial cues and the ability to see oneself can also act as a stressor.
- Awkward silence. Silence in real-life conversation is important and creates a natural rhythm. But in a video call, silence makes you anxious about the technology. Even a 1.2 second delay in responding online made people perceive the person talking as less friendly or focused.
In addition, frustration with people turning their microphones on and off, lagging connections, and background noise mean the meeting rarely flows as smoothly.
But millions of us would be rather lost by now without our video conferencing tools, which allow us to stay close to each other, while also peering into the fascinating lives of our colleagues.
Once a clunky technology without enough payoff, video conferencing so quickly became an essential part of the way we live and work that it’s unlikely to go anywhere anytime soon.
Design Process: Double Diamond
Adapting the Double Diamond and Human-Centered Design approach, where one of the most important aspects is always involved people in the Design Process.
Phases
- Problem Space [Discovery and Define] > Research Phase
- Solution Space [Develop and Delivery] > Design Phase
Principles
- Put people at the center using the Human-Centered Design approach
- Collaborative and Iterative
- Holistic, User-friendly, Accessible, and Inclusive as possible.
Research [Problem space]
Desk Research
Collecting data from the internet to get knowledge around the scenario, and how people are feeling about it.
The Zoom Fatigue
Reference Material
BBC - The reason Zoom calls drain your energy
Stanford researchers identify four causes for ‘Zoom fatigue’ and their simple fixes
Common problems
- More focus
- We miss out on a lot of non-verbal communication
- It's needed more focus in order to absorb the information shared.
- Is very easy to lose attention, checking messages in slack or e-mail for example.
- Psychological effects
- Looking at our own faces is stressful
- We feel anxious about our remote workspace
- External interruptions like family, pets, and background noise.
- Awkward silence makes you anxious about the technology
- Structural Problems
- Computer problems
- Bad internet connection
- Power outage
What experts are saying about people
- "We are experiencing the same disruption of the familiar context during the pandemic.”
- "Imagine if you go to a bar, and in the same bar you talk with your professors, meet your parents or date someone, isn’t it weird? That’s what we’re doing now – Gianpiero Petriglieri"
- "We are confined in our own space, in the context of a very anxiety-provoking crisis, and our only space for interaction is a computer window.”
- “In general, for most setups, if it’s a one-on-one conversation when you’re with coworkers or even strangers on video, you’re seeing their face at a size which simulates a personal space that you normally experience when you’re with somebody intimately,” say Bailenson.
- Avoid multitasking.
- Limiting video calls to those that are necessary
- Turning on the camera should be optional
- Having your screen off to the side.
- During long stretches of meetings, give yourself an “audio only” break.
- Users should use the “hide self-view” button
- it’s worth considering if video chats are really the most efficient option.
- Shared files with clear notes can be a better option that avoids information overload
- Build-in breaks
- Reduce onscreen stimuli
Competitive Analysis
Analyze and Map out two of the most common Video Conference softwares today - Zoom and Google Meet - to understand how they are presenting their solutions.
Comparison matrix: Zoom X Google Meet
Main findings
- People are using video conference solutions to get close to people, and not only used to work purposes.
- People are tired of too many video calls.
- All the different social interactions are happening at the same place - A computer window.
- The biggest focus on the face of participants causes stress and anxiety.
- The proximity caused by the size of the faces on the screen is uncomfortable.
- Having control of the camera, audio, and layout of other participants it's very important.
Opportunity Statement
- How to transform the way people interact with each other using video conferences?
Design [Solution space]
Management
Based on all the learnings from the Research, it's time to take some action and start breaking them down into small (possible) solutions, transforming the abstract findings into something more tangible, allowing a share of understanding.
Hypotheses
- Focus less on the communication based on the people's faces and audio, and provide better ways for people to communicate, to explore other types of interactions like the chat.
- Give more options for people to control and personalize the call, at your own pace and needs.
User Profiles
It was mapped two user profiles for the scenarios of this problem, the Host and the Participants:
Host
The host is the user that creates a meeting and invites participants to join.
Participant
The participant is the user that accepts an invitation to participate at a meeting that a Host creates.
Pain Points and Users Stories
Besides the basic needs for Video Conference software, was explored the needs based on the pain points from findings collected with the research, and translated into User Stories.
- Pain Point: Control my Camera behavior in a meeting.As a Participant in a meeting,I want to have control of when I will see, or not, myself at the camera.So that I can understand that my camera is on without the need to see myself all the time.
- Pain Point: Control my Audio behavior in a meeting.As a Participant in a meeting,I want to have control when the others could hear me.So that I can interact in a fast way with others.
- Pain Point: Stay away from the embarrassment caused by cameras off, silence, or any other technical issues that could happen in a meeting.As a Host of a meeting,I want to understand that the other participants are following me (or my screen), and are hearing when I'm talking,So that I can feel that I'm not talking by myself.
Ideation
To start the Design phase was done sketches to explore the ideas and hypotheses, and to help me visualize what possible could work, and what could not, to have a better idea in what makes sense invest more time and effort, what it's seen to be not worthy and what has potential.
- It was decided to explore other types of interactions and communication besides Audio and Video, like messages and emojis/reactions.
- The Chat could be an interesting way to help the participants express ideas to others.
- Provide keyboard shortcuts to help the user modify and customize the call in a fast way.
- Another idea was to explore the layout of the room in a way the user could change the screen sizes just by pushing around the areas, to get a smaller video screen or even a bigger one.
User Flows and Wireflows
User Flows was a step ahead of the User Stories, to materialize the needs into possible solutions for the Video app. Was mapped out 4 main scenarios, where 2 are for Hosts and the others 2 are for Participants.
With these scenarios was possible to break down the interactions into actionable steps, and visualize what could be the main task for the user to do in each step.
- Creating a meeting roomHostCreate a new meeting
Set up the room layout, choosing the one that suits better the meeting purpose.[Workshop/ 1:1/Just audio/Party]
Invite participants
Star the meeting - Start a meetingHostStart a meeting from schedule or just create a new one
Enter at the room
Visualize the room layout and change what needed
Change your setup
Onboarding participants - Join a meetingParticipantAccess a link for a meeting
Configure your setup before join the room
Change the room layout the way you want after joining
Leave the call - Interact in a meetingParticipantTurn off your camera and audio [Inside a meeting room]
Type a message to express your thoughts
Use emojis to react to a very interesting comment from the speaker
UI components structure
It was created a basic component structure and a style guide to help the prototype creation to gain in speed and consistency.
Final Proposal
A video chat application that is customizable and allows the user to interact in different ways besides the camera and audio, utilizing reactions and emojis, text messages.
Prototype
Was created the prototype just for the Participant user profile [because of the restricted time], which was thought about the visuals and the interactions for a possible solution of how to transform the way people interact with each other using video conference.
Click here to access the interactive prototype
Scenarios of the Prototype [Created in Figma]
- Join a meeting
- Customize the Room
- Using shortcuts to turn on/off camera/ mic, and interact using reactions
- Using the Chat
- Leave a call
Possible next steps
Test the proposal by running a usability test with real people, with the attempt to validate [or invalidate] the initial hypothesis, and understand how could be improved.