ZotMeet gets a Makeover

The experience is frustrating and there is not one place that handles it all.

With ZotMeet, all the annoying hard stuff is handled for them in one place.

I led a major rebranding of the MVP website to align its current design with ICS Student Council’s existing pink logo.

My PMs also asked to make the user interface a balance between something playful and professional using React’s Material Design Library.

The new branding strikes this balance between playful and professional, using rounded 3D effects and generous white space to minimize visual load for a productivity tool.

• Best Time: Users should be able to toggle view the best time for their meeting combining people and room availability

• Room filters: Users should be able to choose the capacity and building their room exploration is

• Room Availability: Users should be able to quickly search through many different rooms and view when they would be open

This first iteration made a right section contain everything from attendee availability and room availability.

My team liked this version but my concern was on the scalability of the right column information. During user interviews, a potential user mentioned having 50+ attendees fill out their availability on their previous tool and having to scroll through the entire bar didn’t seem productive and would bury the other features contained on the right sidebar.

I then explored a version that gave more separability between person availability and room availability. Removing the left nav bar was also done to help save on horizontal space. Although it helped to organize the space better, this version felt too distracting having users and rooms next to each other.

I explored this 3 column version to see if it would help reduce the visual load, but user testing revealed that having 3 columns was still very distracting and not intuitive to navigate.

At this point I also started exploring the Material Design library and how its components could fit together to meet the requirements.

All iterations helped to reveal how the systems that I think in aren’t universal, and user testing couldn’t validate separating the person and room availability. Each user preferenced scrolling over clicking to expand a new section, so I went back to the first iteration and enhanced it with collapsing sections.

Competing products use a toggle on/off to include if-needed time, but with the default being on, it’s easy to forget to check if you have to consider an if-needed time block.

With this new diagonal pattern with transparent stripes, a meeting scheduler can visually identify an if-needed block with ease despite layered availability.

Our key competitors either aren’t optimized for mobile or are paywalled, leaving the free version cluttered with ads that made the already tedious process of adding availability on mobile even harder. Our target audience are college age young adults who are most likely to use this app on their phone. This made mobile responsiveness a high priority for our team.

While these designs were simple, they didn’t provide the breadth of features we offer on the desktop version easily accessible.

• Display number of responders available for a given time block

• Display number of rooms available for a given time block

• Access to “add/edit availability” button

• Access to “schedule meeting” button

This version used a collapsible drawer that expanded to show person and location availability. However this would make it difficult to click on persons as a filter with the buttons being too small, and it also didn’t support large scale meetings with high attendance where the user would run into the same scrolling issue.

I introduced tabs to organize attendance from room availability to solve the original issue so the attendance could easily scale.

The floating navigation bar also includes the desktop shortcuts of editing availability and scheduling a meeting, and this is how I was able to balance accessibility of tools without compromising on screen space.

As a designer, it’s a lot of work to collaborate with developers, but I’m so grateful to my team and for making my visions come to life!