Arnette | Alexandre Woelflé

Arnette: a webshop for sunglasses made for GenZ

Background

The following project was the mandatory group project that has been assigned during the bootcamp. We have been three members to work on it, each of us working on the different project stages. The company Arnette required us to design an interactive mock up for their web shop.

The whole project's duration was about 7 weeks.

Main priorities

- Target: Generation Z

- Emphasis should be made on sustainability and eco friendly products

- Positive and young image

- Sun and optical product catalogue

- Editorial shoppable lookbook

- Special features

Milesstones

1. Market and competitor analysis

2. Requirement analysis

3. Ideation and low Fidelity wireframing

4. High fidelity mockups

5. Interactive Prototyping and testing results

Market and competitors

1. General research

2. UX/UI Research

3. Best practices

On web and app

- big and bold pictures

- Statement fonts

- easy navigation and swipe culture

- Social media feel and look

Usability and user flow

- Intuitive and user friendly

- mobile friendly

- Use of logos and icons

- Clear menu overview

- Easy to access

- Simplified information

Sustainability

- Enmphasis on material

- Focus on recycling / up cycling

Capture d’écran 2021-11-29 à 15.15.17.png

Capture d’écran 2021-11-29 à 15.12.21.png

Capture d’écran 2021-11-29 à 16.37.09.png

Capture d’écran 2021-11-29 à 16.37.02.png

Capture d’écran 2021-11-29 à 16.36.47.png

Capture d’écran 2021-11-29 à 16.37.17.png

Capture d’écran 2021-11-29 à 16.37.50.png

Capture d’écran 2021-11-29 à 16.37.26.png

Capture d’écran 2021-11-29 à 16.37.39.png

Requirement analysis

1. Target user research: Gen Z

2. Interviews

Amount of participants: 5
Age: 18-24 years old
20-25 questions

3. Personas

4. Customer journey map

1. Main features

- Face shape scanner

- Customization

- Lookbook

- Virtual try on

- Environmental tracker

2. Site map and user flow

3. From sketching to low-fidelity prototyping

1. Design system

2. User scenario

3. Main features

- Homepage

- Customization

- Face shape scanner

- Virtual try-on

- Environmental tracker

- Lookbook

1. Interactive Prototyping

2. Usability testing

Amount participants: three
Age: Generation Z
Type: Hifi interactive prototyping
Tasks: navigating, ckecking out and using all functions

Things that worked well:

Check out process went flawlessly
Aesthetics are pleasing to the eye
Easy and intuitive navigation
Clear product overviews

Things that did not work so well:

Too much text and information was overwhelming
Missing shipping information at check out
Sustainability should be shown more clearly
Issues getting to the designated pages

Capture d’écran 2021-11-29 à 17.14.13.png

Capture d’écran 2021-11-29 à 17.13.57.png

Capture d’écran 2021-11-29 à 17.14.28.png

Capture d’écran 2021-11-29 à 17.14.39.png

Capture d’écran 2021-11-29 à 17.38.52.png

Interview take aways

"I want to see how it looks on people like me"

"I only buy second hand"

"Companies are the problem"

"Ethics over material"

Capture d’écran 2021-11-29 à 17.57.22.png

Capture d’écran 2021-11-29 à 17.57.13.png

Capture d’écran 2021-11-29 à 18.09.05.png

Ideation and Wireframing

Design research based on other available

Capture d’écran 2021-11-29 à 18.37.21.png

Capture d’écran 2021-11-29 à 18.44.38.png

Capture d’écran 2021-11-29 à 18.44.28.png

Capture d’écran 2021-11-29 à 19.22.03.png

Capture d’écran 2021-11-29 à 19.21.38.png

Capture d’écran 2021-11-29 à 19.22.14.png

Capture d’écran 2021-11-29 à 19.33.02.png

Capture d’écran 2021-11-29 à 19.50.47.png

Capture d’écran 2021-11-29 à 19.51.42.png

Capture d’écran 2021-11-29 à 19.51.32.png

Capture d’écran 2021-11-29 à 19.51.09.png

Capture d’écran 2021-11-29 à 19.51.53.png

Capture d’écran 2021-11-29 à 19.52.01.png

Capture d’écran 2021-11-29 à 19.52.25.png

Capture d’écran 2021-11-29 à 19.52.44.png

Capture d’écran 2021-11-29 à 23.06.59.png

Capture d’écran 2021-11-29 à 19.54.08.png

Capture d’écran 2021-11-29 à 19.54.17.png

Capture d’écran 2021-11-29 à 19.54.25.png

Capture d’écran 2021-11-29 à 19.54.41.png

High fidelity mockups

Usability testing and interactive prototyping

Challenges and pitfalls

Prioritization in terms of tasks was key and not always so easy
Ax a UX Designer one has lots of bias and it is important always to listen to users
Monitoring testing sessions without too much intervention can be tricky

Capture d’écran 2021-11-30 à 16.06.07.png