top of page
Search
Writer's pictureX —iO

The Journey through an Eyewear e-Commerce.

Website project for an existing Eyewear shop.

by X.io, ux|ui learning journey at IronHack


PROTOTYPE


Who wears them? What for? Where? and How to buy it?

Following the basics of UX, a group of four, including me, walked through a journey of eyewear e-Commerce. Giving the first step, I found fascinating and inspiring the words of the business owner. No doubt that his passion and care for people kept his business alive for decades without an online presence. When he was asked about the objectives of his business, he replied:

...to be the best option. After all the crisis we' ve had, the pandemic, all the economic problems.... The main objective is that the people continue trusting us... I mean, we have been here for 28 years now, and there is no doubt that everyone wants to grow... but for me the goal is to continue being there, providing a familiar service, close to the people. Of course I would like to grow, but I value much more to continue helping people.

And, to simply justify the statement above, it only takes a click on google's 4.9 ✭ reviews.


RESEARCH & BUSINESS ANALYSIS

 

Statista shows that the revenue in the Eyewear market amounts to US$1.90bn in 2022; being this 3.9 pieces per person, and it is expected to grow annually by 10.53% (CAGR 2022-2025).

However, 83% of sales in the Eyewear market will be attributable to Non-Luxury goods. In a few words, there is definitely room for growth.


Statistics also show that 76% of people over 44 wear glasses, women are more likely to wear them than men, and as people age, the glasses don't go away.



On the other hand, primarily, our users' interviews depicted the essential needs of eyewear buyers:

  • 100% Searched for eyewear online before going to the store.

  • 100% Used the internet to find the store's information and catalogs

  • 75% Relied on reviews and advice on which products were trending before purchasing

  • 100% Want to try on or see the glasses on their faces before buying.

THE PROBLEM

 

The online store aims to achieve high sales. We have observed that the products are not briefly displayed for potential clients and they cannot visualize themself wearing the product, therefore is not meeting the users' needs of searching for specific preferences, which is causing losing sales to our competitors.


THE SOLUTION

 

Design a Website, which reflects the values of the business. An online product catalog. Easy way to purchase.

3D Try-now feature to help users visualize themselves wearing them.

Live chat or video call with experts & appointment calendar.


SITE MAP

 

Tracing the map for a comfortable journey can be quite confusing and time-consuming. What we usually perceive in colors and familiar shapes, such as icons, well here is nothing more than words. However, if well done, I noticed that this graph could save work hours making changes after changes as the prototype evolves.


LO-FI --> from a bunch of text to the fun part.

 

From my perspective, sketches can get the best out of someone's imagination without the constraints of technology or a sense of proportion.

Although it is meant to be done in no more than 2 minutes, I personally like to spend some time and let my imagination and hand flow without limitations.

I first write down some keywords from the shareholder, interviewees, research, and the business name (if it already exists), and use them as inspiration for a design concept development.


MI-FI --> from paper to the screen

 

This part took us probably about four times the time it could take; therefore, I can only recommend managing the software because it can save you precious time during the mi-fi and hi-fi drafting.

I found the mi-fi version great to test usability. On my first usability test, I failed miserably. I pretty much told the user where exactly to tab or click. However, on the second project, I asked the user to reach a specific goal and guided the person with simple questions such as: if you need to purchase a pair of glasses, maybe round and full frame, where would you start? It really showed me that no matter how clear the path can be for some people, it is not for others. With this outcome, the best choice would be to analyze as many people as possible and understand each one of their moves to design a product as friendly as possible.


BRAND ATTRIBUTES --> time to play with colors

 

Since the brand is pretty much defined by what others say or feel about the business, the concept board was developed based on the words found in the reviews of the company and it goes as follows:

friendly, helpful, professional, trustworthy, and familiar.



Using Coolors.co we were able to define color palettes from the images collected. Since the images represent the list of words mentioned by current clients, the colors generated from them, may as well serve as the business identity. Several options from the same board were generated and applied to version 1 and version 2 of the prototype respectively.

Hi-Fi Prototype --> achievements

 

v1 --> as a group outcome we developed the following result by applying the following generated brand colors ◼︎◼︎◼︎◼︎◼︎◼︎ color palette link Prototype link

v2 --> a personal approach and challenge searching for a modern and inviting look after endless Figma tutorials online. From the same branding concept board, a second brand color palette was generated, being the primary color a hexadecimal code #3c9088 which is a medium-dark shade of cyan. ◼︎◼︎◼︎◼︎◼︎

Cyan is a relaxing and inspiring color that evokes images of crystal waters and is usually associated with liveliness, tranquility, youth, and energy. It is made of green and blue and represents rationality and cleanliness.

Rationality and cleanliness, are well-stated for those who wear prescriptive glasses. However, going back to one of the top questions "what for?" well, having a clear vision conveys tranquility, while a collection of sunglasses are more likely used as summer fashion accessories for a fresh look.

The final design, still with a lot of room for improvement at a glance.


by X-IO, ux|ui learning journey at IronHack












Comments


Commenting has been turned off.
bottom of page