Overview

UX Study of the Desktop and Mobile Interface for OMBRA

OMBRA is an e-commerce website featuring a vast collection of clothing, accessories, and other products, sold through referral links. This case study explores the UX/UI improvements designed for OMBRA to enhance user engagement and business scalability.

Project Goals

• Research and develop a responsive website that caters to both first-time visitors and loyal customers.

• Maintain OMBRA’s branding while improving user experience and retention.

• Implement features that encourage users to spend more time on the platform.

Our Role

• UX Research & Design

• UI Design & Interaction Design

• Visual Design Implementation

Timeline & Tools

• Duration: 2 Weeks

• Tools Used: Figma, Notion, Adobe Illustrator

Client Background & Challenges

The client primarily operated through WhatsApp groups with referral links for clothing and cosmetics. To scale their business, they required a dedicated website to:

• Track product analytics

• Enable retargeting in ads

• Allow users to save favorite items

• Increase user engagement and browsing time

Proposed UX/UI Solutions

1. Enhanced Navigation & Personalization

• Users can select collections based on mood, latest trends, or discounts.

• Dynamic filtering options to personalize shopping experience.

2. Engaging Product Discovery with Infinite Scrolling

• A "ribbon-style" product feed designed like a social media interface, increasing time spent on-site.

• Users can seamlessly scroll while performing other tasks, making browsing effortless.

3. Optimized Grid Layout for Product Display

• Three-column layout: Highlights a vast product range, creating an impression of abundance.

• Five-column layout: Enhances product visibility for detailed browsing.

• Pinterest-style layout: Encourages users to save aesthetically pleasing products for future purchase.

4. Mobile-First Approach

• A simplified homepage focusing on browsing without gender-based categorization.

• Adaptive UI components for seamless mobile navigation.

5. Customizable Product Cards

• Different design options allowing for customization in elements and colors.

Design Variations & Iterations

Version 1

• Displays the latest three collections with a "See All" button.

• Minimal text, focusing on visuals.

Version 2

• Direct navigation to either men's or women's collections.

Version 3

• Featured selections displayed on the homepage with quick access buttons.

Product Feed Optimizations

• Introduced an endless-scroll feature to mimic social media browsing behavior.

• Increased user retention through engaging visuals and product collections.

Final Layouts & Aesthetic Enhancements

• Conducted extensive competitor analysis to refine UX decisions.

• Developed two layout versions tailored to different audience preferences.

• Balanced aesthetics and usability to maximize customer engagement.

FAQ (Frequently Asked Questions)

1. Why was the social media-style ribbon layout chosen?

This approach mimics familiar scrolling patterns, increasing user retention and session duration, key factors in conversion rate optimization.

2. How does the website help retain customers?

By implementing personalized product selections, saved collections, and a visually engaging infinite-scroll design, we ensure users spend more time browsing and interacting with the platform.

3. What are the key UX research findings?

• Users prefer quick access to curated collections.

• Infinite scrolling encourages engagement but requires a structured approach to prevent decision fatigue.

• Mobile-first design is crucial as most users browse via smartphones.

4. How does the new design support OMBRA’s branding?

The layout and visual elements align with OMBRA’s brand identity, ensuring consistency while introducing modern UX improvements.

Conclusion

By incorporating UX research insights, modern UI trends, and interactive features, the redesigned OMBRA website enhances user engagement and drives business growth. The improved navigation, infinite scrolling experience, and personalized product selections ensure an optimized shopping journey that aligns with user expectations.