Replay
UX/UI Design Case Study - Add a feature
Flymachine is a company on a mission to create the digital future of live events. It is a double-sided marketplace with a product that allows clients (artists, managers, venues…) to create events, merchandise, and tickets, and consumers (fans) to purchase and enjoy a social experience. During my time there as a Product Designer, one of the biggest projects I had to handle was Replay. The idea for this assignment was to enable users to rewatch the event on-demand for a fixed period of time after it had ended. It was my first big project at the company and I knew it would require great effort now that it would involve design changes to many areas of the client and consumer side of the product.
Discover
I began working on the project by performing a competitive analysis of the new feature. During my research, I was able to find direct competitors that offered the same service and started analyzing the step-by-step experience of a user purchasing and attending an event with replay. After looking at 5 competitors I was able to gain knowledge of the feature and reference many different visual treatments for Icons, copy and feature discovery. After sending my work to the Project Manager, he was able to use it in order to write the Product Requirement Document (PRD).
Upon reading and discussing the PRD with the Project Manager and the Director of Design, I continued my discovery phase by creating 2 flow diagrams. My goal was to basically map out the step by step of a client that would create an event with replay and a consumer that would enjoy it. Once this was done, I started pinpointing the areas of the product in which all of the actions stipulated in the diagram would occur. This was a crucial step because I was able to understand and visualize each screen that would require design changes and/or implementations.
Alignment
Having understood and explored the work that was required allowed me to sit down once again with the PM and DoD to align and make sure we were all clear on the scope of the project. During this period we also had conversations with other company departments that offered ideas and insights on the work to be done. Alignment was definitely something I needed in order to make sure that I was not rushing into the design process. Once this phase was completed, It was time to start getting my hands dirty.
Design
I began designing the creation of an event with replay which took place on the client side of the platform. Here the user could now select an event format now that the possibility to have an event with or without replay should be optional. I added a dropdown called Event Format in the Event Creation form in which the default option was “Live only” and users could switch to “Live with replay”. If the “Live with replay format was selected, an input field next to the dropdown would appear, enabling the user to select a replay window. All of these designs were done for desktop and mobile and were always accompanied by some very specific spec sheets that I created for the engineers to be able to reference any variations of assistive text, error states, components, and more.
Introducing event formats would also impact the look and feel of a consumer going through the purchase experience. In order to account for this, I had to find some space for data points in the event cards that showed up on the homepage, the event details on the Purchase Page, and the tickets on the My Passes page. In order to do so, I went back to my research and took a second look at how our competitors were doing this. After exploring different treatments, I was able to come up with a way to display the event format and replay window, if any, during the entire purchase experience.
From a technical standpoint, the way this was going to work was by automatically recording an event during its live stream and then uploading that file to a video player. However, we also wanted to allow the user to trim the video recording or even upload a new file from their computer as the replay video. Besides the consumer and client side of the platform, Flymachine also has a separate application called Broadcast where clients can start, stop and monitor events. For this part, I collaborated with my manager, the Director of Design to add a widget in the Broadcast panel where users could view, trim, download and upload files to select a replay video.
As this was being designed, I was notified by the Back End team that the replay may not become available right after the event ended now that the actual end time of the stream would go on even if the show had ended to account for as much time as possible. In order to inform users, I designed an email template that would be automatically sent to users that had bought a pass, letting them know that the replay for X show was now available until x day and time and a CTA that would take them directly to the video player.
The final design portion of the project was to create the desktop and mobile view of the video player. In order to do so, I referenced the designs for MUX, the API we used to implement this feature, and started learning about how much space for styling I had. Then I had a meeting with the designer from the consumer side of Flymachine and collaborated in order to find the treatments that would give the video player as much synergy as possible with the live experience. After a few iterations and many spec sheets that determined all of the states for the controls, the video player was finished.
Validation
In order to move forward with my project, I presented it to the other designers in the company in order to receive as much feedback as possible. I also received help from the Director of Marketing on the copy and phrasing of the content in the email template I had designed. After this was done, I had a brainstorming session about possible edge cases that may occur and shared them with the project manager. Then, I created simple solutions for each of the scenarios that I had put together. For example: After an event had sold passes, the event format selector would be disabled, prohibiting a user (client) to eliminate replay after a Live with replay pass had been sold.
This was definitely a big project that touched many parts of the platform. Today, it is live and has been adopted by most users. After launch, more than 80% of events offered replay. Approximately 25% of users watched the replay only and 45% watched the live event and the replay. I am proud to have overcome this challenge because I was able to not only execute it successfully but also to have learned a lot in the process and gotten even more familiar with the product I was working on.