Reliby

Transforming the online eyewear buying experience

A case study examining the transformation of a brick-and-mortar experience into the virtual realm without any compromises.

Some context

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.

A market deep-dive

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.

The challenge

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.

My role

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.

Reliby founding team

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.

Research

Let’s have a look on how we researched a subject none of us had any idea how to tackle.

The Early Beginnings: Learning from Experience (V0)

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.

Solving the Problem Head-on (V1-V3)

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.

What a realistic experience is (V4)

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

Insights

Let’s see the most interesting things we learnt.

The solution, a blueprint

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.

Extended AR

To meet this requirement, the app must provide personalized data about the glasses, such as:

  1. Temple pressure: users must be informed about the pressure exerted by the glasses’ arms on their heads (loose, regular or tight) and advised against purchases of unfavorable cases.
  2. Tinted lenses: users must be informed about how the world will be seen through the tinted lenses of sunglasses, and how vision will adjust once the brain’s white balance changes.
  3. Weight: users must be informed if the glasses they choose are heavier than usual, ideally based on their past purchases on the platform.
  4. Bridge width warning: users must be warned if the bridge is too tight, too loose or just not suitable, which can lead to discomfort.

We developed special machinery to extract this information from physical glasses.

Other users: the providers

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:

  • Their products cannot not be mixed with other brands’ products.
  • Their customers should be able to try on the glasses directly on their website.
  • Their customers should be incentivized to purchase their brand if they installed 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.

Designing the app

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:

  1. Enter the store.
  2. Discover the glasses by looking, asking, or going directly to the model of interest.
  3. Have a more detailed look at some glasses.
  4. Try on the glasses, asking a friend present for opinion if needed.
  5. Repeat, until you are satisfied to buy, or leave the store.

How does this translate to the UI?

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

Raw
Discovery.
iPhone screenshot Reliby home screen showing a list of brands.

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.
Tailored
Discovery.
iPhone screenshot Reliby home screen: these glasses will look amazing on you.

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.
Direct to
try-on.
iPhone screenshot Reliby virtual try-on, showing a girl wearing AR glasses.

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.

Experiencing glasses

iPhone screenshot Reliby home screen showing a list of brands.
The product page.

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.

Photography

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:

  1. Consistent across all brands.
  2. Realistic, so there would be no difference between the image and the actual product.
  3. Beautiful, high-quality photography, to elevate the Reliby brand.
Photography sample, multiple high quality images of two different models of glasses.

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.

Screenshot quick information panel, containing FaceID compatibility, polarization, filter, and uv protection.

Clinical information

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.

Extended Virtual Try-on

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.

Augmented reality screenshots, both virtual try on, and how you will see the world wearing the glasses.
Temple pressure banner: The glasses should fit you well.

Extended Information: Temple pressure

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.

Adding social to the experience

iPhone screenshot sharing a virtual try-on.
Share it,
get feedback,
enjoy the process.

Seamless experience with the web and desktop

We designed the App Clip and Virtual Try-On button for easy interaction with the web.

The Try-On Button

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

Screenshot of the try-on button, with a QRCode and a button to install the App Clip.

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.

Learnings

  1. Everyone must work on design. A multidisciplinary team with a shared vision, passion for the product, while cooperating on design, can overcome any obstacle creating great products.
  2. Research is essential in uncovering user needs and identifying potential issues. Complementing such research with conversations with industry professionals and customers can yield invaluable insights.
  3. AR needs much more to shift users from traditional brick-and-mortar experiences. A try-on experience should provide customers with enough information to make a purchasing decision without doubts.
  4. Iteration is the key to achieving the desired level of user experience.

Thank you, to the Reliby team, as well as all those who have been enjoying the app.