UI/UX DESIGN / E-COMMERCE

ELEVEN OASIS

A comprehensive redesign of an existing menswear e-commerce website, focused on clearer shopping experiences and stronger conversion.

E-commerce Website Redesign & Conversion Optimization

Project: Redesign of an existing website
Audience: American men aged 40–65
Focus: Shopping experience & conversion
Role: UI/UX DESIGNER

Visit live website

01 / THE CHALLENGE

PROBLEM

A recognizable brand, but a fragmented shopping experience.

01 / FRAGMENTED INFORMATION ARCHITECTURE
An inconsistent content hierarchy made navigation and product discovery less intuitive.
02 / ONE-SIZE-FITS-ALL SHOPPING JOURNEY
PRINT and CLASSIC GEAR lacked distinct pathways tailored to different shopping intentions.
03 / LIMITED PURCHASE CONFIDENCE
Customer reviews, social proof, and purchase assurances were not prominently communicated.
04 / DISCONNECTED BRAND & COMMERCE
Brand storytelling wasn't effectively translated into clear product entry points and purchase actions.

PC SHOPPING JOURNEY

Eleven Oasis website demo inside the original MacBook frame — Eleven Oasis — a recorded walkthrough of the live storefront.

MOBILE SHOPPING JOURNEY

From Discovery to Checkout

Explore all 11 screens. Select a stage to highlight its touchpoints, or select a phone for a closer look.Explore all 11 screens, two at a time. Filter by stage or select a phone for a closer look.

Page 1 of 6. Screens 01 and 02.

02 / STRATEGY

STRATEGY

Designing a clearer path from discovery to purchase.

Homepage UX Decisions: central iPhone with dual-collection navigation, shoppable product discovery, purchase confidence and cross-collection discovery annotations

Two Collections, Two Shopping Journeys

I redesigned the homepage to create clearer shopping pathways for PRINT and CLASSIC GEAR, connecting collection navigation, product discovery, trust signals, and cross-collection exploration within one cohesive storefront.

One Brand, Two Distinct Expressions

I developed a more cohesive visual language while allowing PRINT and CLASSIC GEAR to retain distinct personalities through typography, imagery, color, and campaign presentation.

Brand specifications

The supplied brand guidelines define Space Black and Off White as core colors, with Denim Blue, Vintage Leather, Deep Rust, and Solaris as accents. Roboto Black is the primary headline typeface; Roboto Regular is used for body copy. Impact and Gill Sans are listed as substitutes.

Logo use follows the supplied clear-space and brand-color rules. The photography direction favors authentic outdoor settings, natural light, earthy colors, and real moments of connection. Photography examples in the guideline are treated as references, not as original portfolio artwork.

03 / RESEARCH & VALIDATION

DATA-DRIVEN DESIGN

Turning behavioral insights into better shopping experiences.

By combining behavioral analysis, UX observations, and controlled experiments, I used evidence to identify friction points, guide design decisions, and evaluate opportunities to improve the shopping experience.

01 / OBSERVE Behavioral insights
02 / OPTIMIZE Design hypotheses
03 / VALIDATE A/B testing

Understanding Where Shoppers Focus

Hotjar click and scroll analysis helped reveal how visitors interacted with key shopping pages, where attention concentrated, and which areas needed closer UX review.

OBSERVATION / Homepage · click map: Visible click marks cluster around navigation, search, cart and the campaign hero.
DESIGN IMPLICATION: Keep shopping entry points explicit and easy to find. Treat lower-page discovery as something to test, rather than assuming every visitor sees it.

Click maps record interactions; scroll markers describe exposure at a page depth. Capture periods and populations are not consistently shown, so these views are not treated as a controlled device comparison.

Evidence capture

Desktop · Homepage · click mapSource: hotjar3.png

Turning Evidence into Design Decisions

Clearer shopping entry points.

OBSERVED: Navigation and early shopping controls attract visible clicks; deeper discovery modules have less scroll exposure in the captured homepage study.
DESIGN RESPONSE: Prioritize explicit collection choices and shopping entry points, aligned with the existing PRINT / CLASSIC GEAR pathways.

These responses connect research observations to design hypotheses. The screenshots do not establish that a particular experiment caused a specific redesign decision.

HOMEPAGE / OBSERVATION → DESIGN RESPONSE

Clearer shopping entry points.Source: hotjar3.png

Testing Design Hypotheses

