Adaptive design of website

My roles

Lead UX designer,
UX researcher,
UI designer

My responsibilities

User research,
Wireframing,
Prototyping,
Usability testing,
A/B testing,
Presenting to stakeholders

Project duration

3 months

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.

Design process

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.

Our persona and her story

User flow

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.

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

Mood board

UI kit

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.

Design features

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.

Iterations

women frames +filter - wireframe - Fereshteh.png

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.