UX Design

ROLE & DURATION

Wireframe and Visual Design


February 2022
VIEW PROTOTYPE

OVERVIEW


I conceptualized a new feature for Zoom with three other Thinkful Alumni that target a specific industry. I was responsible for creating wireframe and visual design such as branding, color palette, UI Guide and clickable prototype. From personal experiences, and by reaching out to professionals in the field, we identified the non-existing notification feature on Zoom to be a problem (and was considered a need by users).

PROBLEM STATEMENT


Have you ever sat in a Zoom meeting when you suddenly hear an alarm that triggers your fight or flight response? You look at the clock— you have five minutes before your next meeting starts but your current company wide meeting is running for longer than expected. You minimize Zoom and open Gmail to update the awaiting party that you’ll be late— during this time, your boss shared some important details on the screen that you now missed out on. How are you feeling? Anxious? Worried? Frustrated?

SOLUTION


Zoomies is the communication tool built to send notifications within Zoom to inform participants as a form of the message box on their screen that you'll be late or if you're going to reschedule your upcoming meeting.

SKETCHING


Our team first started out with individual Crazy Eight sketches to determine possible layouts. In our user flow, we determined a few different options for the user:
- Select when the user will be at the meeting: in 5, 10, or 15 minutes
- Notify folks in the next meeting that you want to reschedule
- Snooze/ignore the notification and have it come up again in 10 minutes

WIREFRAME

Then, I focused on wireframes. I eventually had to decide between two different forms of notifications:
- One appeared in the bottom left hand corner; the other mimicked Zoom’s current UI with an overlay modal.
- I ended up using both of these wireframes in preference testing in usability tests

BRANDING

We decided to select a specific name for the project. We combined zoom + ease, but the word "Zoomies" also signifies speed. So it works because our feature makes rescheduling fast, and it helps users feel at ease.

UI GUIDE

I used Zoom’s branding— fonts and color scheme— to mimic the experience of being in Zoom both in our hi-fi mockups and our prototypes. I intended to keep the environment as stress-free as possible for our visual design. Therefore, I took a playful approach to my notification box to minimize the anxiety of having to reschedule the meetings. The Hover variant was added to the buttons and plugins to be more tangible for users. (A combination of different colors like orange, blue and white.) The Zoom template is used as a background. By keeping the notifications minimal and in the corner, the user won’t be distracted from the meeting at hand— they will be focused and, in turn, a better meeting participant and co-worker. 

PROTOTYPE

With the UI Guide complete, I started working on our first high-fidelity mockups. The idea behind the first draft of the high fidelity mockup was to represent how Zoomies would be used for different purposes accurately. Some of the challenges in creating the first mockup was figuring out where I would put the message box on the screen to be more tangible. I looked at Zoom's components to see how they could demonstrate information.