Cyclops Playback

MY ROLE

UI/UX Designer

SOFTWARE & TOOLS

Figma , Wireframing, User Stories

TIMELINE

July 2022 - August 2022

Define

Project Overview

Ethos Group owns many different types of products. Cyclops is a video monitoring system used by many of the company’s clients. The VMS is a critical piece of what Ethos Group reps use to educate and train dealership leaders on effective sales, F&I and service functions. Cyclops helps clients file, sort and recall video more quickly than any other product in the marketplace.

Problem Statement

The current VMS software had a very outdated user-interface which made it difficult for current reps to have access and rate videos on the Cyclops software. In order to create a more seamless experience, I had to completely re-design the old user-interface to something that was far more user friendly. How might we redesign the user interface to allow users to seamlessly browse and filter information while using the VMS platform?

Research

User Research Planning

During this project, I asked my manager if I could have a glimpse of what the User Research process was like. My project manager helped put together a lot of the user research activities for each project since we did not have a formal UX Research team. Prior to starting the design, I knew I needed to understand the ins and outs of this project first, since I wasn’t too familiar with how users had been currently using this app. Below is an example of a User Research plan I helped create to structure the background information and research we needed for this project.

Researching other VMS platforms

User Stories

When I was initially introduced to this project, I had very little experience with this application. I was able to work with my team of designers and project managers to get a better glimpse of how users were currently using this application — we identified their current habits with using the application as well as their current pain points which was the main focus during my design process.

After working on the UX Plan for this application, I was able to establish important aspects for this project like general product information, target users, research templates and participants.

Insights

After conducting the User Story map with my team we were able to narrow down on three specific activities reps do when using Cyclops — searching for videos, watching videos and complete reviews of pre-recorded videos. From here we were able to nail down the MVPs we needed when redesigning this software.

Prior to designing, my team and I spent some time researching other design patterns present in other VMS platforms like Youtube, Vimeo, TikTok, etc. We took these platforms as points of inspiration to help us familiarize ourselves with aspects of the user experience in these applications which make them so successful.

Design

After conducting research and working with my team to get a better grasp of the ins and outs of this application, we began redesigning the Cyclops platform. While designing, we ensured that our design stuck to the MVPs features that were established from the previous User Story workshop.

Playback Screen

  • Gallery view — video thumbnails allowing for users to easily identify videos based off of thumbnails. When researching about gallery view UI, I found that a lot of other existing VMS platforms have a gallery view for users to easily find the videos they want to watch.

  • “New” tag — Users were initially having difficulty finding recently uploaded videos. We implemented a vibrant “New” tag to indicate to users the that the video content has been recently uploaded.

  • Information Icon — For additional information, the on-click displays all of the analytic information about the video

  • Star icon — Since users had to spend extra time finding videos they would want to rewatch again, we implemented a simple star icon for users to favorite their videos for future reference & convenience.

  • Filter — As per initial user feedback, we felt that implementing an advanced filter would be better to match the filter systems of other applications of EG Tech. The advanced filter would allow for the user to check off multiple elements from different categories while filtering.

  • List View — List view/ table view alternative for users who want to quickly browse through a table to find videos.

Feedback Screen

  • Larger thumbnail — Larger thumbnail view for users with video analytic information below

  • Review — Review tab of different sections of the video with a universal star rating system

  • Comments & Time Stamp— easy way for users to comment on videos as they are watching. Users are able to see the timestamp of their own comments as well as other users

Takeaways

Although the testing process was out of the range of my internship, I felt that working on this project was extremely valuable experience. One of my biggest takeaways from this process was the importance of integrating into existing system. Since the application has been last designed in about ten to fifteen years ago, I had to understand the many limitations that could be held over my designs. In the initial stages of sending my designs over to PMs, there were several instances where I was told my designs were not feasible and they could not be implemented with the backend system of the application. This made me reconsider a lot of my design decisions and furthered my reiteration process. Overall, this was a fun project to work on and I was excited to work with something related to media content.