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

Iniyan Anbu

UI Designer

Aishwarya Ashok

Product Manager

Duration

2 Months

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 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

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

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)

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

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 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

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

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

Iniyan Anbu

UI Designer

Aishwarya Ashok

Product Manager

Duration

2 Months

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 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

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

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)

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

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 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

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

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

Iniyan Anbu

UI Designer

Aishwarya Ashok

Product Manager

Duration

2 Months

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 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

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

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)

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

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 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

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

sriramph