first page.PNG

Project Overview

We created an ecommerce website platform proposal for Arnette, which is a part of the sunglasses giant Luxottica. This project was done while participating for the UX Design Master's Program at Talent Garden School.

Objective

The main objective of Arnette is to increase its global presence, establishing itself as one of the mainstream sustainable ‘street style’ sunglasses brand. Generation Z is the main target group, of course funky and fashionable millennials are also a target.

Problem

As Arnette products are not currently purchasable online on their site, most users get confused and leave after arriving to the website. The website also lacks important information about what Arnette is truly about mainly the sustainability side of their products. Also does not emphasize on the collaborations made with brand ambassadors.

The Solution

 

Creating an ecommerce platform that increases conversion rates and facilitates purchase. Having an online space that connects with the target group and emphasizes on what Arnette is, what they do and which values inspire and guide them.

Responsibilities

 
  • User research & Analysis

  • Persona creation

  • Customer journey, Sitemaps and User flow

  • Low fidelity Wireframes

  • Creating a design system

  • Hi-Fidelity Wireframes & Prototyping

  • Usability Testing

Tools

 

Miro         

 
 
 

Figma

 
 
 

Photoshop

 
 
 

Aftereffects

 
 
 

Project Timeline

 

Total of 5 weeks

The Process

The Design Thinking Approach

 


We used the design thinking process in the development of "Arnette" website, focusing on users’ needs and pain points on each step of the design process. Starting from an in depth research to creating sitemaps, customer journeys, wireframes, prototypes and user testing. Then repeating the cycle, when and where needed.

Empathize

 

We began by carrying out a detailed user research and Interviews in order to understand the users better and to have a better idea about their goals and pain points, when it comes to shopping online. Below is a summary of findings from desk and user research.

zz.PNG

Interview Takeaways

 

We conducted a moderated in person interview with 7 people belonging to the target Group. A set of interview questions were prepared, where the goal was mainly to understand how Genz shop online and what qualities were of utmost importance when it comes to making a final purchase.
 

  • Mostly use Instagram and Tik-tok as inspiration

  • Bold and bright colors that make a statement

  • Diversity and inclusion

  • Sustainability is a company-issue, not a single-person-issue

  • Very interested in Try-Ons and look books

“ If the products sustainable,

I wanna know how?”

“ I wanna see what it looks

like on me.”

“ Please not another app with a slow checkout! ”

Meet Ylvie and David

 

After understanding a bit better how our target group thinks, we created our personas Ylvie, who really cares about sustainability and the impact of fast fashion. On the other hand, David is obsessed with social media, fashion and everything that’s trendy.

pp.PNG

Define

 

In order to come up with a list of features for the app, we had to first define the best practices based on market research and competitive analysis by studying a variety of successful ecommerce websites. We then proceeded with creating a HMW hypothesis, Customer Journey Mapping, Site map and User Flow.

List of Main Features

 

After carrying out a competitive analysis, where we analysed 4 direct competitors and 4 indirect competitors, we then came up with a list of functions which were fundamental to the success of the app.

·        Face shape Scan & Guide

·        Customisation

·        Look book

·        Virtual Try-on

·        Environmental Impact Tracker

re.PNG

Customer Journey Map

 

We then designed a customer journey map based on the scenario, where our persona David, who is an 18-year-old student wants to find a cool pair of sunglasses that suit their face type.

cj.PNG

User Flow

 

Here we tried to define David’s user flow from arriving to the home page, to finding a product he likes, trying them on and then finally carrying out the checkout process.

Ideate

 

We Brainstormed multiple hand drawn wireframes based on various user scenarios and tested them among our group to find out if they really worked and to minimize the error before proceeding to digital wireframing.

How Might we?

 

How might we lure our customers from their social media feed to Arnette's website, without getting them too frustrated?

The answer...

 

Designing a website which looked like most social media feed, Instagram. I tried to focus on making the home page as close as possible to a social media feed. Hence, I added the stories feature, which would show stories that are also present on Arnette’s Instagram page. Adding a bottom navigation, was not just an accessibility choice but also consciously done to make it look and feel like an app.

A quick and simple checkout process to facilitate hassle free shopping experience, which will eventually increase the conversion rates.

Prototyping

 

We then created our digital wireframes to get a better feel of the website and to eventually start prototyping and begin the first user testing sessions.

Visual Style and a Design System

 

After having a better understanding of the users likes and styles together with the brief from Luxottica’s UX team we tried to come up with our mood board. Which represents Gen Z’s love for the diversity, statement images and text bound together with simplicity, neon colors and a dark theme. We used the same concept while coming up with our design system

Hi-Fidelity Mockups

 

Here are some screens from the Hi-fidelity mock-up screens showing the main features and most importantly the home page reflecting the social media feel

Contact me for a link to the clickable prototype

 

User Testing

 

We carried out both remote and in person user testing with 7 participants.

4 participants were from our target group (gen Z) while the rest were young millennials. We listed down all the pros and con’s and tried to solve them with various iterations and further user testing.

Iterations after Usability Testing

 
 

Shipping fees information was not clear during checkout process. The sustainability section and other vital feature’s such as the face shape scanner were hard to spot easily.

We added bigger fonts and symbols to give hierarchy

Shipping info
was a drop down menu

We changed it into a fixed segment showing clearly all the options

Sustainibility

segment lacks visibility

Main Takeaways

Things I have learnt from this project

 
 

Research is crucial.


It would be impossible to design a product for our target group without having a clear idea of their goals and their pain points. Conducting the interviews helped us to gain a different perspective into how Gen Z’s shop’s online and what really makes a product sellable in their eyes.

Testing! Testing! Testing!

Without constant testing, followed by iterations it would be impossible to deliver our product. The more we tested, the more user centered our prototype was. It’s also important to test with the stakeholders and the marketing team early on. Their advice helped us to make small iterations that could increase conversion rates.


Disclaimer:


We did this project as a part of student work from Talent Garden and Luxottica. This is a conceptual proposal.

This was my very first UX Design Project for a digital product. I really want to thank Talent Garden Innovation School for giving us the opportunity to work a conceptual project with real clients. I would also like to thank Luxottica for giving us the opportunity to develop this student project. And last but not the least my awesome group mates without whom this project wouldn’t be possible.
@Alfie @Alexandre