Redesign Video Call Experience

ROLE

Product Design

SKILLS

User Research

Visual Design

Interaction Design

Prototyping

TOOL USED

Figma

OVERVIEW

Atheer is the industry’s first Unified Service Network Operation Platform. Access real-time insights, make data-driven decisions, and streamline operations across customers’ entire service network.

OUTCOME

• 40% Reduction in service resolution time

• 90% Increase in service efficiency

• 30% Increase in first-time fix rates

BUSINESS GOAL

Empower and support the field service teams with real-time interaction and collaborative tools. Quickly diagnose and resolve issues through live communication, screen sharing, and annotation features.

CHALLENGES

Atheer’s video call feature aims to streamline collaboration between field workers and experts, but device compatibility issues and an unclear interface hinder its effectiveness. Users struggle to find key functions, often resorting to manuals, which disrupts workflow and leads to a drop in video call usage. A consistent, efficient design is urgently needed to improve task execution speed.

SOLUTIONS

Use labels to deliver clear guidance on the features, and put primary action the primary to the less of the buttons. In particular, explanations should be provided to help users easily understand the purpose and operation of each button or feature.

PROBLEM STATEMENT

1. Not mobile-friendly UI makes useability issues

The improper UI (not mobile-friendly interface) and anonymous buttons cause interaction issues.

2. Inefficient screen transitions negatively impact productivity.

The video call starts with the landscape mode making the user keep rotating the phone which brings unproductive work effect.

Previous design

Previous design

TARGET USERS

To make the project descriptions clearer, here’s a quick summary of Atheer’s primary user groups:

2. Technician Expert

UNDERSTANDING USER GOALS

How might we start the video call in the portrait mode give the user less movement?

Besides the main problem, I found out 3 important painpoints throughout the user journeys.

  1. The video call starts in landscape mode making the user keep rotating the phone which brings unproductive work effects.

  2. The users want to see the status of connections among the industrial environment

  3. The user is concerned about the connectivities. It would be good to show the bandwidth

REMOTE EXPERTS

Remote experts are just that - experts who are not on-site, who provide support (via video collaboration or task flow creation) to field technicians spread across the globe. REs use only our web product.

USER JOURNEY

  1. Field Worker

    The field workers in places like factories and warehouses face challenges such as wearing gloves and working in low-light or noisy areas. Most of the time, the work is done through the app.

FIELD USERS

Field users are on the ground, interacting with our product on glasses, mobile, or tablet. They use it when they need help solving a problem, need a RE to see what they are seeing or are ready to complete a taskflow.

  • Implement a responsive design and modular UI structure to deliver a consistent user experience across mobile, tablet, and smart glasses.

  • Create a clear, intuitive interface with streamlined access to essential tools and features for smoother task management.

  • Integrate tools that allow for real-time annotation and quick access to manuals during video calls to expedite issue resolution.

How might we utilize the notification and banner to let the user easy to approach the video call

How might we display the connection status let user recognize the connectivity

WHITEPAPER RESEARCH DISCOVER USER AND COMPETITORS

Cognitive their pain points, researched competitors' products to understand their challenges and the benefits of their products.

Through this user’s feedback, I could list down the main pain points.

  1. Users don't want to Rotate the phone repeatedly to use the video call

  2. Users want to see expended real-time display view THE LARGE BUTTONS INTERPRET it

  3. Users want to see the accuracy of the button’s usability, and it is difficult to understand what the buttons represent

COMPETITORS

A way to finish a task with 94% success

Competitors provide various features to achieve successful outcomes, such as note-taking (annotation) or video calls in real-time to communicate with experts and technicians. They also update their work processes to the manager and complete tasks, among other things.

This research taught me that video call assistants help the enterprise field solve its pain points immediately and can save as much as 78% in operating costs by using a remote virtual assistant (VA) instead of a traditional, in-house employee.

SETTING GOALS/RE-DEFINED GOALS

  1. The video call starts in ‘portrait mode’

    The workers holding a phone for a long time while working, constantly turning the phone can be disruptive to work. Prevent rotating the phone, It will reduce hand strain and improve the inconvenience of repeatedly turning over the phone.

2. Intuitive user interface

Redesign the interface to be easy to navigate, even for those who are not tech-savvy. This can help minimize errors and result in a more positive user experience and improved client outcomes.

Ideation

Discover the variations and decision

Value for using the bottom sheet and drawer:

  1. It ensures that it contains as many features and can organize from primary to less.

  2. 5 levels of the bottom sheet and drawer give more flexibility to adjust the screen view.

  3. People already get used to using the bottom drawer, which gives an intuitive experience.

Option 1: Drawer

Option 2: Bottom sheet

Define User interface:

  1. It begins with level 2 of the bottom sheet to show the primary buttons and the user can drag up and down to adjust it.

  2. Ensure the primary action buttons and arrange them on the first row to catch it at a glance and other additional information put them on the second level

BEFORE - Portrait mode

Atheer 4.0 (2020 released) - Video call screen

AFTER - Landscape mode

Atheer 6.0 (2022 released) - Video call screen

Extend and close the thumbnail

Use an arrow button to extend and close the thumbnail so that the user can secure more screen space.

Initiate the annotation tool

The screen captures the current view and starts annotation.

Chat

Able to chat during the video call

Full Prototype

Click FOS - SWIS to see the full prototype

Switch the primary view

Tab thumbnail view or the flip button to switch the primary view

Minimize the video call

Tab the minimize button free to move forward to other pages during the video call

WHAT I LEARNED

In this project, I understand users' issues and how their workspace affects their efficiency. Sideways phone view widens the screen but may make key features less accessible and strain the hand more than upright use, causing discomfort with prolonged usage. The drawer has 5 levels for organizing features based on importance, enhancing usability and task management.

You may also like

Monocular App Entry Point

Graphic Designs - Marketing