Share your Figma prototype link before the next class. Be prepared to present your redesign, explaining how your solutions address the problems identified in your analysis.

Remember: Focus on meaningful improvements rather than redesigning for the sake of change.

:emoji: Part 4: Final Presentation (Lesson 23)

Final Project Presentation

Create a presentation for your UI/UX redesign project that includes:

Required Slides:

One. Project Analysis Slide

Name and screenshot of your chosen app/website
3-5 key strengths and weaknesses you identified
Summary of your proposed changes/improvements

2. Final Design Solution Slide

Before/after comparison of key screens
Brief explanation of your design decisions
Suggested to show your wireframe

3. Figma Prototype Demonstration

Share your Figma prototype
Show how your design addresses the issues you identified
Walk through the improved user flow

Presentation Guidelines:

Your presentation should be concise (5-10 minutes) and focus on clearly communicating your analysis and redesign solution.

:emoji: Getting Started

Tools You'll Need:

Figma for wireframing and high-fidelity prototyping
Presentation software (PowerPoint, Google Slides, etc.) for final presentation
Note-taking tools for analysis and research

Timeline:

Lesson 20: Complete analysis and improvement planning
Lesson 21: Develop user flows and wireframes
Lesson 22: Create high-fidelity Figma prototype
Lesson 23: Present your complete redesign project

:emoji: Submission

Submit Your Work Here: Submission Form

Project 4 of 4

Project 4: Final Project

Apply your knowledge to build something amazing!

Final Project: UI/UX Redesign Journey

:rocket: Project Overview

Objective: Complete a comprehensive UI/UX redesign project from analysis to final presentation

What You'll Learn:

Critical analysis of existing digital interfaces
Evidence-based design improvement planning
User flow optimization and wireframing
High-fidelity prototype development
Professional presentation skills

What You'll Create: A complete redesign case study with analysis, wireframes, prototype, and presentation

:clipboard: Overview of the 4-Part Project

Complete UI/UX Redesign Journey:

Part One: Analysis & Improvement Planning (Lesson 20)
Part 2: User Flow & Wireframing (Lesson 21)
Part 3: Development (Lesson 22)
Part 4: Final Presentation (Lesson 23)

:mag: Part One: Analysis & Improvement Planning (Lesson 20)

Learning Objectives:

Analyze existing digital interfaces critically
Identify strengths and weaknesses of current designs
Compare against competitors
Develop evidence-based improvement recommendations
Prepare foundation for wireframing

:emoji:️ Access the Worksheet:

Analysis & Improvement Planning Worksheet

Selecting Your Subject

Choose a Website or App:

Select something you're familiar with
Ensure it has enough complexity for analysis
Consider one with obvious improvement opportunities
Ideally in a category with clear competitors

Examples:

E-commerce sites
Educational platforms
Social media apps
Entertainment services
Productivity tools

Assignment Tasks:

One. Selection & Overview

Document Basic Information:

Name and URL/download location
Industry category
When was it last updated?

Define Purpose:

What is its primary function?
What secondary features does it offer?
Who is the target audience?
How does it generate value?

2. Interface Analysis

Visual Design Elements:

Color Analysis:

Identify primary, secondary, and accent colors
Note hex codes if possible
Consider color psychology and brand alignment

Typography:

Document heading and body text fonts
Assess readability across devices
Consider hierarchy and contrast

Layout Structure:

Grid system or organizing principles
Use of white space
Content prioritization
Responsive behavior

Imagery & Graphics:

Style consistency
Image quality
Purpose (decorative vs. informational)
Relevance to content

3. Competitor Analysis

Selecting Competitors:

Choose 2-3 direct competitors
Document their approaches to similar problems

Comparative Assessment:

What do competitors do better?
Where does your selected app excel?
Identify industry best practices
Note innovative solutions

4. Redesign Recommendations

Visual Improvement Opportunities:

Color palette refinements
Typography enhancements
Layout restructuring

Functional Improvements:

Navigation simplification
User flow optimization
Feature additions or modifications

Content Improvements:

Information architecture
Messaging clarity
Call-to-action effectiveness

:emoji: Part 2: User Flow & Wireframing (Lesson 21)

Learning Objectives:

Transform analysis insights into practical design solutions
Develop wireframes that address identified usability issues
Apply information hierarchy and layout best practices
Prepare the foundation for high-fidelity design development

Why Understand User Flows First?

Ensures logical progression before visual design
Identifies unnecessary steps or complications
Focuses on user goals rather than visual elements
Provides structure for wireframing

Creating Effective User Flows

Step One: Select Key Tasks

Choose 2-3 critical user journeys
Focus on problematic flows identified in analysis
Include primary conversion paths

Step 2: Map Current Flow

Document existing steps for comparison
Note pain points and unnecessary complexity

Step 3: Design Improved Flow

Reduce steps where possible
Eliminate decision points that cause confusion
Ensure clear progression toward goals

Wireframing Basics

What are Wireframes?

Low-fidelity representations of interface layout
Focus on structure, not visual design
Show placement of elements and content hierarchy
Communication tool for design decisions

Wireframe Fidelity Levels:

Low: Simple boxes and placeholders
Medium: More defined elements and some annotations
High: Detailed layouts with specific content elements

Wireframing Best Practices

Keep It Simple:

Use grayscale (no color)
Limit detail to what's necessary
Use standard patterns when possible

Focus on Structure:

Information hierarchy
Navigation systems
Content organization
Page layouts

:emoji:️ Access the Worksheet:

User Flow & Wireframing Worksheet

Assignment: Draw your new improved website/app wireframe and submit the images or link in the worksheet.

:art: Part 3: Development (Lesson 22)

UI/UX Redesign - Figma Development Instructions

Based on your analysis and improvement recommendations, develop a high-fidelity prototype in Figma that addresses the weaknesses you identified.

Requirements:

One. Complete User Flow

Create all necessary screens for your user journey
Ensure logical navigation between screens
Include error states and edge cases

2. Design System Implementation

Apply your proposed color palette
Implement your typography choices
Use consistent layout improvements
Create reusable components

3. Responsive Design

Design both mobile and desktop versions of key screens
Ensure consistent experience across devices
Test breakpoints and transitions

4. Style Guide

Include a simple style guide frame
Show your design system elements
Document colors, typography, and components
Ensure consistency across all screens

Name and screenshot of your chosen app/website
3-5 key strengths and weaknesses you identified
Summary of your proposed changes/improvements

2. Final Design Solution Slide

Before/after comparison of key screens
Brief explanation of your design decisions
Suggested to show your wireframe

3. Figma Prototype Demonstration

Share your Figma prototype
Show how your design addresses the issues you identified
Walk through the improved user flow

Figma for wireframing and high-fidelity prototyping
Presentation software (PowerPoint, Google Slides, etc.) for final presentation
Note-taking tools for analysis and research

Timeline:

Lesson 20: Complete analysis and improvement planning
Lesson 21: Develop user flows and wireframes
Lesson 22: Create high-fidelity Figma prototype
Lesson 23: Present your complete redesign project

:emoji: Submission

Submit Your Work Here: Submission Form