Screen Steps

• 6 - Current

• 3 [ - 50% less] Option 1

• 4 [ - 33.3% less] Option 2

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 [ - 50% less] Option 1 

• 3  [ - 25% less] Option 2

Google AI - 

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

Redesign

UI Wireframe

• 1. Titles - Upper Case > Title Case

• 2. Images - Square > Vertical

Adjusted 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.

Redesign

UI Wireframe

• 1. Titles - Upper case to title case

• 2. Images - Square to vertical

• 3. Drag down bar - Adjusted the proximity 

Adjusted 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.

Redesign

UI Wireframe

• 1.Titles - Upper case to title case

• 2.Text Alignment - Left aligned

• 3.Underlining -  Emphasised the call-to-action text

• 4.Cross - Changed proximity

• 5.Layout - Adjusted elements to include all details
  

Adjusted UI Interface

Redesign Changes Reasoning | AI Research 

3.Non-Underlined vs. Underlined Call-To-Action

• Underlining is a highly effective way to emphasize calls to action (CTAs). UX experts, including the Nielsen Norman Group, recommend combining color and underlining to make links stand out, which is especially crucial for accessibility

5.Details vs. All Details

• Keeping all relevant details on a single screen is the standard for quick decision-making. This design approach prevents cognitive overload, eliminates endless scrolling, and ensures users can extract the exact insights they need in seconds. 

Mock Up

• 3 Screens - Before

• Android Screens

• Mobile App

• 3 Redesigns Screens  - After

• iOS Screens

• Mobile App 
  

Design System

• Puma

• Unified Design System (UDS)

• Web, Mobile, & B2B Platforms

• Dual Mode (light, dark)

• Cross - Platform App

• React Native

• iOS, Android

• Desktop, Browser 

Test

Check the mock up screen redesigns against the specific design system.

• Floto

• Design Audits:  UX heuristics and accessibility standards (WCAG)

• Synthetic Persona Testing: Tests prototypes against mock AI users

• Flow Analysis: Identifies broken or missing states, how a user navigates through a redesign 

• Design Diff: Compares the redesigns to highlight visual differences

In a UX audit, this would be done prior to any redesigns, but the purpose of this case study was to build a portfolio.