Performace Enhancement
Remote Collaboration
Shipped
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.
Team
Duration
2 months
June - August 2022
Tools
Figma
Photoshop
Zoho Nila
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.
LUTs (Lookup Tables) are lightweight visual effects known for their smooth performance and consistency across devices, meeting diverse user preferences.
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
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices
Discussion with Developers
Engaged in discussions with the development team to evaluate the performance capabilities and feasibility of the proposed color overlay effects.
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.
Utilized Nila for conceptual design and collaborating with PMs and developers
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.
Visual Filters on Vani
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.
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.
Original Image
Duotone Image (Banding)
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.
Making adjustments to neutral LUT using Adobe Photoshop
Color Palettes
We developed a range of overlays, from subtle to pronounced, ensuring there was something for everyone.
#
08FF00
#
FFC800
#
FF0084
#
0095FF
#
0084FF
#
000000
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.