Project Work: Audit & Tweaks | Before & AfterS | Annotations
Desktop & Mobile - UX UI Case Studies
1 LV - Desktop Site
Category: High-Fashion
3 H&M - Mobile App
Category: Retail Fashion
2 Puma - Mobile App
Category: Retail Sport Fashion
4 F1 - Mobile App
Category: Motor Sports
UX/UI Case Study 01 - Desktop Website | Browser
1 LV Louis Vuitton Audit & Redesign
Research & Analysis | Wireframes | Medium-Fidelity Prototype
Category: High-Fashion
LV
Role
Unsolicited UX/UI Designer
LV
Duration
5 months April - August
LV
Problem
Ecommerce flow Adding an item to the cart steps can be reduced.
LV
Goal
Less time-consuming Decreasing the screens Reducing clicks to cart Faster experience
AI Synthesized Data | Generalized
LV User Flows
Google AI - Secondary Research
-
Pain Points
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.
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
-
Improve
Ecommerce user flow
Navigation
High-End Ecommerce
Competitive Benchmarking
1.Gucci | Very similar to LV
Item - Navigational arrows appear on hover
Item selected
Add to cart call-to-action selected
Pop up box appears
Close cross | Proceed to checkout | View shopping bag
Selecting the back arrow takes you back to the original page
2.Dior | Very similar to LV
Item - Navigational arrows appear on hover
Item selected
Add to cart call-to-action selected
pop up box appears
Close cross | Proceed to checkout
Selecting the back arrow goes back to the original page & spot
3.Prada | Similarities to LV
Item - Navigational arrows appear on hover
Item selected
Add to cart call-to-action selected
Pop up box appears
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
4.Dolce & Gabbana | Similarities to LV
Item - Image changes on hove
Item selected
Add to cart call-to-action selected
Pop up box appears
Select the closing cross | PayPal | Amazon pay | Proceed to checkout | Close pop up | Selecting the back arrow takes you back to the original page
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%)
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%)
400% User-centric design (often, streamlined navigation) can increase conversion rates up to 400%
UX/ UI Case Study 01 - Mobile App | android 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
" Determined to be relentless in the pursuit of improvement & success."
S1 - Navigational points, headings, image format. S2 - Heading sizes, item image's prominence, call-to-action S3 - Navigational points, headings, image format.
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.
S3 - Increase accessibility with navigational arrows. Title case headings instead. Vertical image formats.
Placement text to be darker for better accessibility
Screen 1: Before | After - Wireframes - Redesigns
Development
Redesign
UI Wireframe
1. Titles - Upper Case > Title Case
2. Images - Square > Vertical
UI Interface
Redesign Changes Reasoning | AI Research
1.Title Case vs. Uppercase
Title Case: Is generally considered better than all uppercase for UI titles and headings.
Readability: Uppercase text is harder to read because it lacks the varied word shapes (ascenders and descenders) that the human eye uses to scan text quickly. Title Case retains these shapes, making it more legible.
Tone: All Caps (Uppercase) can feel aggressive or like shouting, while Title Case provides a professional, stable, and "established" tone.
Use Cases: Uppercase should be used sparingly for small labels (e.g., buttons, tags, or state indicators) to create visual prominence, not for titles or sentences.
2.Why Vertical/Portrait Images Are Often Preferred (Mobile-First)
Vertical: Often being better for engagement on mobile.
Higher Engagement: Vertical images (specifically 4:5) take up more screen space in mobile feeds, reducing distractions and increasing visibility.
Increased Likes/Reach: Studies indicate that 4:5 vertical images can receive higher engagement compared to square images, which appear smaller.
Natural Viewpoint: Because smartphones are held vertically, portrait images feel more native and immersive to the user.
Non-Linear |
Prototype 🥳
Screen 1 - White Mode & Black Mode
Visual Accessibility
Battery Saving
UX/UI Case Study 02 - Mobile App | Android to iOS
Highlight Analysis | Wireframes | High-Fidelity Screens
Category: Retail Fashion
3 H&M Audit & Redesigns
Unsolicited - Contribution as a UX/UI Designer
Duration - 2 months 12% increase to expanded options, to help with accessibility Adjustments to the text layout for a more user-centric focus 50%+ increase in easier access to call-to-actions
Non-Linear |
Prototype 🥳
Screen 1 - White Mode & Black Mode
Visual Accessibility
Battery Saving
UX/UI Case Study 03 - Mobile App | Android to iOS
Highlight Analysis | Wireframes | High-Fidelity Screen Redesign
Category: Motor Sports
4 F1 Audit & Redesigns
Unsolicited - Contribution as a UX/UI Designer
Duration - 2 months Adjusted the score boards picture proximities Streamlining the visual accessibility on the standings list 50% increase to additional screen with scroll bars added
The time has been cut off lol
Non-Linear |
Prototype 🥳
Screen 1 - White Mode & Black Mode
Visual Accessibility
Battery Saving