![](https://framerusercontent.com/images/3AzkdOhKXAF1q4mJYoeTNmKZL4.webp)
![](https://framerusercontent.com/images/3AzkdOhKXAF1q4mJYoeTNmKZL4.webp)
Visual Filters
Vani
2022
Visual Filters
Vani
2022
Visual Filters
Vani
2022
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
Sriram Hemanth Kumar
UI Designer
Sriram Hemanth Kumar
UI Designer
Sriram Hemanth Kumar
UI Designer
Iniyan Anbu
UI Designer
Iniyan Anbu
UI Designer
Iniyan Anbu
UI Designer
Aishwarya Ashok
Product Manager
Aishwarya Ashok
Product Manager
Aishwarya Ashok
Product Manager
Tools
Figma
Photoshop
Zoho Nila
Timeline
2 months
June - August 2022
Problem
Problem
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
Solution
Solution
LUTs (Lookup Tables) are lightweight visual effects known for their smooth performance and consistency across devices, meeting diverse user preferences.
Design Journey
Design Journey
Design Journey
Comprehensive Research
Focused on identifying the best practices in color overlay design and application, ensuring the solutions were grounded in usability standards
Focused on identifying the best practices in color overlay design and application, ensuring the solutions were grounded in usability standards
Comprehensive Research
Focused on identifying the best practices in color overlay design and application, ensuring the solutions were grounded in usability standards
Focused on identifying the best practices in color overlay design and application, ensuring the solutions were grounded in usability standards
Comprehensive Research
Focused on identifying the best practices in color overlay design and application, ensuring the solutions were grounded in usability standards
Focused on identifying the best practices in color overlay design and application, ensuring the solutions were grounded in usability standards
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
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
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
Exploration of Visual Styles
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices.
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices.
Exploration of Visual Styles
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices.
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices.
Exploration of Visual Styles
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices.
Experimented with various visual styles, including gradient duotone. Faced challenges with banding issues on low-resolution devices.
Conceptualization
Utilized Nila for conceptual design and collaborating with PMs and developers
Utilized Nila for conceptual design and collaborating with PMs and developers
Conceptualization
Utilized Nila for conceptual design and collaborating with PMs and developers
Utilized Nila for conceptual design and collaborating with PMs and developers
Conceptualization
Utilized Nila for conceptual design and collaborating with PMs and developers
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
Used Photoshop to make adjustments and refinements to ensure optimal color grading
Developing Look-Up Tables
Used Photoshop to make adjustments and refinements to ensure optimal color grading
Used Photoshop to make adjustments and refinements to ensure optimal color grading
Developing Look-Up Tables
Used Photoshop to make adjustments and refinements to ensure optimal color grading
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)
Conducted peer reviews and internal testing, crucial due to the product being under a Non-Disclosure Agreement (NDA)
Internal Testing and Feedback
Conducted peer reviews and internal testing, crucial due to the product being under a Non-Disclosure Agreement (NDA)
Conducted peer reviews and internal testing, crucial due to the product being under a Non-Disclosure Agreement (NDA)
Internal Testing and Feedback
Conducted peer reviews and internal testing, crucial due to the product being under a Non-Disclosure Agreement (NDA)
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.
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.
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.
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.
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.
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
Challenges
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
Visual Decision
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 accessibility and inclusivity for users with varying device capabilities.
![](https://framerusercontent.com/images/w3G60DsZrcr8EBA4XfwRB1exobQ.webp)
![](https://framerusercontent.com/images/w3G60DsZrcr8EBA4XfwRB1exobQ.webp)
![](https://framerusercontent.com/images/w3G60DsZrcr8EBA4XfwRB1exobQ.webp)
Original Image
![](https://framerusercontent.com/images/fvKLqFa6FpPJDOWZVER25s7l9js.webp)
![](https://framerusercontent.com/images/fvKLqFa6FpPJDOWZVER25s7l9js.webp)
![](https://framerusercontent.com/images/fvKLqFa6FpPJDOWZVER25s7l9js.webp)
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.
![](https://framerusercontent.com/images/TWmx33IXBesj95JyqBnYx06RE.png)
![](https://framerusercontent.com/images/TWmx33IXBesj95JyqBnYx06RE.png)
![](https://framerusercontent.com/images/TWmx33IXBesj95JyqBnYx06RE.png)
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
![](https://framerusercontent.com/images/hkkDR53dvOrB43Q03aXSi4XADNM.webp)
![](https://framerusercontent.com/images/hkkDR53dvOrB43Q03aXSi4XADNM.webp)
![](https://framerusercontent.com/images/hkkDR53dvOrB43Q03aXSi4XADNM.webp)
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
Conclusion
Conclusion
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
Reflection
Reflection
User Feedback is Paramount
Early user engagement via surveys and tests was pivotal for understanding needs.
User Feedback is Paramount
Early user engagement via surveys and tests was pivotal for understanding needs.
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.
Performance First
Balancing aesthetics with performance was key to enhancing user experience.
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
Simplicity and Flexibility
Balanced overlays blend diversity and simplicity, enhancing collaboration without overshadowing it
Simplicity and Flexibility
Balanced overlays blend diversity and simplicity, enhancing collaboration without overshadowing it
Sriram Puli Hemanth Kumar
© 2024
Sriram Puli Hemanth Kumar
© 2024
Sriram Puli Hemanth Kumar
© 2024