Overview

Problem

The new normal lifestyle and WFH are possibly become the trend in the future because of COVID-19. Communication between the team depends on the video meeting software more and more. However, the famous meeting software broke out cyber security issues, leading companies and government to find a safe and reliable alternative plan.

Solution

We develop a video meeting software for the confidential department to be an alternative plan. It is a suite of video meeting software that localizes the communication data. It integrates the safely encrypt module, providing a safer solution for team cooperation and coordination communication.

DELIVERABLE

✔︎ Completed conference software design across laptops, Android platform tablet devices, and mobile devices

ROLE

Product Designer – Research, user experience design, user interface design, prototype design

Provide easy-to-use video conferencing applications

Challenge

  1. Because of the development time and Budget limit, the product demand is easy. However, we need to develop the product from 0 to 1 independently in four months and ensure a pleasant user experience.
  2. It is a multi-platform application across desktop, Android tablets, and mobile devices. We need to reduce the learning curve on the different resolution screens and increase usability.
  3. We are integrating front-end and back-end visual styles.

Timeline

This project’s duration is around four months.

  • The first month: I coordinate with the project manager to clarify product demand and develop specifications. 
  • The second month: I make a suit of visual guidelines and Hi-Fi prototype. We have had many discussions with the RD team to understand the limitations of practice. The design team provides all deliverables in the second month.
  • Remaining time, we keep in touch with the RD team. Running the test and get feedback to make flexible and fast dynamic corrections.

Research

In this stage, the design team coordinates with the project manager to clarify product demand and develop specifications. Defining the main task in every step, find the touchpoint and pain points to fluent the user flow.

This project aims to solve the safe problem of meeting software for our target users——middle-aged males. We only need a primary and function as meeting and host instead of a complex and fancy function.

After clarifying product demand and demand, we separate user flow into three parts: sign in, open a new meeting, and start meeting. After that, we found some problem could do more better.

  1. According to the client’s requirement, the user might spend too much time finding the users who want to invite. We hope to reduce the process before the user opens the meeting and simultaneously fills the client’s requirements.
  2. Increasing the pleasant user experience by reducing the unpleasant and error status of the unknown.
  3. Because of the technical limit, the RD team hopes we could avoid designing the item on the stream (like mute, close camera icon …) to reduce the server’s load. However, it might cause the host of the meeting can’t efficiently conduct the specific view.

Process

Goal 1.

Reducing the process and the preparation time before the user opens a new meeting

Reducing the process and the preparation time before the user opens a new meeting. Achieving the goal that opens the meeting fast.

Process

I thought the “Start New Meeting” button and flow of “choose the meeting member” would affect the user’s time of starting a new meeting.

Start Meeting
In the beginning, one of the client’s requirements is that it can see the ongoing meeting list and contacts on the application homepage. To reach the goal, we evaluate if we keep the contacts on the application homepage and raise the speed of opening the meeting?

I use the blank space to think about possible solution sketches when the stage of thinking. It is so fast to draw by use pen and paper. And it makes my thread of thought more organized, clarifies product demand, and gradually finds a suitable solution.

When we have the initial conception, I separate user flow into three parts: sign in, open a new meeting, and ongoing meeting. I propose two version wire flow for discussing with PM, design team, and RD team by drawing the prototype software.

  1. The meeting has a limit of at least two people. Even if it has the contacts list on the homepage, the user still needs to choose one contact to start a new meeting.
  2. The data of contacts are all provided by the back-end. It doesn’t have any item that could edit in the user-end.

Based on these two reasons, I decided to simplify the entry of the application. I don’t keep the contacts on the homepage instead of choosing the participants after starting a new meeting.

Flow of Start Meeting
Application homepage, compare the proposal before and after organized

Choose the participant
According to the client’s requirement, the contacts group that the user can see is the tree diagram that can see every user from which group and have the child folder style. Every contact belongs different group and has a different authority.
However, we think that this way might make the user spend lots of time to search the contact which user want to invite. After talking with the client, we understand the real requirement which the client wants is that the manager can control the authority of every user directly. Still, it is enough for the end-user to choose the participants in the user’s authority.

Outcome

In the end, we put the “choose the Participant” after the “Start Meeting.” This way simplifies the application homepage and lets the user do the behavior of “Join Meeting” or “Start Meeting” directly, reducing unnecessary exploration.
Then, about the group authority, because it controls by the manager directly, we decide to move this function to the back-end, which can reduce the process of user start meeting.
The client also agrees that this solution is more friendly for the user experience.

Goal 2.

Reducing the users’ unknown when they meet the error status

A. Before optimizing technology, we need to solve the error dialogs that bounce in the middle of meetings.
B. Reducing the users’ unknown when they meet the error status and provide the solution to solve them. Let users will not be stuck on the error page or don’t know the application already disconnects.

Process

A. Time of dialogs

Research
The RD team and I have a meeting to understand the more developed limit of this project.
This project includes two servers that are meeting list server and a video streaming server. These two servers might happen unexpected error status in the early stage.
The dialogs in the current version can shower when errors happen. However, it can’t judge what servers have errors. Therefore, it might jump and cover the meeting and disturb the ongoing meeting at any time.

Think
After understanding the technology limit, we use the compromise solution: 
No matter which kind of error status happens, the application will close the ongoing meeting, go back to the meeting list and then jump the error dialogs. 
Although this solution will disturb the users’ meeting, it can ensure that the dialogs still work if one of two servers’ errors happens. Also, even if the meeting server has an error status, the meeting list still works when the meeting stops. The users can enter the meeting from the meeting list. This solution is the better solution under the currently developed limit.

B. Content of dialogs

