Darosara Website Design
A User-Friendly and Trustworthy E-commerce Platform for Health Products.
Details
Business Impact
Create a user trust and simplified path from product discovery to purchase.
Role
UI/UX Designer
Industray
E-commerce, Healthcare & Pharmaceuticals
Project Overview
This case study outlines the User Interface (UI) and User Experience (UX) design process for the “Daruza” online pharmacy website, from the initial wireframing stage to the final visual design.
Project Introduction
The “Darosara” project was initiated to create a reputable and efficient online platform for selling cosmetics, personal care items, dietary supplements, and other health-focused products.
The Core Challenge
The primary challenge was to design an online shopping experience that was not only simple and efficient but also built user trust for purchasing sensitive health-related products. Many users hesitate to buy these items online due to concerns about product authenticity and overly complicated purchasing processes.
My Role and Responsibilities
As the UI/UX designer, my responsibilities included conducting initial research, defining the site architecture, creating wireframes, and ultimately designing the final user interface for all key pages of the website.
Research
The platform’s target audience is broad, ranging from young adults seeking cosmetics and personal care products to individuals looking for supplements and health products for themselves or their families. For all of these groups, trust, quick access to information, and a seamless purchasing process were paramount.
Key Findings
Trust is Paramount: Users need a website that looks professional and where contact information and official certifications (like e-trust seals) are clearly visible.
Effortless Navigation is Crucial: Users must be able to quickly find their desired products through intelligent search and clear categorization.
Comprehensive Product Information is Essential: High-quality images, detailed descriptions, usage instructions, and transparent pricing are critical for a user’s decision-making process.
Design Process
The design process began with the creation of low-fidelity wireframes to establish the overall page structure. The primary focus was on a clean, grid-based layout to convey a sense of organization and professionalism. This structure is visible in the wireframes for the following pages:
- Homepage: Includes the main banner, key categories, featured products, and a brands section.
- Product Listing Page: Features a sidebar for filtering products and a grid view for displaying them.
- Product Detail Page: Includes an image gallery, key product information, price, and related products.
Visual Design and Branding:
- Color Palette: A primary color of green was chosen to evoke feelings of health, calm, and trust. This was paired with a white background and grey text to create a clean and readable interface.
- Typography: A modern and legible font; Ray was used to ensure that product descriptions, especially for medicinal items, were easy for users to read.
- Iconography: Simple and universally understood icons were used for elements like the shopping cart, user profile, and search to make navigation intuitive and fast.
The Sitemap
The Userflow
Wireframes Of Homepage
Wireframes Of Product Page
Wireframes Of Search Result
Results
The final design incorporated the following key features to address user needs:
Organized Homepage:
The homepage effectively guides users with clear categories, attractive banners for promotions, and sections like “Bestsellers” and “Top Brands.” Elements designed to build trust, such as “Guaranteed Authenticity” and “Free Consultation,” are prominently featured.
Advanced Filtering System:
On the product listing page, users can filter products by availability, brand, price range, and various other categories. This feature makes finding the right product fast and effortless.
Complete and Transparent Product Page:
- Image Gallery: Allows users to view the product from multiple angles.
- Tabbed Information: Product details are organized into separate tabs like “Specifications,” “Features,” and “How to Use” to prevent a cluttered page.
- Clear Call-to-Action (CTA): The “Add to Cart” button is designed with a distinct color and size to be easily identifiable.
- Related Products: This section helps users discover other options and increases the likelihood of a purchase.
