Improving & Increasing..

"UX auditing to UI redesign tweaking, to try & make existing desktop and mobile screens even more user friendly."

Categories - FASHION | SPORT

Desktop & Mobile UX UI Case Studies

1 LV Desktop Site

Audit & Tweaks | Before & After | Annotations

nsoliited - Building a portfolio

3 H&M Mobile App

Audit & Tweaks | Before & After | Annotations

Unsolicited - Building a portfolio

2 Puma Mobile App

Audit & Tweaks | Before & After | Annotations

Unsolicited - Building a portfolio

4 F1 Mobile App

Audit & Tweaks | Before & After | Annotations

Unsolicited - Building a portfolio

UX/UI Case Study 01 - Desktop Website | Browser

1 LV Louis Vuitton Audit & Tweak

Research & Analysis | Wireframes | Medium-Fidelity Prototype
Category: High-Fashion

Role

Unsolicited UX/UI Designer

Duration

5 Months
April - August

Problem

Ecommerce flow
Adding an item to the cart steps can be reduced.

Goal

Less time-consuming
Decreasing the screens
Reducing clicks to cart
Faster experience

Fictional | Generalized

User Personas

Target - High-End Luxury | 75,000+ Salary

Age Demographics - 18yrs - 54yrs

Pain Points
Secondary Research
- Google AI - "Focus on Lifestyle over E-commerce: The website prioritizes content promoting luxury lifestyle over direct e-commerce functionality, which can be frustrating for shoppers focused on buying."
- Google AI - "Navigational Difficulties: The extensive online product catalog was once considered difficult to navigate, leading to abandoned searches and diminished satisfaction, though this is an area of ongoing innovation."
Brand's Values - "The brand emphasizes a commitment to quality, meticulous attention to detail, and a dedication to craftsmanship."
Associations - Expensive | Lifestyle | Luxury | Pride
Improvements?
- Ecommerce user flow, navigation

High-End Ecommerce

Competitive Benchmarking

Gucci

Item > navigational arrows appear on hover > select item > add to cart call-to-action selected > pop up box appears > options to either select the closing cross or proceed to checkout or view shopping bag > selecting the back arrow takes you back to the original page

Very similar to LV

Dior

Item > navigational arrows appear on hover > select item > add to cart call-to-action selected > pop up box appears > options to either select the closing cross or proceed to checkout > close pop up > selecting the back arrow takes you back to the original page and spot

Similarities to LV

Prada

Item > image changes on hover > select item > add to cart call-to-action selected > pop up box appears > options to either select the closing cross, go to shopping bag, proceed to checkout and pay with PayPal > close pop up > selecting the back arrow takes you back to the original page

Similarities to LV

Dolce & Gabbana

Item > image changes on hover > select item > add to cart call-to-action selected > pop up box appears > options to either select the closing cross, PayPal, Amazon pay, or proceed to checkout > close pop up > selecting the back arrow takes you back to the original page

Similarities to LV

User Flow

A to B User Diagram

Current Flow - Highlights on what could be possibly improved
Qualitative Statistics - 6 Screens (User Steps) | 1 Hover | 1 Scroll | 4 Clicks

iNTERACT

Silent User Test

Quantitative Analysis

User Flow

Wireframe

Proposed Screen Flow 1 | Option 1
Qualitative Statistics: 0 Hover | 0 Scroll | 1 Clicks

Prototype |

Medium-Fidelity

New Proposed Screen Flow 1
Option 1 - 1st Fastest

Prototype |

Medium-Fidelity

New Proposed Screen Flow 1
Option 2 - 2nd Fastest

Summary 🥳

Applying UX principles to enable for a better user experience.
Minimizing effort in the simple and repetitive flow of adding items to the basket.
Reducing the amount of clicks, hovering and scrolling to navigational buttons.
Small tweaks may seem simple but can improve flows, and increase conversion rates.
Improvements, continuous
These are just potential user flows

Screen Steps

6 Current
3 (Option 1 -50%)
4 (Option 2 -33.3%)

Google AI -

Reducing the number of steps to add items to a cart significantly boosts conversion rates by decreasing friction.
Research indicates that optimizing this user flow can lead to conversion rate improvements of 35% +

Hovers/Scrolls

1/1 Current
0/0 (Option 1)
0/0 (Option 2)

Clicks

4 Current
2 (Option 1 -50%)
3 (Option 2 -25%)

Google AI -

400% User-centric design (often, streamlined navigation) can increase conversion rates up to 400%

UX/ UI Case Study 01 - Mobile App | android to iOS

Highlight Analysis | Wireframes | High-Fidelity Screen Redesign
Category: Sport Fashion

2 Puma Audit & Redesigns

Unsolicited - UX/UI Designer

Duration - 2 Months
Contribution - Analysis | Redesign | Wireframes | High-Fidelity Prototype

Brand Value

"Determined to be relentless in the pursuit of improvement & success."

Problem

S1 - Navigational points, headings, image format.
S2 - Heading sizes, item image's prominence, call-to-action
S3 - Navigational points, headings, image format.

Goal

Improve the overall visual layout & brand awareness. Redesigning to:

S1 - Increase accessibility with navigational arrows. Title case headings instead. Vertical image formats.
S2 - Title case for the size headings, include item image within the panel, and clearly have the call-to-action button with all edges showing.