Streamlining visual merchandising for faster product launches
Goal
Goal
To design and develop an application that simplifies and speeds up the visual merchandising process for Urban Ladder, enabling art directors to rapidly create and deploy product images for newly launched furniture.
Overview
Overview
Client
Urban Ladder
Location
Bengaluru, Karnataka, India
Duration
6 Months
Role
User Researcher, Visual Designer & User Experience Designer
Platform
Tablet
Final Outcome
Final Outcome
An overview of UL Studio Project
An overview of UL Studio Project
About Urban Ladder
Urban Ladder is an Indian online furniture and home decor brand founded in 2012 by Ashish Goel and Rajiv Srivatsa. The company focuses on providing stylish, high-quality furniture and home decor items through its website and retail stores. It offers a wide range of products, including sofas, beds, dining tables, and storage solutions. Urban Ladder is known for its attention to design, ease of online shopping, and efficient delivery and assembly services.
Project Goal
The purpose of this application is to assist the art directors at Urban Ladder in the process of visual merchandising. The application is designed to facilitate the creation of visual displays for newly launched products. By streamlining the creation of product images, the application aims to accelerate the launch of furniture products, thereby enhancing efficiency in the visual merchandising process.
Project Scope
The product development initially encompassed two primary objectives. The first objective was to enable visual designers to perform visual merchandising with greater ease. The second objective focused on asset management, where visual image assets are streamlined for catalog services, thereby facilitating quicker product uploads and faster launches. Two tools were envisioned to achieve these goals: a virtual studio and an asset management tool.
Studio
The Studio is a digital tool designed for art directors, enabling them to place furniture products within a virtual photo studio environment and compose various shots for visual merchandising purposes.
Studio
The Studio is a digital tool designed for art directors, enabling them to place furniture products within a virtual photo studio environment and compose various shots for visual merchandising purposes.
Asset Management
Asset management is a tool designed for the management of visual assets exported by the art directors. These visual assets are accompanied by a collection of associated metadata.
Asset Management
Asset management is a tool designed for the management of visual assets exported by the art directors. These visual assets are accompanied by a collection of associated metadata.
Research
Initial research was conducted to define the scope of the project, followed by an in-depth examination of the product launch cycle, the product image creation process, and competitive products available for visual merchandising. Both primary and secondary research methods were employed to gather insights.
Research
Initial research was conducted to define the scope of the project, followed by an in-depth examination of the product launch cycle, the product image creation process, and competitive products available for visual merchandising. Both primary and secondary research methods were employed to gather insights.
Online Customer
The customer will visit the furniture store online; however, there are several other factors that provide comprehensive information to the customer. These factors include: - Images - Pricing - Descriptions - Offers Together, these elements contribute to the creation of the product page. Among these, images play a crucial role in the selection of furniture, followed by the other factors. The primary driver of the purchase decision is the 'Product Image.' Sales conversion is significantly influenced by how effectively these images are presented to the customer. At this stage, I recognized that the entire project revolves around product images, and it became essential for me to understand how these images are captured.
Online Customer
The customer will visit the furniture store online; however, there are several other factors that provide comprehensive information to the customer. These factors include: - Images - Pricing - Descriptions - Offers Together, these elements contribute to the creation of the product page. Among these, images play a crucial role in the selection of furniture, followed by the other factors. The primary driver of the purchase decision is the 'Product Image.' Sales conversion is significantly influenced by how effectively these images are presented to the customer. At this stage, I recognized that the entire project revolves around product images, and it became essential for me to understand how these images are captured.
Urban Ladder Product Listing Page
Urban Ladder Product Listing Page
Product Image Creation
For any online furniture company, images play a crucial role in marketing and sales. At Urban Ladder, these images are created by the in-house team. There are two primary methods for image creation: physical photoshoots of furniture products and digital renderings of furniture products. Both methods are cost-intensive and labor-intensive.
Product Image Creation
For any online furniture company, images play a crucial role in marketing and sales. At Urban Ladder, these images are created by the in-house team. There are two primary methods for image creation: physical photoshoots of furniture products and digital renderings of furniture products. Both methods are cost-intensive and labor-intensive.
Physical Product Shoot
This type of product shoot involves bringing furniture products into a physical studio space, complete with physical lighting and room setups. Photographers are engaged to capture images of the products.
Physical Product Shoot
This type of product shoot involves bringing furniture products into a physical studio space, complete with physical lighting and room setups. Photographers are engaged to capture images of the products.
Digital Product Shoot
This type of product shoot involves recreating physical products through 3D modeling, with virtual lighting setups applied. The 3D scenes are then rendered using specialized 3D software.
Digital Product Shoot
This type of product shoot involves recreating physical products through 3D modeling, with virtual lighting setups applied. The 3D scenes are then rendered using specialized 3D software.
Physical Product Photoshoot Process
Physical Product Photoshoot Process
Digital Product Photoshoot Process
Digital Product Photoshoot Process
User Interviews
After gaining an understanding of the fundamentals of image creation, I sought to explore the events that precede the photo shoot process. To uncover these, I interviewed 20 individuals from various departments, all of whom were involved in the product launch process. I recorded the interviews, transcribed them, and analyzed the insights derived from the discussions.
User Interviews
After gaining an understanding of the fundamentals of image creation, I sought to explore the events that precede the photo shoot process. To uncover these, I interviewed 20 individuals from various departments, all of whom were involved in the product launch process. I recorded the interviews, transcribed them, and analyzed the insights derived from the discussions.
Art
Director
5 people
Studio
Photographer
2 people
Product
Designer
2 people
3D Modelling
Artists
2 people
Visual
Designer
5 people
Program Manager
2 people
Category Manager
2 people
Marketing Manager
2 people
Art
Director
5 people
Studio
Photographer
2 people
Product
Designer
2 people
3D Modelling
Artists
2 people
Visual
Designer
5 people
Program Manager
2 people
Category Manager
2 people
Marketing Manager
2 people
Understanding the Lifecycle of Product Images
My next step was to understand the lifecycle of product images, so I created a Stakeholder Map using the insights gathered from the interviews. This map outlined all the departments involved and the key file movements between them. The end-to-end flow provided a comprehensive overview of the entire process, allowing me to better understand the steps involved in the product launch.
Understanding the Lifecycle of Product Images
My next step was to understand the lifecycle of product images, so I created a Stakeholder Map using the insights gathered from the interviews. This map outlined all the departments involved and the key file movements between them. The end-to-end flow provided a comprehensive overview of the entire process, allowing me to better understand the steps involved in the product launch.
Product Lifecycle Stakeholder Map
Product Lifecycle Stakeholder Map
Product Launch Lifecycle
I developed a product launch flow that highlighted the key steps involved in the product launch process. Additionally, I identified the key stakeholders at each stage and outlined their respective responsibilities.
Product Launch Lifecycle
I developed a product launch flow that highlighted the key steps involved in the product launch process. Additionally, I identified the key stakeholders at each stage and outlined their respective responsibilities.
Product Launch Flow Part 1
Product Launch Flow Part 1
Product Launch Flow Part 2
Product Launch Flow Part 2
Stakeholder Interviews
I engaged with over 20 individuals across Urban Ladder to gather insights and deepen my understanding. I recorded the interviews and transcribed them, which led to additional questions. To further explore these, I conducted follow-up discussions to uncover more insights.
Stakeholder Interviews
I engaged with over 20 individuals across Urban Ladder to gather insights and deepen my understanding. I recorded the interviews and transcribed them, which led to additional questions. To further explore these, I conducted follow-up discussions to uncover more insights.
Understanding Physical Photoshoot
The next step was to gain a detailed understanding of the physical photoshoot process. I aimed to identify the challenges associated with the photoshoot and explore opportunities for improvement. To achieve this, I created a comprehensive chart outlining each step involved in the process.
Understanding Physical Photoshoot
The next step was to gain a detailed understanding of the physical photoshoot process. I aimed to identify the challenges associated with the photoshoot and explore opportunities for improvement. To achieve this, I created a comprehensive chart outlining each step involved in the process.
Understanding Physical Photoshoot
The next step was to gain a detailed understanding of the physical photoshoot process. I aimed to identify the challenges associated with the photoshoot and explore opportunities for improvement. To achieve this, I created a comprehensive chart outlining each step involved in the process.
Understanding Digital Photoshoot
After gaining a thorough understanding of the physical product photoshoot process, I began researching the digital photoshoot process by interviewing 3D artists and visual designers to gain insight into the workflow. This also allowed me to identify pain points and potential areas for improvement.
Understanding Digital Photoshoot
After gaining a thorough understanding of the physical product photoshoot process, I began researching the digital photoshoot process by interviewing 3D artists and visual designers to gain insight into the workflow. This also allowed me to identify pain points and potential areas for improvement.
Understanding Digital Photoshoot
After gaining a thorough understanding of the physical product photoshoot process, I began researching the digital photoshoot process by interviewing 3D artists and visual designers to gain insight into the workflow. This also allowed me to identify pain points and potential areas for improvement.
Digital Photoshoot Process
Digital Photoshoot Process
Discovering Pain Points
The entire product photoshoot process was analyzed to identify gaps and pain points. Numerous issues were found within the physical product photoshoot process, which were categorized into different stages. Similarly, several pain points were also identified in the digital product photoshoot process. The goal was to pinpoint areas for improvement and understand how these changes would impact the overall product.
Discovering Pain Points
The entire product photoshoot process was analyzed to identify gaps and pain points. Numerous issues were found within the physical product photoshoot process, which were categorized into different stages. Similarly, several pain points were also identified in the digital product photoshoot process. The goal was to pinpoint areas for improvement and understand how these changes would impact the overall product.
Discovering Pain Points
The entire product photoshoot process was analyzed to identify gaps and pain points. Numerous issues were found within the physical product photoshoot process, which were categorized into different stages. Similarly, several pain points were also identified in the digital product photoshoot process. The goal was to pinpoint areas for improvement and understand how these changes would impact the overall product.
Persona
The product launch lifecycle involves various teams and stakeholders. However, the visual merchandising process primarily includes a select group of stakeholders, such as the art director, product designer, and program manager. Among these personas, I chose the art director as the key user for whom the product was specifically designed.
Persona
The product launch lifecycle involves various teams and stakeholders. However, the visual merchandising process primarily includes a select group of stakeholders, such as the art director, product designer, and program manager. Among these personas, I chose the art director as the key user for whom the product was specifically designed.
Persona
The product launch lifecycle involves various teams and stakeholders. However, the visual merchandising process primarily includes a select group of stakeholders, such as the art director, product designer, and program manager. Among these personas, I chose the art director as the key user for whom the product was specifically designed.
Design Consideration
The product designed for the art director needed to include a range of features. However, for the minimum viable product (MVP), I focused on three main categories of requirements: project assignment and tracking, product detail and scene setup, and export, validation, and communication.
Design Consideration
The product designed for the art director needed to include a range of features. However, for the minimum viable product (MVP), I focused on three main categories of requirements: project assignment and tracking, product detail and scene setup, and export, validation, and communication.
Design Consideration
The product designed for the art director needed to include a range of features. However, for the minimum viable product (MVP), I focused on three main categories of requirements: project assignment and tracking, product detail and scene setup, and export, validation, and communication.
Project Assignment & Tracking
Support for multiple users with authentication, Support for viewing and tracking the project launch status, Option for notification on project & task assignment
Project Assignment & Tracking
Support for multiple users with authentication, Support for viewing and tracking the project launch status, Option for notification on project & task assignment
Project Assignment & Tracking
Support for multiple users with authentication, Support for viewing and tracking the project launch status, Option for notification on project & task assignment
Product Detail & Scene Setup
Availability of project information, Ability to create, edit & export scene setup for rendering, Ability to search assets from library & place in a scene
Product Detail & Scene Setup
Availability of project information, Ability to create, edit & export scene setup for rendering, Ability to search assets from library & place in a scene
Product Detail & Scene Setup
Availability of project information, Ability to create, edit & export scene setup for rendering, Ability to search assets from library & place in a scene
Export, Validation & Communication
Support to add tasks to projects, Option to upload finalized images to tasklist & get approval, Support for commenting changes on visual assets
Export, Validation & Communication
Support to add tasks to projects, Option to upload finalized images to tasklist & get approval, Support for commenting changes on visual assets
Export, Validation & Communication
Support to add tasks to projects, Option to upload finalized images to tasklist & get approval, Support for commenting changes on visual assets
Creating an Ideal flow
Once I had a clear understanding of the underlying pain points in the process, I developed a new workflow aimed at addressing the existing drawbacks and streamlining the entire visual merchandising process. This new approach included quality checks and controls at each stage of product development, ultimately reducing the need for rework on visual assets.
Creating an Ideal flow
Once I had a clear understanding of the underlying pain points in the process, I developed a new workflow aimed at addressing the existing drawbacks and streamlining the entire visual merchandising process. This new approach included quality checks and controls at each stage of product development, ultimately reducing the need for rework on visual assets.
Creating an Ideal flow
Once I had a clear understanding of the underlying pain points in the process, I developed a new workflow aimed at addressing the existing drawbacks and streamlining the entire visual merchandising process. This new approach included quality checks and controls at each stage of product development, ultimately reducing the need for rework on visual assets.
Ideal Flow
Ideal Flow
Information Architecture
To meet the desired project requirements, I developed an information architecture that outlined the various modules within the application, the users who would interact with each module, and the use cases covered within each module. Additionally, I specified the information required at the component level for the screens.
Information Architecture
To meet the desired project requirements, I developed an information architecture that outlined the various modules within the application, the users who would interact with each module, and the use cases covered within each module. Additionally, I specified the information required at the component level for the screens.
Information Architecture
To meet the desired project requirements, I developed an information architecture that outlined the various modules within the application, the users who would interact with each module, and the use cases covered within each module. Additionally, I specified the information required at the component level for the screens.
Wireframes
Wireframing was the most engaging part of the process, as I was building the product from the ground up. I initially created paper sketches to explore various compositions for the screens, and later digitized them to assess how they would function within the constraints of tablet screen space. Since the product was designed for an iPad, I adhered to the Apple Design Guidelines. I then simplified the screens to align with the most viable product roadmap.
Wireframes
Wireframing was the most engaging part of the process, as I was building the product from the ground up. I initially created paper sketches to explore various compositions for the screens, and later digitized them to assess how they would function within the constraints of tablet screen space. Since the product was designed for an iPad, I adhered to the Apple Design Guidelines. I then simplified the screens to align with the most viable product roadmap.
Wireframes
Wireframing was the most engaging part of the process, as I was building the product from the ground up. I initially created paper sketches to explore various compositions for the screens, and later digitized them to assess how they would function within the constraints of tablet screen space. Since the product was designed for an iPad, I adhered to the Apple Design Guidelines. I then simplified the screens to align with the most viable product roadmap.
Proof of concept
All the screens were initially designed for a 2D space; however, the Studio required testing for 3D interaction, which was not supported by the software I was using, Bohemian Sketch. To verify the concept, I utilized a software called Set A Light Studio to explore and understand the interaction patterns.
Proof of concept
All the screens were initially designed for a 2D space; however, the Studio required testing for 3D interaction, which was not supported by the software I was using, Bohemian Sketch. To verify the concept, I utilized a software called Set A Light Studio to explore and understand the interaction patterns.
Proof of concept
All the screens were initially designed for a 2D space; however, the Studio required testing for 3D interaction, which was not supported by the software I was using, Bohemian Sketch. To verify the concept, I utilized a software called Set A Light Studio to explore and understand the interaction patterns.
Design Challenges
Research When I began my journey with the project, I had limited knowledge of the visual merchandising process within Urban Ladder. To bridge this gap, I conducted an extensive discovery phase, engaging with art directors, visual designers, and product designers to understand the process. My thorough research approach allowed me to navigate uncharted territory and address challenges effectively. A significant amount of time was dedicated to transcribing the interviews, as speech-to-text tools were not available during that period. Information Architecture I developed multiple versions of the information architecture as I continuously debated whether to incorporate complex interactions within the product, which could have positioned it as an alternative to tools like 3DS Max, Autodesk Maya, or Blender. The objective was to strike a balance between facilitating a quick learning process and maintaining an intuitive, simple learning curve. It was crucial to ensure that the terminology and language remained accessible to my key persona, the art directors. User Testing The design tools available at that time lacked the capability to support interactive 3D elements, limiting the functionality of interactive 3D prototyping. As a result, I sought an alternative method to test 3D interactions by using different software to analyze user interaction patterns. I recorded videos of art directors engaging with the 3D space and made observations based on their interactions. This challenge was overcome through diligent research and testing.
Design Challenges
Research When I began my journey with the project, I had limited knowledge of the visual merchandising process within Urban Ladder. To bridge this gap, I conducted an extensive discovery phase, engaging with art directors, visual designers, and product designers to understand the process. My thorough research approach allowed me to navigate uncharted territory and address challenges effectively. A significant amount of time was dedicated to transcribing the interviews, as speech-to-text tools were not available during that period. Information Architecture I developed multiple versions of the information architecture as I continuously debated whether to incorporate complex interactions within the product, which could have positioned it as an alternative to tools like 3DS Max, Autodesk Maya, or Blender. The objective was to strike a balance between facilitating a quick learning process and maintaining an intuitive, simple learning curve. It was crucial to ensure that the terminology and language remained accessible to my key persona, the art directors. User Testing The design tools available at that time lacked the capability to support interactive 3D elements, limiting the functionality of interactive 3D prototyping. As a result, I sought an alternative method to test 3D interactions by using different software to analyze user interaction patterns. I recorded videos of art directors engaging with the 3D space and made observations based on their interactions. This challenge was overcome through diligent research and testing.
Design Challenges
Research When I began my journey with the project, I had limited knowledge of the visual merchandising process within Urban Ladder. To bridge this gap, I conducted an extensive discovery phase, engaging with art directors, visual designers, and product designers to understand the process. My thorough research approach allowed me to navigate uncharted territory and address challenges effectively. A significant amount of time was dedicated to transcribing the interviews, as speech-to-text tools were not available during that period. Information Architecture I developed multiple versions of the information architecture as I continuously debated whether to incorporate complex interactions within the product, which could have positioned it as an alternative to tools like 3DS Max, Autodesk Maya, or Blender. The objective was to strike a balance between facilitating a quick learning process and maintaining an intuitive, simple learning curve. It was crucial to ensure that the terminology and language remained accessible to my key persona, the art directors. User Testing The design tools available at that time lacked the capability to support interactive 3D elements, limiting the functionality of interactive 3D prototyping. As a result, I sought an alternative method to test 3D interactions by using different software to analyze user interaction patterns. I recorded videos of art directors engaging with the 3D space and made observations based on their interactions. This challenge was overcome through diligent research and testing.
Project Learning
Product Company Working at a product company offers several advantages. It is fast-paced and provides ample opportunities for continuous innovation. Teams are highly agile and readily available for quick discussions on potential solutions, allowing for the prompt evaluation of their pros and cons. I gained valuable experience in reviewing my design solutions with the VP of Engineering and the VP of Product. Their feedback was instrumental in refining my designs and helped eliminate several unnecessary steps, as many processes could be automated in the back end. Feedback We held weekly design progress reviews, which provided the opportunity to present our progress to the then CEO of Urban Ladder, Rajiv Srivatsa. Receiving feedback from various business perspectives was highly enriching. Numerous iterations were made following this feedback, which significantly contributed to refining the process and improving its details.
Project Learning
Product Company Working at a product company offers several advantages. It is fast-paced and provides ample opportunities for continuous innovation. Teams are highly agile and readily available for quick discussions on potential solutions, allowing for the prompt evaluation of their pros and cons. I gained valuable experience in reviewing my design solutions with the VP of Engineering and the VP of Product. Their feedback was instrumental in refining my designs and helped eliminate several unnecessary steps, as many processes could be automated in the back end. Feedback We held weekly design progress reviews, which provided the opportunity to present our progress to the then CEO of Urban Ladder, Rajiv Srivatsa. Receiving feedback from various business perspectives was highly enriching. Numerous iterations were made following this feedback, which significantly contributed to refining the process and improving its details.
Project Learning
Product Company Working at a product company offers several advantages. It is fast-paced and provides ample opportunities for continuous innovation. Teams are highly agile and readily available for quick discussions on potential solutions, allowing for the prompt evaluation of their pros and cons. I gained valuable experience in reviewing my design solutions with the VP of Engineering and the VP of Product. Their feedback was instrumental in refining my designs and helped eliminate several unnecessary steps, as many processes could be automated in the back end. Feedback We held weekly design progress reviews, which provided the opportunity to present our progress to the then CEO of Urban Ladder, Rajiv Srivatsa. Receiving feedback from various business perspectives was highly enriching. Numerous iterations were made following this feedback, which significantly contributed to refining the process and improving its details.
Thank You
for reading the case study
Thank You
for reading the case study
Thank You
for reading the case study