Andazi Store:
Design and Development
Introduction
Andazi is a Georgian brand specializing in high-quality mattresses and sleep accessories. The goal of this project was to create a modern, user-friendly website that effectively showcases Andazi's innovative sleep technologies and extensive product catalog. My role as a UX/UI Designer involved designing an intuitive website experience while also addressing development limitations in Wix Studio.
Problem Statement
📑 The primary challenge was to structure and present extensive product information in a user-friendly and visually appealing manner.
📱The website needed to clearly communicate the technology behind Andazi's mattresses, differentiate products based on attributes like firmness and temperature regulation, and ensure smooth navigation for users.
📎Additionally, limitations within Wix Studio required creative problem-solving to implement specific functionalities.
Research & Discovery
Interviews
I conducted interviews with the company owner to gain insights into the brand’s goals, product details, and customer pain points.
Key Findings:
-
Users needed a clear breakdown of mattress specifications and technology.
-
The store required a user-friendly way to differentiate products across collections.
-
Extensive product details had to be displayed without overwhelming the user.
Competitive Analysis
I analyzed competitor websites to identify best practices in product presentation, information hierarchy, and e-commerce UX.
Design Process
Wireframing & Ideation
-
Created low-fidelity wireframes to explore layout options and content structure.
-
Designed a card-based system to categorize and visually differentiate product details.
User Testing & Iterations
-
Developed a functional prototype for early usability testing.
-
Iterated on feedback, improving navigation flow and information accessibility.
Visual Enhancements
To improve clarity and engagement, I designed key visual elements that enhanced the user experience.
1. Product Images Created from Scratch
Problem: Andazi’s mattresses were still in the final stages of production, meaning no real product photos were available at the project's start.
Solution: I created realistic product images from scratch, designing bedroom scenes with beds and mattresses that accurately represented Andazi’s final products. These visuals established the brand identity early and provided users with a strong first impression.
2. Enhanced Icons & Progress Bars for Product Understanding
To improve clarity and product differentiation, I enhanced existing icons and designed new visual indicators:
-
Pillow suitability icons to help users quickly identify which pillows are best for different sleeping positions.
-
Additional product icons to highlight key features and specifications.
-
Progress bars (scales) to visually represent mattress attributes like firmness and temperature regulation, making comparisons effortless.
Solutions & UX/UI Enhancements
1. Size Guide Integration
Problem: Andazi offers eight mattresses divided into three collections, each with varying thicknesses. Users found it difficult to compare mattress sizes within the same category.
Solution: I added a Size Guide button under the "Choose Size" dropdown on the product page. When clicked, it opens a side lightbox displaying mattress dimensions, ensuring users can make informed decisions.
2. Custom Product Cards
Problem: Standard Wix product cards didn’t display enough details, making it difficult for users to compare products.
Solution: I designed custom product cards showcasing key attributes like color availability, material composition, and other essential features. This improved product discoverability and user engagement.
Important Discovery: Shorter Product Descriptions Improve Clarity
Concise Product Descriptions for Better Clarity
During testing, I discovered that users tend to skim product cards rather than read lengthy descriptions.
Instead of including 4–5 lines of text, I optimized product cards by highlighting just one key benefit or feature per product.
For example, instead of a detailed description of a pillow, the card simply states: "Hypoallergenic & Breathable"—instantly conveying its most valuable trait. This approach makes it easier for users to grasp product benefits at a glance, improving readability and engagement while still providing full details on the product page.
Development Challenges & Wix Studio Solutions
1. Custom Plugin for Size Guide Button
Challenge: Wix Studio’s default capabilities didn’t allow placing the Size Guide button under the "Choose Size" dropdown.
Solution: I developed a custom plugin that enabled precise placement of the button, ensuring a seamless user experience.
2. Enhanced Product Display on Store Pages
Challenge: The standard Wix store layout limited the amount of information displayed per product.
Solution: I built custom product cards to include more details without cluttering the design, improving usability and product exploration.
Outcome & Impact
-
Improved Information Architecture: Users found it easier to navigate and compare mattress options.
-
Enhanced UX/UI: Custom icons, size guides, and product cards resulted in a more informative and engaging shopping experience.
-
Stronger Visual Identity: The custom-created product images helped establish the brand presence before physical products were available.
-
Better Product Understanding: Progress bars/scales allowed users to quickly compare mattress attributes.
-
Positive User Feedback: Test users appreciated the intuitive navigation and clear presentation of product details.
✨
Conclusion & Learnings
This project reinforced the importance of structured information design and user-centered solutions in e-commerce UX. Overcoming Wix Studio's limitations through custom development strengthened my problem-solving skills as both a designer and developer. Additionally, creating product images, icons, and progress bars from scratch demonstrated adaptability and a strong focus on visual communication.
Through this project, I made key UX discoveries, such as the impact of concise product descriptions and the importance of visual hierarchy in product presentation. These findings significantly shaped the way information is structured on the site, making it easier for users to navigate and understand product differences at a glance.
The store is set to launch soon, and these UX improvements aim to enhance user engagement and drive conversions from the start. We are still actively refining and polishing the design to further optimize the user experience. This project has been an invaluable learning experience, deepening my understanding of e-commerce UX, problem-solving, and the role of visual storytelling in digital shopping.