A case study examining the transformation of a brick-and-mortar experience into the virtual realm without any compromises.
The eyewear industry has remained largely unchanged for the past 100 years. When shopping for eyeglasses or sunglasses, consumers still typically visit a brick-and-mortar store, try on a number of frames, and then purchase. If a prescription is needed, customers may have to wait a week or more for their glasses.
In 2019, brick-and-mortar stores still accounted for over 79% of eyewear sales. Interestingly, there are more brick-and-mortar eyewear stores than ever before. This is in stark contrast to other retail markets which have seen a decrease in the number of stores.
Some companies, such as Warby Parker, have tried to disrupt the traditional eyewear shopping model, but ultimately have become a brick-and-mortar retail business.
Traditional brick-and-mortar eyewear stores remain dominant despite potential for disruption, and more competitive and diverse offerings from independent online-exclusive eyewear brands.
The proliferation of brick-and-mortar stores and the slow rise of online alternatives can be attributed also to the monopoly of Essilor-Luxottica.
A company that owns the most popular eyewear brands, retail stores, EyeMed, and the largest optical lenses supplier. Translating in a 75% of the global eyewear market.
We sought to address the issue users face when purchasing glasses, where the best choices are often found online, yet they are still obligated to visit overpriced and limited brick-and-mortar stores.
Deliver an effortless and enjoyable experience that makes users feel confident when buying glasses online.
Ship a good experience using continuous feedback to keep improving and understanding the best ways to buy glasses online.
When I co-founded Reliby in 2019, my goal was to create a multidisciplinary team of passionate and creative minds, eager to make a real difference in the world of eyewear retail. Our mission was clear: to help people buy eyewear online. We had no clear idea of how to do it, but we saw the opportunity, and we were ready for the challenges that lay ahead of us.
I took on various roles, as is common for an underfunded startup founder, from developer to Product Manager, but Lead Product Designer is the one I enjoyed the most.
We all worked as Product Designers. Each member of the team was their own army, doing tremendous work and coming up with unique ideas in many different domains. Product Design was no exception. I focused on crafting the user experience, the visual appearance, and ultimately the overall experience; however, we all shared our understanding, ideas, and feedback, which later became the incredible products we developed.
This case study will illustrate how we moved from research to implementation, and what we learnt along the way.
Let’s have a look on how we researched a subject none of us had any idea how to tackle.
Carlos and I (the co-founders) had been discussing for years the idea that a physical experience when buying sunglasses was often more rewarding than one online.
After many informal conversations, we were finally able to come up with a concrete plan to make it happen: allowing people to use augmented reality to try on glasses. This became the foundation for Reliby.
Although we were initially off about the specifics with the beta, we were able to gain a better understanding of the problem by forming a team and working on it exclusively. This allowed us to make the necessary adjustments and move forward.
Having built the initial version of the Virtual Try-On, we quickly discovered that users felt uncomfortable with it. The mirror was not “realistic enough”. So, we set out to make the experience more lifelike. We added reflections, photorealistic lenses, and simulated the lighting to match the user’s environment.
Despite our efforts, the mirror still wasn’t “realistic enough”, even though a third of users instinctively tried to adjust the glasses on their face during the virtual try-on, only to realize the glasses weren’t actually there. Although the virtual mirror was quite realistic, people still felt uncomfortable.
Nevertheless, this was enough to motivate us to continue working on the problem.
We soon realized that we weren’t fully understanding what “realistic” meant, but it took us a lot of effort to comprehend and create a way to convey the information through a screen.
For months, all the team collaborated to identify issues with online shopping and how physical stores solve them. To gain insight, we visited stores to purchase glasses, interacted with customers, and had coffee with the store staff. We wanted to figure out how to surpass the brick-and-mortar experience.
We spoke with independent retail store owners to learn about their work, challenges, problems, and costs. We didn’t even know how glasses were manufactured when we began, nor how prescriptions were made and glasses were assembled. We consulted with independent eyewear brands that sell exclusively online to learn about their struggles.We conversed with anyone who knew anything about glasses or had bought glasses online and wanted to talk with us.
In this way, we were able to develop a user map of what people think when buying glasses in stores and online. We discovered a multitude of micro-experiences that trying eyewear in person provides, but the majority of people aren’t aware of and miss if they’re not available.
Finally, we solved the second level: “Extended Augmented Reality”.
Let’s see the most interesting things we learnt.
The key to successful online eyewear sales is to provide customers with the ability to try on the glasses, without this, the online experience feels empty to users.
There are other important details to consider, such as comfort on the nose, pressure on the temples, how the tinted lenses affect vision, and whether FaceID works with the glasses on.
Shopping for eyewear is traditionally a real-life experience, so customers need to feel like they are actually trying on the glasses as well as having them on hand.
Medical safety is also an important factor for customers to consider. They need reassurance that the glasses they are buying are safe and suitable for their needs.
Users should also be provided with recommendations on which glasses look best on them. In-store staff can help customers choose from hundreds of options, and online systems should be able to offer the same level of support.
Customers are used to buying glasses that they like in the moment and enjoying them right away, with no intention of returning them. This instant gratification and assurance must be replicated in the online buying process.
Online eyewear shopping should be a fun and enjoyable experience. The traditional in-store experience can often leave customers feeling uncomfortable, with glasses behind locked displays and unhelpful staff. New stores are attempting to give shoppers more freedom when choosing their glasses, but still lack certain liberties, such as the ability to take silly photos with wacky frames.
An app that enables users to experience and purchase eyeglasses with assurance, using Augmented Reality. Research and earlier versions have demonstrated that a mere mirror image of the user wearing the glasses is not enough, so additional information is provided to make users feel secure.
To meet this requirement, the app must provide personalized data about the glasses, such as:
We developed special machinery to extract this information from physical glasses.
The app must also be advantageous for the brands providing the products. It should create a hub that brings together independent eyewear brands that are not available in physical stores, giving them the first opportunity to sell their products competitively and allowing customers to try them on as if they were in a store. The brands come with certain requirements to the app:
We decided that the best solution for our small team was to leave the purchase process in the hands of the brands, so that we could focus on building our platform and growing our business. Leaving a lot of complexity out for development.
The main theme of the app is the content, all interaction and visual elements should not relinquish attention unless their are critical to guide the user journey.
Store-Like Shopping Experience
We structured the user journey to replicate that of a physical store:
In essence, we decided to keep the same conceptual structure as an in-store experience, splitting each step of discovery into a new screen of the app so that it could relate to individual actions within the store. We wanted users to feel as familiar and comfortable as possible; thus, looking at the glasses on display should be one screen, picking them up to see them in detail should be another, trying them on should be yet another…
The user can browse the entire catalog, not quite as efficient as a tailored recommendation but it does give a sense of the scale of the app and its offerings.Evoking the feeling of entering the store and gazing at the displays.
The user receives tailored recommendations for glasses that are likely to suit them best.Just like asking the staff for help in finding glasses that fit you perfectly and complement your style.
Coming from our website or a brand’s website, the user can bypass the discovery process and go straight to trying on the glasses.You know exactly what you want, so head straight to the store to try on the glasses and see how they fit.
Search Discovery was left behind. User research showed that users would typically search for well-known brands and trademarked styles, on a catalog of independent brands and different models, users found it difficult to locate what they were searching for.
The product page is simple and minimalistic, with an emphasis on the product.
The buy button is given a secondary treatment, as we want our customers to try on the glasses to ensure they fit well. Only if they like them, we want them to notice the buy button.This approach helps us build trust and a positive experience on the platform.
Using the manufacturer photography wasn’t an option, as not only was the design not consistent across different brands, but the quality of the photographs also varied greatly.
We found that even with great products and resources, some brands were unable to provide appealing images. There were also issues with reliability on color reproduction, particularly with the lenses.
For these reasons, I decided to create our own imagery, ensuring that it was:
To achieve our quality objectives while maintaining the scalability of the project, we opted to generate the images using CGI. We reused the 3D models originally created for the virtual try-on and automated their rendering. This enabled us to produce the best product images with no extra effort.
Just like an optometrist, but with simple, down-to-earth explanations that anyone can understand.
We designed a PayPal-like guarantee for Reliby, becoming a third-party that independently evaluates the safety of the glasses manufactured.
Applying the insights gained from our research, we supplemented the virtual try-on experience, wherein users can view themselves wearing the glasses, with additional complementary experiences and information to bridge any gaps left by the virtual experience.
A visual representation can be used to demonstrate the pressure that real glasses exert on the head, allowing the user to understand how such information can be provided and addressing any skepticism.
We designed the App Clip and Virtual Try-On button for easy interaction with the web.
We devised a system where a QRCode can be scanned to install a light-weight App Clip just for trying on the glasses with an iPhone, creating a seamless user experience (if you have the Reliby app installed, it will take you directly to the glasses on the app).
Taking advantage of the computing power available on smartphones and the higher quality of iPhone cameras compared to webcams, we chose a great experience on iPhone rather than a sub-par one on web.
This button can also be installed on the brand’s websites.
Thank you, to the Reliby team, as well as all those who have been enjoying the app.