Cinema8
Strategy - UX Design - Product Design - Design System - Marketing Website
Cinema8 is an experiential video interaction design platform that empowers video lovers to create gamified, engaging, interactive, and immersive video experiences on linear & 360 videos.
The platform is not just a Video Prodcution Tool which allows the customers to create interactive videos but it also a CMS which enable the Cinema8 customers to manage users, crreate projects, view analytics and reports about users video interactions.
Within the CMS, it is possible to create videos playlist and private video channels like YouTube, and design custom forms to capture users details and create storyflows from multiple projects.
THE BRIEF
Cinema8 was looking for a UX UI expertise who could help them to improve the platform user experience and create a design system.
The design system process has been started with the design of the Cinema8 platform but it continues and evolves as the marketign website is currently in the re-design stage.
UX RESEARCH
User interviews and user testing sessions helped to get an exhaustive understanding of the overall user exprience and to figure out what were the critical issues on the current platform.
We run also a survey through Google Form and the results were analysed with the qualitative data from the interviews to understand extensively the Cinema8 users.
Suvery made with Google Form
UX UI AUDIT
Before we started to design the new platform, we spent some time to test and use the product to get a full understanding of the whole user experience. So we conduct a complete UX Audit.
At this point, as we had to review every single screen of the application and interactions, it was an excellent opportunity to conduct at the same time a UI Inventory which is essential before starting to build any Design System.
FEATURES ANALYSIS
All the users feedback collected during the user interviews and testing sessions were listed into a document
We outlined for each problem description of the issue, the topic, the solution and attached a screenshot of the platform screen. This documentation was used as a reference to design the wireframe for the new platform.
We also added into the doc the new features coming from the product roadmap into the list that needed to be implemented for the new product release.
Features List
INFORMATION ARCHITECTURE
We reviewed the IA of the platform and created a new structure based on an updated software architecture since some new section and user flows were created for the new product release.
Inforomation Architecture
WIREFRAME
The wireframe was a fundamental stage of the entire UX process. It was a cycle process with multiple iterations following an iterative method: wireframe, test, refine. And start the cycle again !
InVision Prototype
Once we reach the point that all the screens were designed, we run some users testing to test the new user flows and ones that we changed to improve the user experience. It was a great opportunity also to gather feedback about new functionalities and features that we introduced on the new release like the onboarding experience, the dashboard, help page and the new way to upload media content such as video, image or audio files.
DESIGN SYSTEM
The design system is an iterative
Intro to DS, Sketch Architecure and Zeplin Project
Once we reach the point that all the screens were designed, we run some users testing to test the new user flows and ones that we changed to improve the user experience. It was a great opportunity also to gather feedback about new functionalities and features that we introduced on the new release like the onboarding experience, the dashboard, help page and the new way to upload media content such as video, image or audio files.
UI DESIGN
The wireframe was a fundamental stage of the entire UX process. It was a cycle process with multiple iterations following an iterative method: wireframe, test, refine. And start the cycle again !
InVision Prototype
Once we reach the point that all the screens were designed, we run some users testing to test the new user flows and ones that we changed to improve the user experience. It was a great opportunity also to gather feedback about new functionalities and features that we introduced on the new release like the onboarding experience, the dashboard, help page and the new way to upload media content such as video, image or audio files.