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
Tools
Figma
Photoshop
Zoho Nila
Timeline
2 months
June - August 2022
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.
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 accessibility and inclusivity for 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
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.