Virtual Spectacles Try-on
Budget: $400 – $500 USD
NOTE: Frames = Spectacles in description below
Virtual Frame Try-on
• Summary
Aim of the system is that a user will be able to select frames based on their face shape and the do a virtual try-on. They can then also save or share this image via WhatsApp.
• The portal will be developed in PHP/MySQL
• System will work on both Computers, Tablets and Smart Phones
Front-End
We will start by showing the user a page with additional info on the various face shapes and a guideline on how to select a frame for your face. This will all be static HTML. Under it all we will show a button called “Start your Virtual Try-on”
The user will now be guided through a couple of steps to try on the frame.
• Step 1: The user must select their face shape.
• Step 2: User select Male or Female (This will be two images, one of a man and one of a woman)
• Step 3: Select if you want to view Sunglasses or Scripted Frames
• Step 4: Based on their selection in step 1 and 2, we will now show them a list of all the frames that is suitable for their gender and face shape
• Step 5.1: Once they have selected a frame, we will take them to a new page with the frame info on, Name, Model, Colour, and this is also where the user can now try on the frame. By default, we will show a generic image of person they can try it on with. They can also select to upload own image. The upload options will be Upload from Phone/PC or TAKE ‘Selfie’ – please note: We will have to make provision for the user to select either their FRONT or BACK cameras.
• STEP 5.2: On both the generic and custom photo they can now move the frame around and resize it (image ratio to be maintained) on their face. Once they are happy with it, they have option to
• Step 5.3 Save Image or Share on WhatsApp – With both these options the system wil save the custom image on the server. Before they can save/share the image, we will ask for their Name, Email, Phone – NONE of these options are compulsory, so if they don’t supply it, they can still save or share the image.
• STEP 6: The user can now go back to the frames and repeat step 4 – step 5.3 for all the frames.
Sample of sites doing something similar to the virtual fit is listed below. Please note some have option where it tracks the face movement via Video, we will NOT do this, we upload an image and then move the frame around on the face:
https://virtualtryon.softprodigy.in/product/product-2/ and https://the-sales-booster.com/Eyewear/product/zero-ox-8076-03/ and https://dugudlabs.com/product/specfit-platinum-demo-product-3/
Admin Portal
Within the admin portal you will be able to assign frames to a certain face shape. The face shapes will be pre-loaded, and you can then simply assign a frame that that shape when you load a frame. FACE SHAPES will be:
• Oval, Round, Heart, Triangle, Oblong, Square, Diamond
Options under FRAMES menu item will be:
• View/Edit Frames
o A list of all your frames will be shown here, sorted Alphabetically
o You will be able to search for a frame by name
o You can also filter frames by FACE SHAPE
• Add Frames
o When adding a new frame, we will collect the following detail from you
Select FACE SHAPE
Select GENDER
Select Type (Sunglasses/Scripted)
Frame Name
Frame Model Number
Frame Colour
Upload Frame
When you click on SAVE, the frame will immediately be available on the system to try-on.
User Data Menu Item
This is where we will display the data of the users who saved or shared their image. We will have a basic screen, in date order with the users Name, Email Address, Contact Number, Frame Details (Name, Model, Colour) and Image. The image preview must open in a Modal popup. There are no additional info pages per user. The data must be filtered by Data Range if needed. This data can be exported by date range to an XLS sheet which will NOT include the image of the user.
Manage Profile Menu Item
This is where you will be able to change your username/password to log in to this admin portal.
Virtual Frame Try-on
• Summary
Aim of the system is that a user will be able to select frames based on their face shape and the do a virtual try-on. They can then also save or share this image via WhatsApp.
• The portal will be developed in PHP/MySQL
• System will work on both Computers, Tablets and Smart Phones
Front-End
We will start by showing the user a page with additional info on the various face shapes and a guideline on how to select a frame for your face. This will all be static HTML. Under it all we will show a button called “Start your Virtual Try-on”
The user will now be guided through a couple of steps to try on the frame.
• Step 1: The user must select their face shape.
• Step 2: User select Male or Female (This will be two images, one of a man and one of a woman)
• Step 3: Select if you want to view Sunglasses or Scripted Frames
• Step 4: Based on their selection in step 1 and 2, we will now show them a list of all the frames that is suitable for their gender and face shape
• Step 5.1: Once they have selected a frame, we will take them to a new page with the frame info on, Name, Model, Colour, and this is also where the user can now try on the frame. By default, we will show a generic image of person they can try it on with. They can also select to upload own image. The upload options will be Upload from Phone/PC or TAKE ‘Selfie’ – please note: We will have to make provision for the user to select either their FRONT or BACK cameras.
• STEP 5.2: On both the generic and custom photo they can now move the frame around and resize it (image ratio to be maintained) on their face. Once they are happy with it, they have option to
• Step 5.3 Save Image or Share on WhatsApp – With both these options the system wil save the custom image on the server. Before they can save/share the image, we will ask for their Name, Email, Phone – NONE of these options are compulsory, so if they don’t supply it, they can still save or share the image.
• STEP 6: The user can now go back to the frames and repeat step 4 – step 5.3 for all the frames.
Sample of sites doing something similar to the virtual fit is listed below. Please note some have option where it tracks the face movement via Video, we will NOT do this, we upload an image and then move the frame around on the face:
https://virtualtryon.softprodigy.in/product/product-2/ and https://the-sales-booster.com/Eyewear/product/zero-ox-8076-03/ and https://dugudlabs.com/product/specfit-platinum-demo-product-3/
Admin Portal
Within the admin portal you will be able to assign frames to a certain face shape. The face shapes will be pre-loaded, and you can then simply assign a frame that that shape when you load a frame. FACE SHAPES will be:
• Oval, Round, Heart, Triangle, Oblong, Square, Diamond
Options under FRAMES menu item will be:
• View/Edit Frames
o A list of all your frames will be shown here, sorted Alphabetically
o You will be able to search for a frame by name
o You can also filter frames by FACE SHAPE
• Add Frames
o When adding a new frame, we will collect the following detail from you
Select FACE SHAPE
Select GENDER
Select Type (Sunglasses/Scripted)
Frame Name
Frame Model Number
Frame Colour
Upload Frame
When you click on SAVE, the frame will immediately be available on the system to try-on.
User Data Menu Item
This is where we will display the data of the users who saved or shared their image. We will have a basic screen, in date order with the users Name, Email Address, Contact Number, Frame Details (Name, Model, Colour) and Image. The image preview must open in a Modal popup. There are no additional info pages per user. The data must be filtered by Data Range if needed. This data can be exported by date range to an XLS sheet which will NOT include the image of the user.
Manage Profile Menu Item
This is where you will be able to change your username/password to log in to this admin portal.