App for Eyewear Marketplace

What is Specscart? What do they do?

Specscart Britain’s provides finest spectacles frame & designer glasses online with free anti-glare anti-scratch,anti-UV and shock resistance glasses,and Delivered Safely at your Doorstep within 24 Hours Dispatch with 30 Days Returns policy.

Now you might be wondering that a spectacles frame & designer glasses online website isn’t a new concept altogether, but what is it that makes Specscart different?

When Specscart had approached us, they had an offline business but they wanted to get into eCommerce to expand the scope of their business. We developed a website for the company. Whilst the spectacles frame & designer glasses website was made from scratch by us.

The context that led to the onset of the spectacles frame & designer glasses online service project –

For working lads who’re buried head-to-toe in work from 9 to 5, going out to shop for spectacles frame & designer glasses is often a task. Forget going out, in addition to looking for the best quality, you have to sometimes just accept the fact that it’s not possible to bargain everyday for the right price and just jump on to the very first few deals that you manage to get.

Spectacles frame & designer glasses online service was an idea, aimed exactly at reducing that effort of the customers, by offering the home delivery option, where virtually anything, be it Eyeglasses, Sunglasses, and Contact Lenses for men, women, unisex and kids  – they would be available at just a single click!

How will it Operate: 

When a customer Registers for the First Time on our Website as a new account from an unregistered Email/Facebook or G+. He will be able to access this offer.


  • The Customer comes to our website – Registers as a New User 
  • The Registration Card Rotates & becomes a Pop-Up – With a Call to Action Button Avail Offer.
  • The customer will either Avail offer or Decline the Pop-Up.

Case 1: Customer declines the pop up

In this case he will be at the page where He is at. If He was at Home Page, He will be able to surf the website normally and buy products normally. 

But He will Still be shown a Free First Frame Avail Card as he has not used the offer. If He has not used the offer, that card will be prominent on 

  • Home Page.
  • Product Listings Page.
  • Button on Product Description Page.
  • Top-Purple Bar. 
  • Selecting Free First Frame from filter categories option (Option on Product Listing Filters).
  • Selecting Free First Frame from Main Drop-Down.

Case 2: He Avails the Offer 

Either By 

  • After Declining Pop-up, Clicking on the Avail Free first frame offer Card through Home Page
  • Directly accepting from Pop-Up
  • After Declining Pop-up, Clicking on Top-Purple Bar
  • After Declining Pop-Up Clicking on the Avail Free first frame offer Card through Product Listings Page
  • After Declining Pop-Up Clicking on Free-First Frame through Main-Drop-Down
  • After Declining Pop-Up Clicking on Free-First Frame through Selecting Filter on Categories Product Listings Page.

In all these Cases, He will be Sent to 

The Product Listings Page with Filter for Categories selected as Free First Frame (Note: this will reset the other filters of offers (only offers not men/women shape etc.) as Free First Frame cannot combined with any other offer)

The Offer of Free First Frame will be highlighted on the products, The filter will be selected. (Price filter can become slightly grey as it won’t be valid ). The Frames price will be strikethrough and put as £0 or FREE. more on the same offer without checking out*. 

 Please see the designed image:

The Customer will click on the product from this page, Go to the Product listing page – Click on Buy & Select Lenses or Free First Frame button and will be directed to Different lens checkout, as mentioned above at the start. He will then continue to add product to his Cart. 

The challenges in the website development –

While developing an website for an already well-performing offline Spectacles frame & designer glasses chain, the only major challenge for us was, to stand up to the expectations of the client with this key entry to the mobile-based-eCommerce industry. They initially wanted to target local competitors. In addition to that – UX had to be designed keeping in mind their pre-existing logo, website colour-scheme and font formats.

The aim was to build a website by keeping in mind the competitors website. The logo was already available and was provided by the client, so the colour schemes could be defined easily. By referring to the colour combination and the website, the font styles and the user experience was finally locked and passed on for development. For eCommerce solutions, and 2019 trends, we develop websites for them.

Coming to the development, the primary challenge was still there, We were asked to make a website which can be user friendly.Also, we had to adhere to what the client already had in mind and want to include in the website. By keeping those elements and modules intact, we had to enhance it even more to give the user and the client a memorable experience.

Our Insight for the Client –

TranciscoLabs wanted our users to experience a seamless, bugfree UI that would make them come back to place orders from the website, instead of going out to the market. We advised the client against going for the same model as other competitors prefer. Our argument was based on these facts –

Since localites comprised tier-2 city citizens, most of them wouldn’t be comfortable on an extremely tech-savvy website.

For most users, a complicated purchasing method isn’t a viable option. In case the website doesn’t load within 3 seconds, they choose to opt out and not go any further with the process.

We wanted the client to act global, but think local for the project to succeed. We suggested they integrate local language in the website as well. They went ahead with our suggestion!

Development Model –

The approach that was used was the waterfall model. It took a team of 6 of our employees, hired on a dedicated hiring model by us.The requirements were understood by the sales team initially, and were then provided to the design team. After all the layouts had been created, it was the task of the developers to implement it.

Backend developers were working on the principle of modularity. The entire system and website components were divided into modules in order to carry out tasks on various elements at the same time without affecting the work of the other. Dividing the entire project into modules allowed various developers to work on the project at the same time in order to reduce the burden of doing the task on a single developer and in turn, reduce the time required to complete the project and hand over the product on time.

The Information Architecture –

As mentioned earlier, the website was made from scratch.The Magento e-commerce platform is used for website development. It uses multiple other PHP frameworks such as Laminas and Symfony, a relatively new technology in the industry. Magento Commerce is an eCommerce platform as a service.

Magento DevBox is a Docker container that allows for the easy installation of the latest Magento 2 CE or EE platform in a virtual environment.It also allows developers to link to an existing local Magento 2 installation.

Wireframe –

During the designing phase of the project, tools like Photoshop and Illustrator were used. The primary reason for using them was to get access to a whole lot of features that are available for designing various elements of the overall project. Using such software and tools reduces the effort to make the core components of the project. This is because some of the components are already available and can be reused with ease without a lot of hassle.

Talking about the development phase, various tools were used by the web developers to create what the designers had set in front of them. Usually, it’s the IDEs that are used in order to make it easy to code to get the desired result.

Perform User Testing

Building an eCommerce website requires doing a lot of guessing about what people will respond to. Even if you work really hard to put your potential visitors first and try to design the site based on how you think they’ll behave, you won’t get it all right on your own.

Before you launch, do some website usability testing Bring in some other people who can look at your website with fresh eyes. Have them take the steps on the site you most want your visitors to take – like creating an account, making a purchase, and signing up for the email list. They can provide honest feedback about any difficulties or inconvenience they experienced.

Their feedback will enable you to make any last minute tweaks needed to correct problems you didn’t know how to see yourself.


The process included- adding items in cart, choosing address, selecting time of order, payment method and.. Voila! Placing the order. Also, notification center – to get the latest promotional updates and the order status.

The business potential of the client’s brand name has been done justice to, by being complemented with this seamless online spectacles and glasses shopping website. The user outreach of the brand has grown massively since the launch of the website. Old, as well as new users have forgotten about the hassle of going to markets or vendors, bargaining and working hard to get the best deal for the products they wish to buy. Now, online spectacles and glasses shopping is just one click away!

Have a project in mind? Let’s get to work.

At Tranciscolabs, we’re dedicated to delivering innovative solutions that propel businesses forward in the digital landscape. With a focus on cutting-edge technology and user-centric design, we strive to exceed expectations and drive success for our clients. 


Powered By Trancis

Trancis Group

© 2024· Trancis Group · Trancis.Com |