REVE Chat Version 2: Product Update Video
At the end of 2022, the REVE Chat product underwent its biggest update yet, focusing on user experience and visual design. This included new onboarding processes, navigation enhancements, and the addition of features such as ticketing systems, among others.
Among all the updates, a significant UI change occurred: the transition from top navigation to left navigation, along with a redesigned homepage. This change was particularly noteworthy because existing REVE Chat users were accustomed to the old top bar navigation style.
To address the potential confusion resulting from the transition from top navigation to left navigation in REVE Chat, I created a video to familiarize users with the new navigation layout and the redesigned homepage before the product launch. This video was intended for marketing purposes and aimed to ease users into the changes by providing a visual walkthrough of the updates.
When assigned the task by the product team, I focused on highlighting the key elements of the update in the animation. The main focus was on demonstrating the shift from top navigation to left navigation, followed by showcasing the transformation from the old homepage to the new one.
To create the video, I began by brainstorming ideas on how to effectively present the concept. Then, I gathered screenshots to illustrate the design changes and developed a storyboard to outline the sequence of events in the animation. This process ensured that the video effectively communicated the upcoming changes to users, helping them adjust to the new navigation and homepage experience seamlessly.
After collecting the research materials, the next step was to organize the files in Illustrator and create layers for animation. This was necessary because After Effects only supports the top layer of Illustrator files and cannot recognize nested layers.
Once the multiple files were organized in Illustrator, I proceeded to create an After Effects file and imported all the Illustrator files into it. This allowed me to begin working on the animation process seamlessly.
As users were accustomed to the old navigation, I began the animation in After Effects by zooming into the navigation tab to showcase all existing tabs. This approach aimed to provide users with a familiar starting point before introducing the transition to the new navigation layout.
After showcasing the existing navigation, I proceeded to create an animation for the new navigation. This involved implementing a transition effect that visually conveyed the shift from the top horizontal navigation to the left vertical navigation. Additionally, I integrated the design for the new homepage into the animation to provide users with a comprehensive view of the upcoming changes.
Finally, I finalized the animation by overlaying icons to indicate the functionality of each navigation item. This was done to ensure clarity and understanding for users regarding the features of the product. Subsequently, I zoomed out to reveal the overall design improvements, providing users with a holistic view of the updated interface.
Final Output
After completing all the animations, it was time to render the animation and share it with the product team. This involved exporting the animation in the desired format and delivering it to the relevant team members for review and feedback.