Rethinking video conference across distributed teams — UX case study

The following case study is a part of design exercise for a startup in Bangalore.

Hello!

The following case study passionately provides a little insight in how I would potentially approach User Experience design for a project.

Though it takes much more time to research and design a good application, I have tried my best to present the process behind my work.

Before diving into the good stuff, I would like to present two ideas

1. Jobs To be Done (JTBD)
2. Established UX patterns

JTBD

Let me give you a little introduction about JTBD. It helps in finding underlying jobs required to solve a problem rather than providing features. I think the this tweet will help more to understand what I am trying to convey.

UX Pattern

When users encounter familiar conventions, they already know how to use them, they feel safe and secure, they can use the product (or the service) efficiently and effectively, and in most cases they also feel satisfied. Breaking the conventions, on the other hand, can easily lead to significant usability issues.

https://uxmag.com/articles/the-price-of-not-using-ux-patterns

To give you an example I have attached an image showcasing the ux pattern for a telephone dial pad.

A little insight on the layout of a rotary telephone:

On a rotary dial, 1 is at the top right and zero is on the bottom. When designing the new touch-tone keypad, putting the 1 on the top-right didn’t make much sense, because Western writing is read from left to right. But putting 1 on the top-left, and the subsequent numbers to the right, did make sense. Using that formula, the resulting rows fell into place, with zero getting its own row at the bottom.

As people are used to physical dial pad, iphone and android followed the established pattern since introducing a new dial pad layout could cause severe anxiety to it users.

Problem Statement — JTBD Framework

I want to make it clear that this problem statement is for a corporate team video conferencing tool and not a personal video chat. Consumer grade design requires more intimate approach to know the real jobs to be done.

Before generating features, we should look why would teams hire a video conference tool? Nir Eyal in his book Hooked suggested an exercise of asking 5 WHYs to uncover the real motivation behind user intention to use a product/service.

• WHY1 : Why would corporate teams want to use video conference tool?
• ANS: So they can talk face-to-face instead of email.
• WHY2: Why would they want to do that?
• ANS: Because they want to share and receive information quickly.
• WHY3: Why do they want to do that?
• ANS: To make sure everybody are on the same page and assign tasks to different team.
• WHY4: Why do they need to know that?
• ANS: To make sure there are no bottleneck in a product roadmap.
• WHY5: Why would they care about that?
• ANS: To make company deliverables on time.

By asking this 5 questions alone, we came to know the jobs for which a video conference tool will be hired.

1. They want to share and receive information quickly.
2. They want to sync everybody in the team and assign tasks between each other for faster roll outs.

On a funnier note, a comedic representation of problems faced by teams in a video conference

Customer Journey

Now that we have our problem statements in order, I would lay out a customer journey which has actors, actions and end goals. This exercise is suggested by Jake Knapp in the book Design Sprint.

Now that we know the customer journey, I quickly sketch out screens from start to finish to get the holistic working of the application.

Prototyping

If you remember the 2 ideas in the beginning, we have already covered the JTBD framework.

While creating wireframes, I would consider the current UX pattern followed by the industry. Instead of reinventing the wheel which would make learning curve for a user very steep, using existing UX pattern will help me in avoiding any friction during the user journey.

To demonstrate the current UX pattern, lets see some of the existing solutions in the market.

Upon studying the UX pattern of the above apps like Skype, Hangout and Slack, we can see some similarities

1. A big screen estate for the face of the people with overlay buttons for various functions.
2. Right side chat area
3. Left side area for contacts
4. Bottom area for people engaged in the call.

I will keep in mind the pattern while making the wireframes.

Other problem which I have personally experienced is the pain of joining a conference call. I prefer it to be a simple link from where I can join immediately. This link can be shared with everybody and can require Linkedin authentication so that we can immediately get the Name, Company and Job role to avoid any confusion between names.

Please note: Due to less time, I have just focussed on the happy flow of a user, i.e from sign up to attending conference call. I have not dived in to the micro-interactions in the app.

I took some of the sketches, and created digital mockup to make sure the layout stay true to the web app and to make sure no inconsistencies occur.

UI Design and styleguide

Before I begin ui design for any project, I immediately create a mood-board to materialise the look and feel of the product. This is a very common practice in fashion designing where designers collect clothing texture, color pallete etc to get a general idea of the clothes.

Moodboard

For general theme, I have gone with the universal corporate color, Blue.

Styleguide

Screen Designs

Conclusion

I know I have missed some screens, but I am sure I was able to present the underlying principles behind how the screen came to be designed. Every individual is different and the features request may differ from person to person. Instead of implementing every feature request, if we try to understand the core problem we can come up with a superior solution than the requested one.

Ending with one of the most famous quote in UX ~ “If I had asked people what they wanted, they would have said faster horses.” — Henry Ford.