Remote jobs and remote employees are quite popular now a days. People does not want to commute for hours and waste time. Obviously remote teams go with remote meeting/conferencing tools for their face to face communications. Skype and Zoom are two of the conferencing tools, which are popularly used. Being a Zoom user, my experience was not good. There were lot of unnecessary data needed to provide during sign up. As a product designer, I planned to try redesigning zoom on-boarding journey and below is the detailed case study of my work.
Let’s understand what is ‘Zoom’?
Zoom is the leader in modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, collaboration, chat and webinars across mobile devices, desktops, telephones and room systems. Zoom Rooms is the original software-based conference room solution used around the world in board, conference, huddle, and training rooms, as well as executive offices and classrooms. Founded in 2011, Zoom helps businesses and organizations bring their teams together in a frictionless environment to get more done. Zoom is a private company headquartered in San Jose, California. Link to their website is www.zoom.us
What was the real Design Challenge?
How might we improve the existing zoom.us so that, the on-boarding journey for its users is better and easy?
Considering the above challenge, we defined the Goals..
To redesign Zoom application, in order to provide better on-boarding user experience to its users, in turn increasing the business value.
The main focus of business values are following:
1. Increase number of users on boarded completely & Reduce drop off happening on on-boarding journey.
2. Prevent repetitions of Sign Ups.
Conducting the ‘Heuristics Evaluation’..
Once after defining the project goal, I did a heuristic evaluation (Expert based analysis) of the problem. The process gave an opportunity to learn and understand it better, which in-turn inspired me to write a detailed article of my understanding.
For the Heuristic evaluation of Zoom On-boarding, I have applied Jakob Nielsen’s heuristics and Severity scale.
Severity level and it’s definitions:
High: Major usability problems, need immediate attention to fix it.
Medium: Not a major usability problem, but it is important to fix it. Otherwise it might lead to high priority issues.
Low: Minor usability issues/problems.
When I performed heuristics evaluation on Zoom on-boarding journey, we came up with many usability problems. Many of which, were in need of immediate attention.
Detailed heuristic evaluation report for the reference
Persona creation..
Based on my understanding, a Persona was created. Persona is the real representation of the type of user/s of the application, their real needs, goals, what motivates them and their fear and frustrations. Creating personas will help to understand the user needs, experiences, behaviors and goals.
Empathy Map Illustration..
Once we know the type of users we are targeting for, a designer should understand the audience in deep. The design step which helps to understand the audience better is ‘Empathy Map’. An empathy map is an illustration that helps design thinkers to clearly understand their customer’s day to day activities. Below is the Empathy Map created for ‘Zoom On-boarding’ redesign.
Setting up the ‘Project Goals’..
In the design thinking process not only considering the user needs is important, but also considering business needs also important. So, I have identified the core goals and pain points for both business and end users and listed them. This step helped me to decrease the gap between business and end users and to design a better solution which helped both the groups.
Building the ‘Information Architecture’..
Now, we know the Project goals and pain points for the Zoom-redesign. In general, when we have an idea and goals to build a house, next step will be creating the blue print. In design industry, similar to ‘Blue print’ creation before house construction is creating ‘Information Architecture (IA)’.
Very simple definition for Information Architecture is the science that assists experts in the content structuring is called information architecture. In other words, IA is a visual representation of the digital product’s features, navigation and hierarchy. During the process of understanding about IA, i got a chance to learn more about this and it inspired me to write an article about IA. Also, I came up with the IA for Zoom On-boarding Redesign, which is as below:
Initiating ‘Wireframes’
Sketches
Since I had IA on hand, it was easy to come up with low-fidelity ideations using pencil and paper. During this process I came up with different designs, which got narrowed during each process forward. Paper sketches provided me a solid foundation and better design idea. Which lead to high fidelity wireframes.
After many iterations of paper sketches, a low fidelity wireframe (Both web and mobile) was designed using Figma to define the visual form on the screen and arrangements of all the elements.
Tool based wireframes
Desktop wireframes were created using the final paper sketches. Again, after many iterations final wireframes were as below.
Mobile Wireframes:
Since mobile is one of the most popular device now a days, I created mobile version of wireframes as well. Below are the mobile wireframes.
‘Prototype’ creation..
Once the base wireframes were ready, I created a working low fidelity prototype of the designed screens using Figma. The task flows observed in the prototype are,
1. New User Signup flow
2. Existing user Sign-in flow
3. Existing user Forgot password flow
Next comes ‘Testing and Validations’..
Validation of the ready product is important in any industry. Usability Test is one in the design. So, a usability test plan was created for usability testing. Usability testing was conducted using the low fidelity prototype of the application. The test was conducted to assess usability, navigation, content & call to action in the built task flows; identify errors and gain user’s feedback on their preferences and recommendations and assess the overall success of the prototype. The test was conducted via a moderated remote setting. The overall test findings helped identify key areas for improving user interaction and identify error states.
From the overall test findings it can be inferred that the prototype is a success, with respect to a majority of workflows.
Observations:
1. There was a huge in time taken to onboard existing app and to the prototype. The new prototype has saved an average time of 5 minutes.
2. There were no errors during all tasks performed with existing app and new prototype.
Existing Zoom App — Specific:
1. On the ‘Test meeting’ page (during signup) ‘Go to my account (CTA)’ went unnoticed by all participants. Most of them thought page itself is landing page and were searching for meeting setup.
2. Inconsistent font sizes bothered the users.
3. Email inconsistency was mentioned by the users.
4. Difference in landing pages during each flow confused the users.
New Zoom prototype — Specific:
1. ‘Signup/SignIn using Google’ and ‘Signup/SignIn using Facebook’ CTAs were never used by any of the participants.
2. ‘Meeting set up’ option before ‘profile setup’ was appreciated by the users since their intention behind sign up was to set up meeting.
3. ‘Password reset’ confirmation can be displayed on the account dashboard page instead of a separate page.
Concluding Remarks:
Some of the key learnings from usability testing are:
1. Inconsistency in design creates lots of confusions to users.
2. Simple designs saves user time and are easy to understand the flow.
As part of redesign/improvements to the designed prototype, we will be considering
1. Reordering the ‘signup/sign-in using google and facebook’ CTAs.
2. Taking out password reset confirmation page and will be adding the message into the account dashboard screen.
‘Brand Identity’ formation..
Once the low fidelity wireframes were ready for initial prototyping I started to work on creating Brand Identity. To synchronize with Zoom’s website, I kept color scheme with shades of blue, so that the users can relate to it.
After the UI Kit was ready, it is exciting to try the colors, typography and other components on the low fidelity wireframe. I designed Visual Designs for both web and mobile. After many iterations and trial and errors, I came up with the below final designs.
Visual Designs
Visual design space gave me chance to glaze the wireframes using UI kit. I preferred minimal design for the user interface to make sure I provide users, a flawless experience.
Desktop Designs:
Mobile Designs:
It was a great learning experience with Redesigning zoom on-boarding experience. I’m really proud to showcase my work with some of below before and after pictures.
Next steps ...
Given the time and effort I invested in this project, the overall outcome has been satisfying. If I had more time, I would definitely like to work on designing the other sections of the zoom website that are more challenging.