Research
When we confirm that the error status dialogs always show on the meeting list page, we also know we can recognize the error type by the error number. 
Some of the error statuses can be solved by the system or the user self and keep using. This application has four error statuses: network error, server error, account error, and data error.

Think
I sort the error status by the user can fix by themself or not. 
After classifying, the error statuses that can solve in the user-end are network error and server error. Account error and data error can’t solve in the user-end. 
The user needs to ask the IT staff to know the error reason and improve the error status.
Then, I design two kinds of dialogs to show the error status:

  1. The error statuses which can fix in the user-end
    Let users understand the situation of the application to reduce the users’ anxiety of the unknown and reduce the IT staff’s load of fixing the error statuses.
  2. The error statuses which can’t fix in the user-end
    Telling the users who are responsible for the problem lets users know who can solve the error status.

Outcome

We put the error status dialogs on the meeting list page. When the error statuses happen on the meeting list, the dialogs will show directly.
If the error statuses happen on the ongoing meeting, then the system will close the ongoing meeting and show it on the meeting list page.
Even if the ongoing meeting is force quit, the user back to the meeting list and solves the error status. They can still go back to the meeting from the meeting list.
This is a better solution under the currently developed limit.

And the information of the error status’s dialog,

  • if the error statuses can fix in the user-end, dialogs will tell the user the situation of the application and how to solve the error status by themself to reduce the users’ anxiety of the unknown.
  • If the error statuses can’t fix in the user-end, we will tell the user to ask the IT staff to know the error reason and solve the error status. And provide the “Close” button to help the user close the application instead of can’t do anything.

Goal 3.

New place for swift the speaker view and gallery view fluently

Because of the technical constraint, the RD team hopes we could avoid designing the item on the stream (like mute, close camera icon …) to reduce the server’s load. Therefore, we need to create a flow to let the host swift the speaker view and gallery view fluently.

Process

I analysis the competition product. Most competitors put the switch view on the upper right corner of every stream. The host can choose the stream which they want to swift to the focus. This way is more direct and friendly for the user. Also, it is the draft that we provide in the beginning.

We have a meeting with our RD team to know our development limit. We know that it can reduce system error if we avoid putting the function or component on the stream. Therefore, we need to find a solution to balance the development and user experience to switch the speaker and gallery views.

I research that if we separate the function of the switch the speaker view and gallery view from the stream, how to reach the goal of user expect:

  1. The meeting host needs to instruct to switch the speaker view and gallery view from the stream.
  2. The meeting host needs to know who is the focus of the speaker view currently.

To reach Goal 2, the host needs to connect the stream and participant name. I think we already have the participant name list and control item in the dashboard. We can integrate the swift view here to reduce the button and the users’ learning time.

To reach Goal 2, the host needs to connect the stream and participant name. I think we already have the participant name list and control item in the dashboard. We can integrate the swift view to reduce the button and the users’ learning time.

The dashboard has four items that can be controlled:

  • Remove the participants
  • Close and open the participants’ mic
  • Close and open the participants’ camera
  • Choose the participants’ stream to be speaker view

And, three items can know the status:

  • The participants’ mics open or not
  • The participants’ cameras open or not
  • Which participant’s stream is speaker view currently

To distinguish the conduct function or status, the status is that keep on the dashboard to show the status. The function conduction is that hiding when it doesn’t call and use. I make two kinds of prototypes. One is the context menu. Another is that hover to show the function.

Or, click here to check GIF prototype

In the result, we think:

  1. Hover to show the function can reduce the time that the user finds.
  2. Hover to show the function reduces the click on, and it can help the user reach the goal faster.
  3. The context menu is interference.

Outcome

Reflection

Design that takes into development limit and user experience

What I learned the most in this project is how to allocate resources reasonably and strike a balance with development limit and user experience to reach the goal of every stage within a short development time. Maybe the perfect development process doesn’t exist, but I think the most important thing is to keep flexible and agile, keep in touch with the team, and reach a consensus with stakeholders.

Synchronize each other’s work status at any time

To be a principal member of the team, I hosted much communication with the RD team. When the project was ongoing, we had to work from home because of Covid-19. Since we couldn’t work face to face, depending on more online message communication than we were in the office. To make all teams know the progress rate of each other, renew the information, discuss the problem and find the solution faster.

Therefore, I learned that expressed more carefully and organized in the asynchronous communication occasion. I also track every item, make sure that stakeholders know the assignment of themself, conclude and announce it to the team.

Provide RD team with a complete definition of interactive design specifications

This project is a new project. Except for cross-platform, all the design systems and development items are built from scratch. In the delivery, I made much effort to lower the communication cost. Also, I conduct a series of the plan to delivery efficient.

  • Except for the design document, the design file that I uploaded to Zeplin, I will write the function, behavior, and related pages detailly. When the RD develops, they can check the specification faster and reduce the time of searching information.
  • I make the Hi-Fi prototype to deliver the detail of interaction. To make sure the RD team understand the requirement of the design team.

Executive design QA with the QA team and the RD team

After having the test version, I note the date, version number, platform, problem, expectation result, and comprising with the design file to provide the specific advice for revising to the RD team.
When the RD team keeps developing the new function, they can revise at the same time.
It is efficient to reduce the gap between the RD team and the Design team.

Establish a complete but simple Guideline to ensure all the team can achieve visual consistency

Due to the urgent schedule of the project, the design team works separately. The other two designers in the team and I were responsible for different platforms.
To integrate the overall vision, I quickly established a set of a guideline so that the design team could work on different projects simultaneously. Quickly grasp the design principles and reduce the visual gap between products. It is the first time I have introduced a design system before development after entering the company.
It is different from the previous stacking and chaotic design. This project has systematic normative principles and provides to the entire design team for flexible use.