Mobile homepage · Shop the Look

All three displayed rates increased in this mobile snapshot. The report does not show the exact variant layout or establish a statistically significant winner.

Variant refers to “New Group 1” in the captured report. Exact layout modifications are not shown. Changes here are calculated from the displayed source rates.

The dashboard reports +24.53%, +3.33% and +1.49%. Its more precise underlying rates account for the small differences from calculations using the rounded chart labels.

New and returning visitors are separate cohorts within the mobile experiment. Their relative changes are not added together.

CONTROL GROUP → NEW GROUP 1

Mobile audience

Mobile homepage · Shop the Look: Control Group versus New Group 1
METRIC	CONTROL	VARIANT	RELATIVE CHANGE
Conversion rate	5.82%	7.24%	+24.4%
Add-to-cart rate	18.4%	19.0%	+3.3%
Product-page-view rate	53.2%	54.0%	+1.5%

Mobile homepage · Shop the Look · ORIGINAL EVIDENCE

Original experiment title: Test Mobile homepage shop the look

Source: abtest5.jpgRelative change = (variant / control − 1) × 100

What the Experiments Revealed

A separate report snapshot records higher conversion, add-to-cart and average order value for New Group 1. Its test name, device and date are not shown, so these figures stand on their own.

Observed test results; statistical significance and long-term impact are not established by the available screenshots.

This unnamed snapshot remains separate from the Mobile and Desktop Shop the Look experiments.

SEPARATE TEST SNAPSHOT / CONTROL → VARIANT

Conversion rate

+25.3%

8.051%10.088%

RELATIVE CHANGE

Add-to-cart rate

+10.3%

19.49%21.49%

RELATIVE CHANGE

Average order value

+5.2%

$69.56$73.15

RELATIVE CHANGE

Source: abtest1.pngTest identity, significance and long-term impact are not supplied.

Evidence capture

Desktop · Homepage · click mapSource: hotjar3.png

CONTROL GROUP → NEW GROUP 1

Mobile audience

Mobile homepage · Shop the Look: Control Group versus New Group 1
METRIC	CONTROL	VARIANT	RELATIVE CHANGE
Conversion rate	5.82%	7.24%	+24.4%
Add-to-cart rate	18.4%	19.0%	+3.3%
Product-page-view rate	53.2%	54.0%	+1.5%

Mobile homepage · Shop the Look · ORIGINAL EVIDENCE

Source: abtest5.jpgRelative change = (variant / control − 1) × 100

KEY TAKEAWAYS

Designing with Evidence, Not Assumptions

Behavioral analysis helped identify where shoppers focused their attention and where friction appeared. Experimentation added another layer of evidence, highlighting promising improvements as well as opportunities for continued iteration.

Research sources / 14 uploaded screenshots

04 / RESULTS

The Results

Core CTA click-through rate: 5% → 25%
CTA engagement vs. baseline: 5×
Business GMV growth: ≈200%

Figures supplied by the project owner; not independently verified. 5× = 25% ÷ 5% and is not a separate outcome. GMV growth is not attributed exclusively to the redesign.

ELEVEN OASIS

PROBLEM

01 / FRAGMENTED INFORMATION ARCHITECTURE

02 / ONE-SIZE-FITS-ALL SHOPPING JOURNEY

03 / LIMITED PURCHASE CONFIDENCE

04 / DISCONNECTED BRAND & COMMERCE

From Discovery to Checkout

STRATEGY

Two Collections, Two Shopping Journeys

Supporting Confident Purchase Decisions

One Framework. Two Shopping Intentions.

Editorial-Led Discovery

Promotion-Led Discovery

Building Confidence Throughout the Journey

One Brand, Two Distinct Expressions

A Consistent Foundation for Every Experience.

DATA-DRIVEN DESIGN

Clearer shopping entry points.

Mobile homepage · Shop the Look

Designing with Evidence, Not Assumptions

The Results

ELEVEN OASIS

01 / FRAGMENTED INFORMATION ARCHITECTURE

02 / ONE-SIZE-FITS-ALL SHOPPING JOURNEY

03 / LIMITED PURCHASE CONFIDENCE

04 / DISCONNECTED BRAND & COMMERCE

Two Collections, Two Shopping Journeys

01Behavioral analysis

02From insight to action

03A/B testing & validation

04Measured outcomes

Designing with Evidence, Not Assumptions

The Results