Cyclops

UI/UX across the entire app

Cyclops has been on a mission for the last few years to create a collaboration tool that's more than just a video conferencing app. Everyone on the team is remote so their mission is close to everyone's hearts. I love working on projects for something that I would use myself!

Earlier in 2018 I met founder Waikit Lau in a coffee shop in the South End of Boston just to chat about what we were both up to. This blossomed into a great working relationship, which has seen great results over the course of the year and hopefully more to come.

Within Cyclops you can already create virtual machines to collaborate with all the room members, have transcripts of the audio automatically generated from each session, chat, screenshare, and most importantly create or join a room with a single click! The exciting part is that this is just the groundwork for so many awesome features and integrations we have in the pipeline.

Waikit Lau Founder

Fred is the triple threat - great designer, great judgment and easy to work with. Our entire team loves working with Fred. He has really helped uplevel our thinking around UI/UX and the design of our service. He is solicitous of feedback, is great at communications and wants to understand the higher strategic goals.

When we show our product to others, the most common feedback is "great look and feel." In era where design reigns supreme in product, Fred is by far the best designer I have worked with.

The biggest challenge throughout our design process has been figuring out how to create a layout for a room that can scale to the multitude of addons that will be available.

I started with the room view, because it's always beneficial from a design standpoint to start with the core of the app and work your way outward. This lets me account for every piece of the puzzle, if I start with the most core feature. It also lets me familiarize myself with every little nook and cranny of what we're working with, which comes in super handy when thinking about the design holistically.

What you see below is the room view, with a single speaker full screen (the traditional grid view is what you say at the top of the page). Some of the things that have to be present no matter what add ons are available include the room name, claiming a room, locking a room, inviting people to the room, ending the call, chat, screen share, and virtual machines. The Transcription icon is also visible. Anything after this will be bespoke to whatever suite of tools a user wants at their disposal, so there's plenty of room along the toolbar for these things to live. Some of the small things you might notice are a chat nofication, the transcription in action, and a tooltip for returning to the default view.

One of the very first components I made was the nametags on every user, most importantly yourself. This is where the main controls for controling your audio and video can be found both for yourself and for others in a room (in case you wanted to mute that person with the mechanical keyboard). At the time, I designed this for the MVP design with the intention of porting it over to the new design that I was doing. To that end, I tried to design something with almost a lack of visual style that could successful live on an old and a new version of the product.

You'll notice the obvious blaring red signal strength modal, with a warning icon on the main bar indicating you have a poor connection. This went through many iterations before we settled on one that felt like it fit, and wasn't to in your face. The icon only shows up if you have a poor connection that's affecting your call quality but at any time you can mouse over any user's name to see their connection information. Some of the version that got close but didn't quite make the cut can be seen below.

Naturally, the next step was to design the index page for all the rooms to live on. This, like most of the other work is just a foundation for much more to come.

In it's current state it's a list of your rooms and the history of what's happened in each one. Right now that history is mostly a log of join/leaves and if transcription was enabled, a log of the conversation happening. The exciting part is what else it's going to become. These room logs will eventually contain a wealth of resources from calls that have happened and some of the stuff planned is really cool to think about, the types of things I'd wished I'd had on many projects in the past!

Along with the in app work I do for Cyclops, I help out on the marketing site as well. I had some downtime and spent a few hours creating a new pricing page to help users really understand what Cyclops has to offer at any subscription level.

Like a lot of the work you see on my site, Cyclops is an ongoing project and I'll be posting more once I have it!