My Framer Site

Chope

Jan 2025

Contribution

Mobile UI Design

Project

Personal

Objective

The objective of this project is to enhance the usability and visual clarity of the main home screen of the Chope app. The redesign aims to create a more structured, user-friendly interface that improves navigation, highlights key actions, and ensures a consistent design system.

Scope

The scope of this redesign is limited to the main home screen and includes:

UI Enhancements: Improve typography, spacing, and colour consistency

Navigation & Hierarchy: Reduce clutter and organize content for better usability

Interaction Clarity: Differentiate tappable elements from static content

Visual Streamlining: Eliminate distractions to highlight core functions

Problem discovery

SPRINT 1

SPRINT 2

SPRINT 3

SPRINT 4

Competitor Analysis

Wireframe sketches

Design System

Mock Up

The timeline

Sprint 1

Problem Discovery

Inconsistent Design System

The typography lacks consistency, creating a disjointed experience.This affects readability and the overall visual hierarchy of the app.

Overloaded User Interface (UI)

The screen contains too many elements, making it visually overwhelming.

Users may feel overstimulated and lose focus on the main purpose of the app.

Unclear Interactive Elements

Some icons and UI elements do not visually indicate they are tappable. Users may not recognise them as actionable, causing confusion.

not optimal for tappability

the icons are not big enough

the page is overloaded the user might get too stimulated and loose focus of the main scope

the design system particularly the typography does not feel consistent

signifier is too long and make users process slower even the simplest actions

Sprint 2

Competitor Analysis

The competitor analysis identifies key UI/UX elements that improve engagement and usability:

Navigation Bar: Clear, structured for easy access.

Personalisation: Name-based greetings for a tailored experience.

Overlay Effects: Visually appealing depth and hierarchy.

Content Organisation: Distinct sections for categories, promotions, and recommendations.

User Guidance: Highlighted discounts and categories for quicker decisions.ter.

name personalization

nav bar idea

Wireframes

Sprint 3

Design System

4.2

Book

Input Field

Bottons and Components

Navigation Bar Icons

Search for restaurants....

Sprint 4

Mock Up

HOME

Chope

Jan 2025

Contribution

Mobile UI Design

Project

Personal

Objective

Scope

The scope of this redesign is limited to the main home screen and includes:

UI Enhancements: Improve typography, spacing, and color consistency.

Navigation & Hierarchy: Reduce clutter and organize content for better usability.

Interaction Clarity: Differentiate tappable elements from static content.

Visual Streamlining: Eliminate distractions to highlight core functions.

The scope of this redesign is limited to the main home screen and includes:

UI Enhancements: Improve typography, spacing, and color consistency.

Navigation & Hierarchy: Reduce clutter and organize content for better usability.

Interaction Clarity: Differentiate tappable elements from static content.

Visual Streamlining: Eliminate distractions to highlight core functions.

Problem discovery

SPRINT 1

SPRINT 2

SPRINT 3

SPRINT 4

Competitor Analysis

Wireframe sketches

Design System

Mock Up

The timeline

Sprint 1

Problem Discovery

Overloaded User Interface (UI)

The screen contains too many elements, making it visually overwhelming.

Users may feel overstimulated and lose focus on the main purpose of the app.

Overloaded User Interface (UI)

The screen contains too many elements, making it visually overwhelming.

Users may feel overstimulated and lose focus on the main purpose of the app.

Inconsistent Design System

The typography lacks consistency, creating a disjointed experience.This affects readability and the overall visual hierarchy of the app.

Inconsistent Design System

The typography lacks consistency, creating a disjointed experience.This affects readability and the overall visual hierarchy of the app.

Unclear Interactive Elements

Some icons and UI elements do not visually indicate they are tappable.Users may not recognise them as actionable, causing confusion.

Unclear Interactive Elements

Some icons and UI elements do not visually indicate they are tappable.Users may not recognise them as actionable, causing confusion.

not optimal for tappability

the icons are not big enough

the page is overloaded the user might get too stimulated and loose focus of the main scope

the design system particularly the typography does not feel consistent

Signifier is too long and make users process slower even the simplest actions

signifier is too long and make users process slower even the simplest actions

not clear if is tappable

name personalization

nav bar idea

Wireframes

Sprint 3

Design System

4.2

Book

Input Field

Bottons and Components

Navigation Bar Icons

Search for restaurants....

Sprint 4

Mock Up

The competitor analysis identifies key UI/UX elements that improve engagement and usability:

Navigation Bar: Clear, structured for easy access.

Personalisation: Name-based greetings for a tailored experience.

Overlay Effects: Visually appealing depth and hierarchy.

Content Organisation: Distinct sections for categories, promotions, and recommendations.

User Guidance: Highlighted discounts and categories for quicker decisions.

The competitor analysis identifies key UI/UX elements that improve engagement and usability:

Navigation Bar: Clear, structured for easy access
Personalisation: Name-based greetings for a tailored experience
Overlay Effects: Visually appealing depth and hierarchy
Content Organisation: Distinct sections for categories, promotions, and recommendations
User Guidance: Highlighted discounts and categories for quicker decisions

Sprint 2

Competitor Analysis

name personalization

nav bar idea

HOME

Sprint 2

Competitor Analysis

The competitor analysis identifies key UI/UX elements that improve engagement and usability:

Navigation Bar: Clear, structured for easy access.

Personalisation: Name-based greetings for a tailored experience.

Overlay Effects: Visually appealing depth and hierarchy.

Content Organisation: Distinct sections for categories, promotions, and recommendations.

User Guidance: Highlighted discounts and categories for quicker decisions.ter.