Project 4: Final Project
Apply your knowledge to build something amazing!
🌟 Design Showcase Spectacular!
🚀 Project Launch!
This is it - your ultimate design challenge! You're about to become a design detective, problem-solver, and digital artist all in one. You'll take a real app or website and make it absolutely amazing. This is your chance to show the world what an incredible designer you've become!
📊 Project Scope & Timeline
- Estimated Time: 25-30 hours across 8-10 sessions
- Difficulty Level: ⭐⭐⭐⭐⭐ 5/5 stars
- Team Size: Individual project (showcase of personal skills)
- Deliverables: Complete redesign case study, analysis report, interactive prototype, portfolio presentation
🎓 Skills You'll Develop
- Professional design analysis and critique
- Evidence-based design improvement methodology
- Advanced prototyping and interaction design
- Professional presentation and communication
- Portfolio development and personal branding
🎯 Your Creative Mission
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
🏆 Success Milestones
Your grand finale includes these epic achievements:
- 🕵️ Design Detective: Uncover hidden problems in existing apps
- 📊 Research Master: Analyze competitors like a pro
- 🗺️ Flow Architect: Map perfect user journeys
- 🎨 Visual Wizard: Create stunning high-fidelity designs
- 🎬 Presentation Star: Present your work like a design superhero
📋 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)
🔍 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
🖱️ 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
🔄 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
🖱️ Access the Worksheet:
User Flow & Wireframing Worksheet
Assignment: Draw your new improved website/app wireframe and submit the images or link in the worksheet.
📸 Portfolio Checkpoint
Document your process:
- Screenshot your analysis findings and competitive research
- Write 2-3 sentences about your design improvements and rationale
- Note any challenges you overcame in user flow optimization
- Save your wireframes and process documentation for portfolio
👥 Peer Review Session
Giving Feedback (35 minutes)
- Find a review partner
- Present your analysis findings and proposed improvements (8 minutes)
- Listen to their feedback without defending your design choices
- Take notes on analysis depth and improvement suggestions
- Ask clarifying questions about user needs and design decisions
Receiving Feedback Framework
Use "I like, I wish, I wonder":
- I like: What analysis insights were most compelling
- I wish: What areas of analysis or improvement could be deeper
- I wonder: Questions about design decisions and user impact
Implementing Feedback
- Choose 2-3 suggestions to implement in your wireframes and analysis
- Document what you changed and why
- Thank your reviewer!
🎨 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
About Submission:
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.
🚀 Career Spotlight
This project mirrors real work at companies like:
- Design Consultancies: Firms like IDEO, Frog Design, and Method create comprehensive redesign solutions for major brands
- Product Design Teams: Companies like Slack, Zoom, and Notion continuously improve their interfaces based on user feedback
- Entry-Level Role: UX/UI Designer or Product Design Analyst
- Salary Range: $60,000-85,000 for entry-level design positions with portfolio demonstration
💡 Industry Insights
"The best designers don't just make things look pretty - they solve real problems for real users. A strong redesign portfolio shows employers you can think critically and create meaningful improvements."
- David Park, Design Director at Facebook
💡 Pro Designer Secrets!
Here's what separates the design legends from everyone else:
- Always start with user problems: The best redesigns solve real frustrations, not just look pretty
- Document everything: Keep notes and screenshots throughout your process - you'll use them in your presentation
- Think like a user: Test your redesign by walking through it as if you've never seen it before
- Less can be more: Sometimes the biggest improvement is removing something confusing
- Tell a story: Your presentation should show a clear journey from problem to solution
- Practice your pitch: Rehearse your presentation until you can explain your design decisions clearly
Remember: Focus on meaningful improvements rather than redesigning for the sake of change.
🎤 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.
💼 Portfolio Presentation Guide
Creating Your Case Study
-
Project Overview (1 paragraph)
- App/website analyzed and your role
- Duration and methodology used
- Key objectives and success metrics
-
The Challenge (2-3 sentences)
- Specific usability problems identified
- User pain points and business impact
- Why redesign was necessary
-
Design Process (3-4 images)
- Before/after comparison screenshots
- Wireframes and iteration process
- Final high-fidelity prototype
- User testing results (if applicable)
-
Results & Reflection
- Specific improvements achieved
- What you learned about UX design
- What you'd do differently with more time
- Next steps for further improvement
Presentation Tips
- Practice your 7-10 minute presentation multiple times
- Prepare for questions about your design decisions
- Dress professionally (business casual for online presentations)
- Make eye contact with your audience and speak clearly
- Use storytelling to make your case study engaging
- Show confidence in your design choices while being open to feedback
📥 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
📤 Submission
Submit Your Work Here: Submission Form
🎉 Celebration Zone
YOU DID IT! You've just completed the most challenging and rewarding design project possible. You've proven that you can think, analyze, design, and present like a professional UI/UX designer!
What You've Accomplished:
- ✅ Conducted professional-level design analysis
- ✅ Created evidence-based improvement recommendations
- ✅ Mapped user flows and built wireframes
- ✅ Designed high-fidelity prototypes in Figma
- ✅ Delivered a compelling design presentation
You're Now Ready To:
- Apply for UI/UX design internships at tech companies
- Freelance as a designer for local businesses
- Build your own design portfolio website
- Start your own design agency with friends
- Pursue advanced design courses and certifications
Your Design Journey Continues: This is just the beginning! You now have all the fundamental skills of a professional designer. Keep practicing, keep learning, and most importantly - keep designing amazing things that make the world a better place!
Final Challenge: Share your presentation with someone who doesn't know design. If they can understand your process and get excited about your solution, you know you've truly mastered design communication!
📋 Project Assessment Rubric
Design Analysis & Problem Solving (40%)
- Depth and quality of original interface analysis
- Evidence-based improvement recommendations
- Clear identification of user pain points
- Competitive analysis thoroughness
Design Solution Quality (30%)
- Visual design improvements and polish
- User experience flow optimization
- Technical implementation in Figma
- Innovation and creativity in solutions
Portfolio & Documentation (20%)
- Case study presentation quality
- Process documentation completeness
- Professional presentation skills
- Portfolio-ready materials creation
Presentation & Communication (10%)
- Clear explanation of design decisions
- Professional presentation delivery
- Effective storytelling and engagement
- Response to questions and feedback
Bonus Considerations
- Evidence of user testing or feedback implementation
- Advanced prototyping techniques demonstration
- Consideration of accessibility and inclusive design
- Industry best practices application