:::: Product Design :::: XR + Creative Technology :::: Art & Design Professor ::::
mockup copyversion4.jpg

Product Design

Product Page ReDesign

Zangar

Seamless Online Shopping Experience for Fine Jewelry

Zangar, a custom and handmade online fine jewelry brand, sought to enhance its digital presence and elevate the overall user experience on its website through a comprehensive redesign. The goal was to create a visually appealing, user-friendly platform that caters to a diverse audience and redefines the brand's identity.

Our team re-designed the overall look of the website to authentically incorporate the brand’s unique visual language into all aspects of user experience.

Project Type

Web Re-Design, Identity, Product Design, UI/UX

Role

Product Designer, Re-brand (identity), Prototyping, Research

Collaborator

Mahsa Biglow

Tools

Figma, Photoshop, Illustrator, Milanote, Notion

Zangar’s Web Re-design (HomePage)

Research:

Key Insights:

  • User Pain Points:

    • Identified pain points from user interviews and feedback, including challenges with website navigation, unclear product information, and a lack of a clear visual representation of jewelry items.

  • Competitor Benchmarking:

    • Discovered gaps in Zangar's online presence compared to competitors, highlighting the need for a more intuitive, engaging, and visually consistent design.

Conducted user surveys to identify user pain points and identify user needs and desires.

  • Our hypothesis was that the current online jewelry shopping experience lacks clarity and visual hierarchy. We conducted user interviews to understand if this is a pain point for them and if there are other pain points that we have overlooked in our initial analysis.

  • We conducted a survey with 5 current and/or potential Zangar customers. Our primary users are individuals aged 25-65 who regularly shop for jewelry online. They value style, uniqueness, and quality in their purchases, and represent a diverse range of income levels from middle class to upper middle class.

  • Our team has analyzed the website and identified several issues that could be addressed in the new design. In this survey, we aim to match our identified issues with users' pain points and also identify any other desires, needs, and pain points that may have been overlooked in our preliminary research and analysis. Specifically, we wanted to better understand user interaction flow with an online jewelry shop that does not offer a traditional brick and mortar store.

    To read more and see the questions in the survey click here.

Conducted user persona analysis to refine the target customer base:

  • Conducted in-depth analysis based on user personas to understand the diverse needs and preferences of Zangar's audience, spanning different age groups, lifestyles, and income levels.

  • To see the details of each persona please click here.

Design Strategy:

  • Clear Visual Hierarchy:

    • Implemented a visually clear hierarchy to guide users seamlessly through the website, ensuring essential elements such as featured collections, new arrivals, and promotions stand out.

  • Balanced Image-Text Ratios:

    • Standardized image-text ratios to create a harmonious visual experience, allowing users to better understand and engage with product details.

  • Improved Information Architecture:

    • Redesigned the information architecture to categorize content logically, making it easier for users to navigate and find relevant information. Specifically, we focused on easier navigation within the structure by incorporating Breadcrumbs and tags.

  • Visual Consistency:

    • Established a consistent and visually appealing color scheme to enhance brand identity and create a cohesive online presence.

  • User-Centric Focus:

    • Prioritized user-centric features such as quick product views, clear explanations, streamlined navigation, and a structured information hierarchy to improve overall user experience.

Initial concepts (low-fidelity)

 

Initial Concept (High Fidelity)

Prototype

Prototype

Implementation:

  • Redesigned Homepage:

    • Introduced a visually striking homepage with clear call-to-action buttons, prominently featured collections, and an interactive layout to engage users from the moment they land on the site.

  • Product Page Enhancements:

    • Implemented standardized image ratios, minimized the number of image styles included in each product, and incorporated detailed product information specifically regarding Zangar’s vision of sustainability and ethical mining. These changes facilitated a smoother and more informed decision-making for the customer.

  • Responsive Design:

    • Ensured the website is fully responsive, providing an optimal experience across various devices to accommodate the diverse ways users access the site.

New Product (featured) are designed to appear in a repeated cascade format to increase engagement and break up the usual flow

Custom Order Page for mobile phone made up of Zangar silhouettes

Homepage >Category >Product

Editorial Photography for Re-brand Identity

Collections Carousel