Visual Filters
Vani is the easiest way for a team to collaborate on an infinite canvas. Teammates can express themselves, build on ideas, and get stuff done–all while hanging out together over a video Catchup.
Figma
Photoshop
Zoho Nila
Problem
As remote work becomes the new norm, Vani has identified a need to enhance its user experience by introducing engaging visual elements that don't compromise device performance, ensuring seamless online collaboration.
Solution
LUTs (Lookup Tables) are lightweight visual effects known for their smooth performance and consistency across devices, meeting diverse user preferences.
Design Journey
Comprehensive Research
Focused on identifying best practices in visual effects for video streaming. The research explored a range of techniques, ensuring the final direction would align with usability standards and performance considerations.
Minimize GPU Usgae
High GPU load from effects like real-time blur or overlays can cause frame drops and overheating, reducing video quality and responsiveness during meetings.
Low Latency
Delays in rendering visual effects can desync audio-video and cause lags, making real-time communication feel sluggish and frustrating.
Exploration of Visual Styles
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices.
Halftone
Posterize
Gradient Duotone
Discussion with Developers
Engaged in discussions with the development team to evaluate the performance capabilities and feasibility of the proposed color overlay effects.
Conceptualization
Utilized Nila for conceptual design and collaborating with PMs and developers.
Developing Look-Up Tables
Used Photoshop to make adjustments and refinements to ensure optimal color grading.
Internal Testing and Feedback
Conducted peer reviews and internal testing, crucial due to the product being under a Non-Disclosure Agreement (NDA)
Product Release
Successfully launched the product with the newly developed color overlay effects. Ensured that the final output was both visually appealing and met the technical requirements.
Challenges
Balancing Aesthetics with Performance
Striking a balance between creating visually appealing overlays and ensuring the application's performance isn’t compromised was a significant challenge.
Cross-platform Compatibility
Making sure the effects are compatible with various operating systems, devices, and browsers.
Visual Decision
Initial Concept
Our initial vision was to incorporate gradient duotones to add a dynamic and modern feel. However, during the development phase, we encountered significant performance issues such as banding on lower-end devices. This not only impacted the visual appeal but also raised concerns about users with varying device capabilities.
Revising the Approach
Recognizing the need to ensure a smooth and uniform experience for all users, we pivoted from the initial gradient duotone concept. After thorough testing and consideration, we decided to implement color overlays using lookup tables(LUTS) as a more viable solution. This approach was driven by two key factors: performance and device compatibility.
Performance Efficiency
Lightweight and do not require heavy computational power, ensuring smooth performance even on devices with limited resources.
Consistency
Offer a consistent look across various devices and platforms.
Customizability
Can be easily customized, allowing us to offer a range of overlays catering to different user preferences.
Developing LUTs
LUTs are created by starting with a neutral reference image or base LUT that has no color grading applied. Color corrections and creative adjustments such as curves, levels, hue shifts, and contrast tweaks are applied using Photoshop to achieve the final stylized look.
Color Palettes
We developed a range of overlays, from subtle to pronounced, ensuring there was something for everyone.
#08FF00
#FFC800
#FF0084
#0095FF
#0084FF
#000000
Conclusion
The introduction of color overlays using LUTs in Vani successfully enhanced the user experience by adding a layer of personalization and engagement without compromising performance. Through a user-centered design approach, we were able to address key pain points and deliver a feature that was both visually appealing and functional.
Reflection
User Feedback is Paramount
Early user engagement via surveys and tests was pivotal for understanding needs.
Performance First
Balancing aesthetics with performance was key to enhancing user experience.
Simplicity and Flexibility
Balanced overlays blend diversity and simplicity, enhancing collaboration without overshadowing it