Project - ARNETTE, Luxottica

Website for ARNETTE, Luxottica

Project Details: Worked with focus on the eye-wear brand ARNETTE in Luxottica to design a website with e-commerce for the Gen Z.

UX Research: Conducted Desk research and User interviews, generated User personas, Journey maps, Value propositions and User flows, and Analysis.
UX/UI Design: Generated Concept sketching, Lo-fi wire frame, and conducted a Feedback session on Lo-fi wire frame. Generated a Moodboard for UI, Hi-fi 　Mockup and Usability testing & interviews on Hi-fi Mockup.

My Role in the team: I am an UX/UI Designer with 3 another UX/UI Designers

Timeline:
May 2021 - June 2021 (one and a half month)

Solution Overview

Our solution is a re-design of ARNETTE in Luxxotica that aims to be more inclusive and accessible. We have therefore designed the following features to make it easy to use for a wide variety of Gen Z-centric users.

- Accessibility options
- Chat bot
- Our Impact (different from our story)
- Photo collection
- Instagram section
- Big emphasize on sales
- Easy log-in experience via social media
- Wearing glass test navigation
- Flexibility that the websites can promote new events and collaborations

Research

We carried out on-desk research to gain a better understanding of the Gen Z target audience, and then conducted a series of quality-focused user interviews. After this we generated user personas, journey maps and a value proposition.

Desk Research

We firstly carried out extensive research of Gen Z and competitive analysis mainly.

Our key findings are as follows:

- Gen Z surfing net from their palm of their hand.
- Visiting e-commerce websites to research products and build wish lists.
- They like to have freedom to Custmizetion and Personalization of their character, product, brand and game.
- 82% trust a company more if shows images of real customers in its advertising
- 72% more likely to buy from a company that contributes to social causes.

Source by:
BAYMARD
FORBES 2018
VISUAL CAPITALIST
NIELSEN NORMAN GROUP

Value Proposition

Gains:

- Cool & Trendy Design
- Nice packaging
- Virtual Mirror
- Customized glasses
- Instagram-worthy
- A description of sustainability
- An easy select and purchase process
- Being part of the Arnette community
- Buying as a gift on the website

Pains:

- Confusing search filter
- Virtual mirror unsupported in old phones
- Expensive to buy & fix
- May not fit your face
- No return of customisation glass
- Might forget where you put them
- Customised glasses are expensive
- Not being able to use Virtual mirror for a surprise gift

Our Analysis & Understanding

And after a close discussion of our respective understandings, we came to the following definition of design before we went on to the next stage of the process:

- Prioritise the mobile website for Gen Z
- Customisation Section, is essential for Gen Z
- Sustainability Section, is one of the main options, mostly Gen Z going for it.
- Usability, Gen Z are goal-oriented and don’t surf the web aimlessly
- UI needs to be easy to scan, no dense content, no tiny font sizes and strong navigation schemes.

Wireframes

Along with the above Features and Site map, we started to sketch and created Wire flames. I was mainly in charge of the Payout & Sign section, with the team exchanging ideas in real time always.

△ Payout & Sign in (My main responsible feature)

△ Product Page

△ Find your Glasses

△ Chatbot

Feedback Session on Lo-fi Wireframe

Next, we asked another 4 people remotely for a half hour each to give us feedback on the Lo-fi wireframe we had made.

Our key findings from these Testing & Interviews include:

- Some people don't want to connect with own SNS for Sign in
- Should have the "create account button" for the first screen of the Sign in page
- Nice to have the pictures of "own face shapes" in quiz
- The product size and colour should shown in the shopping bag
- The product information should stand out for the overview in Payout

Mood board for UI

We created this mood board to match the client's desired colours, graphics and style image, as well as the target Gen Z user.

And together with improving on the great feedback and UI mood board, we created the Hi-fi Mockup and did Usability Testing & Interviews next.

Usability Testing & Interviews on Hi-fi Mockup

We have asked another 4 people to carry out usability tests for Hi-fi Mockup we have created on remotely.

Executive summary below:

- Check out process has completed successfully by users
- Terms are not clears: The word of the "Try on" (The feature to try glasses through camera lenses online) is not clear.
- Information is not clear for Sustainable packaging on the product page.
- UI Design speaks to the target group (Gen Z) well. But It was hard to understand that company's smileys icon related to sustainability.

Based on these findings, we have developed a Final Prototype which reflects the following.

△ Top Page
- The smiley icons and sustainability was clearly expressed.
- Payment method icons are now displayed on the top page.
- The use of the graphic of the popular Gen Z's influencer & ARNETTE ambassador as the first graphic and the offer information.

△ Product Description Page
- In addition to reviews, information about the materials used to make the glasses and their sustainable packaging can be found.
- Can see other recommendations for the glasses they have chosen.
- From this page you can also use the feature "Virtual Try On" (4th picture) and create your own "Customising glasses" (5th picture).

△ Pay & Sign in Page
- From the shopping cart you can see the product information well
- The number of days required for shipping is cleared and can choose also the express option.
- The option to buy as a guest first, as many users do not like to create an account or link to their social network.
- Encouragement gently to create an account after purchase again, with only a password to be filled in once.

△ Find your Glasses
- A clear description of the glasses that will suit you, which you will get by this quiz (1st photo)
- A skip button for questions you don't want to answer
- Display of graphic examples of face shapes and frame palettes

△ Look Book/ Our Story (Mostly about Sustainability)/Accessibility/Chat Bot
- Can see the product information by Look book directly on your shopping card (1st & 2nd picture).
- A detailed and not too much explanation about sustainability glasses (3rd picture).
- The inclusion of accessibility features to suit different needs was well received in usability tests(4th picture).
- You can also make a call from a chatbot with several sections available(5th picture).

Reflection

Thank you so much for seeing us through to the end of this journey.

Gen Z s digital natives, they have a really sharp point of view and cannot be fooled by small tricks. In this context, we have been able to work with integrity and respect for them. We have particularly succeeded in designing the product pages and payments easy to understand and smooth, as well as the "Look Book" and the "Find your Glasses", which get a great response every time we show them to Gen Z. I am proud of the fact that we were able to put our own perspective to the side and create a design that puts the Gen Z at the centre.

There were 4 of us in the team, and while I was involved in the whole process, I think I was able to help in a collaborative way, especially in my areas of expertise, such as listening to and compiling interviews, coordinating details. I thank the team for working together and using our strengths to create a very comfortable and sustainable working environment!:)