Background
WhatsApp has been providing communication convenience to the world, we rely on its mobility and efficiency for communication. I was thinking about what features could be added to WhatsApp, while not losing its original advantage, mobility and efficiency.
I found screen sharing is a basic function in most of the online meeting platforms, such as Zoom, Google Meet, and Microsoft Teams, but has not been broadly used on VoIP.
The research result proved the hypothesis of screen share will bring convenience to people who use smartphones for communication. We are not turning WhatsApp into another online meeting program, but adding a talk and show at the same time freedom to the customers.
Problems
My daughter cannot see my screen, so she could not tell me where to click to set up my smartphone.
I teach in a rural area, not everyone has a laptop. I teach throughsmartphone a lot, I have to use the back-side camera to shoot video from my computer to show my students during the instruction.
I play the same online game with my friends. They always call me when they explore something cool, but it is really hard to understand where and what they are talking about without seeing it.
Solutions
-
Add screen share and send snap features based on the current interface.
-
Launch new features with instructions.
Project Overview
.png)
01
Research
1.1 Interview
1.2 Empathy Map
During the research phase, we found that 100% of participants use VoIP daily. The unstable internet and call quality annoy most of them and screen share features would bring great convenience to the users. I also discovered how they solve the screen share need without a built-in function. Working but so inconvenient.
Goal
-
Learn VoIP using habit.
-
Explore whether any other features are desirable.
-
Learn how users solve screen share needs during a VoIP call now.
1.1 Learn the users: Interview
5
Participants
-
Filter:
Who used to use VoIP for communication. -
Semi-structured
-
In-Person x 2 (Turkey)
-
Remote x 3 (Taiwan)
To discover how and when people use VoIP. To find the pains, desired features and whether the screen share function could do any help.
100%
use VoIP daily.
80%
are included in VoIP group chat.
60%
use VoIP for work.
60%
figured their own way to do SCREEN SHARE during VoIP.
1.2 Discover user patter: Empathy Map
Pains
-
Poor call quality.
-
Not able to show and explain well during a call.
-
Difficult to learn how to use new features.
Goals
-
Socialize with people.
-
Efficient communication.
-
Mobility.
02
Information
Architecture
2.1 Personas
2.2 How might we?
2.3 Competitive Analysis
2.4 Feature Roadmap
Based on the interviewees' patterns, two personas were created. One of the personas, Lin, was added to centre the solution development in response to the increasing global average age. Additionally, 20% of interviewees were over 60 years old. It's important to provide an instruction for new features based on users' needs. Busy users should be able to skip the instruction and revisit it later.
Goal
-
Discover how to help Anne and Lin communicate efficiently.
-
Break down the desired features into a roadmap.
2.1 Whom we design for: Personas
During research, only 20% represented the golden age. However, I included a retired persona because the global average age is increasing. We should consider them for the design. Here are the average ages (2018-2020) across different countries:
-
Taiwan 42.5 years old
-
UK 40.6 years old
-
USA 38.5 years old
-
Turkey 31.5 years old
Anne
Executive Assistant
Anne wants to communicate efficiently to ensure the talk is accurately to the subject.
2.2 Explore user-centered solution:
How might we...?
How can we enable Anne to share her screen accurately during any call as needed?
-
Build the feature based on the current user flow, for example, adding related icons "within" the calling screen.
How might we help Lin learn the new feature most easily?
-
Provide a clear and concise step-by-step instruction to be launched with the new feature.
2.3 Explore how competitors make communication easier.
Most VoIP systems do not have a screen share function besides Line. Even though 75% of our interviewees are using Line every day, they are not aware of this feature and how to use it. Some insights from the competitor research,
-
A Great feature needs to be known.
-
Able to 'add people' into the screen-shared call.
-
Users are in control. Users must know 'which screen' they will be and are sharing now.
-
Keep WhatsApp's original mobility and efficiency. Not turning WhatsApp Screen Share into an online meeting platform.
2.4 Feature Roadmap
The features for current development will be limited to screen sharing and sending snaps during a phone call. During the research stage, it was found that many users have privacy concerns, so it will be necessary to have a "block pop-up notifications" feature during screen share. I will need to consult the technical team to see how we can make it happen.
03
Interaction
Design
3.1 Task Flow
3.2 User Flow & Touchpoint
3.3 Wireframe
3.4 Beta Test
To ensure the new feature design is well integrated with the current design of WhatsApp, I took the time to learn about the current user flow of the app. Based on this knowledge, I created a user flow for the new feature that would blend well with the existing design. I conducted a beta test with two participants and found four major improvements before wireframe digitalization.
Goal
-
Learn WhatsApp's current user flow.
-
Define the task and user flow.
-
Wireframe.
-
Test the wireframe before digitalisation.
3.1 Task Flow
Based on WhatsApp's current flow, the Screen Share task flow was designed.
3.2 User Flow & Touchpoint
The user flow was focused on the "Screen Share" feature and users' interaction points were identified at this stage.
.png)
3.3 Wireframe
Paper wireframes were prepared and ready for beta test before digitalisation.
-
On a call.
-
Select to-be-shared screen. (2-b was picked to meet the current WhatsApp design)
-
Confirm the screen.
-
Screen share call.
-
Screen share call, full screen.
-
Back to message board during a screen share call.
3.4 Beta Test & 4 improvement
2
Participants
-
Filter:
Who used to use VoIP for calling. -
In-Person x 2 (Turkey)
-
By sketching wireframe v.2
This project embraced an Agile approach, including a beta test to identify and address issues before digitalization.
The 4 improvement
01. Pop-up screen from the bottom
For to-be-selected screen choices between 2-a and 2-b, I selected 2-b to match WhatsApp's current design.
02. Rename "Give Up" button
During screen share confirmation, the "Give up" button should be renamed. Something like "Cancel" is ideal.the
04
User
Interface
Design
4.1 iCons
4.2 Hi-fidelity Prototype
Four new icons were designed with consistency to WhatsApp's design system. With the clarity I gained from the Beat Test, the high-fidelity prototype was created here.
Goal
-
Learn WhatsApp's current design system.
-
Design elements for the new features.
-
The prototype should react to the results of the Beta Test.
4.1 iCons
Share Screen
Stop Share
Send Snap
Change Screen
Consistency
Consistent with WhatsApp's original design.
Learnable
Identical to users. The "Share Screen" icon was developed in the below progress. Final change due to confusion in the beta test.
Noticeable
Add "New" under icons for a while. We found users are not always aware of change.
05
Test
and
Iteration
5.1 Usability Test
5.2 Design Improvement
5.3 Latest UI Design
5.4 Iteration
The second usability test resulted in an 83% success rate and a 17% failure rate. The unsuccessful instances were indicative of unfamiliarity with the features. To address this, a new feature instruction was included during the define stage, featuring a 'Show me next time' button. This button allows busy users, like Anne, to learn about the feature later.
Goal
-
Assess participants' comprehension of the new feature instructions.
-
Identify pain points in the design.
-
Enhance the design based on the feedback received.
5.2 Design Improvement
The main improvement was done in the announcement's 1st screen. We found it extremely important that users KNOW about the new function and how to use it.
01. Emphasize the new feature
By increasing the font size from 24px to 28 px.
02. Encourage users to learn
By adding a CTA button "Learn in 4 steps", which provides a hint of 4 steps only.
03. Allow users to come back later
By adding a "Show me next time" button for busy users to pick up this information later.
Before
After
5.4 Iteration
This project was done with an Agile mindset, I did a Beta Test once the sketching wireframe was completed. Then, improve and re-ideate the design before the 2nd usability test with Figma. After launching, we could continue to discover users' feedback for iteration.
-
Discover new pains to improve.
-
Consider a Video instruction.
Announcements could be done on both a Video and Text basis (if our current instruction is not helping most of our users).
-
Discover other small features to add. Probably in-app voting to help Lin know where his family/friends want to meet!
Thank you for staying until the end. Wish you find the WhatsApp Screen Share useful to you.
If you consider I could do any help to your team, please do not hesitate to contact me. :)
Explore other case studies
