INDUSTRY:

UX/UI Design & Web Design

CLIENT:

Adriana Berber Jewelry & Projects

YEAR:

2024-2025

EXPERIENCE:

UX/UI Designer

Adriana Berber UX/UI: Home Landing & Web Site 1

About the Project

Structuring and integrating the brand's collections and product catalog into a website, as well as improving the user experience (UX) when browsing it and allowing people to learn and obtain more information about the design value of each piece and jewelry collection.

UX Research


Scope

Objective

To structure and integrate in a website the collections and product catalog of the brand; as well as to improve the user experience (UX) when navigating on it and allow people to know and get more information about the value of the design of each piece and jewelry collection.

Methodology
  • Surveys (quantitative research), however in this one there were a couple of open-ended questions to gather more information.
  • Interviews (qualitative research)
  • User persona
Geographic Area
  • Toluca de Lerdo and surroundings


Lean Survey Canva

Participant Criteria

Recruitment
  • A survey was applied to people who are enthusiastic about handmade jewelry, as well as to acquaintances and groups that appreciate design and handmade processes (artisan entrepreneurs, designers, people who like fashion, among others)
  • As for the interviews, we recruited a select group of people who are enthusiastic about buying jewelry online and asked them a total of ten open-ended questions so that based on their experience they could provide us with as much information as possible and necessary for the construction of the website.

Participants

Below is the personal information of the people who were interviewed in order to carry out a more rigorous investigation through the use of the interview tool.


"To have the guarantee that it is a safe purchase and that the product they are offering you is the one you receive. That's why I like to buy from these specialized jewelry and accessories sites because if it's not the quality of the product they're offering you, you can return it."

- Persona Interview -
For this project, two user profiles were taken into account based on the customers already identified in Adriana Berber's jewelry business.
Persona 1


Persona 2


Based on the responses of the interviews, a brainstorming process was carried out with the most relevant contributions to the research.


Brainstorming

The responses revealed that all respondents prioritize product quality and warranty in their purchase. Therefore, the credibility of the site is a key factor to consider in its design and development.

Key Insights

The results of the surveys identified the most relevant findings for the research. It was determined that the brand's main online audience is housewives, who take advantage of their free time to visit jewelry websites and web pages.



Costumer Journey Map

The following table shows a purchase case in which a user is looking for a set of earrings and necklace for her daughter's graduation. It details the actions she performs and the decision making process to find and purchase the desired product.



Benchmark

A detailed analysis of Adriana Berber's competitors and inspirational businesses was carried out to evaluate the functionality, usability and graphic material of each brand. This allowed us to identify areas for improvement and optimize the design of the future website.


Funcional
Gráfico


Método MoSCoW

This tool allowed us to rank, from 1 to 5, the essential elements that the website should include and those that should be avoided to optimize its design and functionality.


Information Architecture: Landing Page

This first diagram represents the initial structure of the Landing Page, designed to integrate and connect the four sites that present Adriana Berber's different projects.


Wireframe Low-Fidelity: Landing page

Based on the research and the requirements defined through the Information Architecture and the MoSCoW Method, the proposed structure and design for the landing page was developed.



Information Architecture: First Website "Adriana Berber Glass Masterpieces"

Wireframes Low-Fidelity

Based on the research and the requirements defined through the Information Architecture and the MoSCoW Method, the proposed structure and design for the first web page was developed. Low fidelity wireframes are presented below.
UI Design

Design System & Branding

The color palette proposed for the website is composed of ocher and feminine tones, evoking autumn and nature, with the aim of transmitting warmth, elegance and visual harmony.


Colors & Grayscale


Typography

Showcase image

Create a free website with Framer, the website builder loved by startups, designers and agencies.