24 copy.jpg

ODSIL sunglasses

Adaptive design of an e-commerce website

The project is an adaptive design for an e-commerce business, presenting sustainable wooden sunglasses. The company is a local-family one located in Italy and wants to broaden its customer base to all of Europe.

Problem statement for ODSIL business owner

Our business was a family-owned shop in Italy. They are interested in sustainable products, and with this mindset, they design and sell wooden-frame sunglasses. Until recently, they were focused on local customers and arranged their business in their shop in Venice. With the increase in their business, they have decided to invest in an e-commerce website for their products and sell them to other European customers. Their goals for this investment are: to increase their online sale, build the trust of their customers, and attract new customers who cannot trust online shopping for unknown sunglasses brands.

My roles

Lead UX designer, UX researcher, and UI designer

My responsibilities

User research, wireframing, prototyping, usability testing, A/B testing, presenting to stakeholders

Project duration

3 months

Design process

design process.jpeg

Survey and research

For the research purpose, we designed a survey, consisting of 16 questions and distributed it among potential users in Europe to find their needs, 43 participants replied to our questionnaire, including 11 men and 32 women.

In the next step, we had over 9 direct interviews, 7 women, and 2 men from different nationalities, residing all over Europe, to eliminate possible biases. Then we extracted the affinity diagram and empathy maps to understand the potential users and their needs.

A primary user group was identified as working adults, interested in fashion design and also considering sustainability and protecting the environment.

question8.jpg
question 12.jpg
question 9.jpg

Persona and her story

Persona.jpg
story board copy portfolio.jpg

User journey

Third -User flow 1.png

Competitive analysis

Based on competitive analysis of direct and indirect competitors, we found about potential success opportunities in market and necessary design features in our final product.

competitive analysis.jpg

Design features

List of design features was created after user research and discussed with stakeholders. Finalized features was prepared base on user needs and stakeholder capacity.

  • Adding face scan feature

  • Focus on classic designs

  • Emphesize on comfort of glasses

  • highlighting sustainable and eco-friendly material

User research_edited.jpg

Mood board

Mood board.png

UI Kit

UI Kit_edited.jpg

Paper wireframes and crazy eights

For the main screen of the desktop website, we used the Crazy-8 method in the team to find the best design and information architecture for our website. The card sorting was performed through competitive analysis with direct and indirect businesses.

paper wireframe.png
paper wireframe.png

Digital wireframes

As the initial stage of design goes on, we make sure that the user has easy access to the main design features, including the face scan option and bestsellers to see the sunglasses designs, also Business needs for introducing their value propositions at the first glance on the website.

On the product page, the user has easy access to the available items, also the possibility to refine their selection based on color, frame, price, and size of glasses.

Desktop - wireframe - Fereshteh.png
women frames +filter - wireframe - Fereshteh.png

Iterations

In the final version, we created the CTA for men and women categories in hero images instead of pictures. Also, the face scan option is not included in the navigation bar, which gave the wrong impression of lower importance in the process.

Hero image1.png
AdobeStock_262797244 1.png
hero AB 1.png
hero 3 1.png
hero image 1.png

Change in hero image

scansione facciale.png

Change in Scan face feature

Change in colors and card design

item iteration 3.png
small view of product 1.png