UX Workshop: Product Design Project

What is UX Design?

  • UX stands for User Experience
  • UX design focuses on enhancing user satisfaction and usability when interacting with a product, system, or service
  • The primary goal of UX design is to create products that are intuitive, easy to use, and enjoyable for the users

UX Design Process

The UX design process consists of three main phases:

1. Research

Goal: Understand user needs, behaviors, and preferences to inform design decisions and create a user-centered experience.

Methods: User interviews, Surveys, Market analysis

2. Design

Goal: Create a structured and visually appealing user interface that meets user needs and aligns with project objectives.

Methods: Wireframing, Prototyping, Visual Design

3. Testing

Goal: Evaluate the usability and effectiveness of the design by gathering feedback from users and identifying areas for improvement.

Methods: Usability testing, A/B testing, Analytics

UX vs UI: What's the Difference?

  • UX design focuses on the overall user experience
  • UI design focuses on the visual and interactive aspects of the user interface
  • UI is part of UX design

Project Overview

Get into groups of 2-3 and pick a prompt from the options below. You'll work through the complete UX design process to create a product prototype.

Feel free to explore resources like Dribbble and Behance for inspiration!

Figma App Design Examples

Project Prompts

Choose one of the following app concepts:

1. Travel Planning App

Develop an app that assists users in planning and organizing their travel itineraries.

Features: destination search, trip planning, travel expense tracking

2. Language Learning App

Create an app that facilitates language learning for users interested in acquiring new language skills.

Features: interactive lessons, flashcards, pronunciation guides, progress tracking

3. Study Buddy App

Develop an app that connects teenagers with study partners based on shared interests and subjects.

Features: resource sharing, scheduling, task management for assignments and tests, study group creation

4. Comic Strip Creator

Design an app that allows teenagers to create and share their own comic strips.

Features: user-friendly comic editor, a library of characters and backgrounds, sharing capabilities

5. Pet Care App

Create an app that helps pet owners manage their pets' health, appointments, and daily needs.

Features: vaccination schedules, medical records storage, grooming reminders, community forums

6. Social Media for Music

Design a social media app specifically tailored for music enthusiasts to connect, discover, and share their passion for music.

Features: personalized music feeds, profile customization with favorite genres and artists, a platform for sharing music and playlists

Step 1: Research and Brainstorm

Before designing, answer these key questions about your users:

  1. What are the primary goals and objectives of the users when interacting with the product?
  2. What are the pain points or challenges users currently face in achieving their goals?
  3. What features or functionalities are most important to users?
  4. How do users typically navigate similar products or services?
  5. How do users currently fulfill their needs or goals related to the product without using the product?
  6. What are users' past experiences with similar products or services, and what did they like or dislike about them?

Step 2: Wireframing

Sketching and Ideation

  • Create a User Flow/Page List
  • Start with rough sketches to explore layout ideas and different screen configurations

Wireframe Creation

Create low-fidelity wireframes that focus on the structure and layout of the interface without getting into detailed design elements like colors and typography.

Include:

  • Key components such as navigation menus, content sections, buttons, forms, and other interactive elements
  • Placeholder content and simple shapes to represent images, text, and other visual elements

Step 3: Design the Brand (Create the UI Kit)

Design the visual identity of your brand:

1. Logo Design

Create a visually appealing and memorable logo that embodies the essence of the brand and can be easily recognized across various platforms and touchpoints.

2. Color Palette

Select a cohesive color palette that reflects the brand's personality and evokes the desired emotions and associations.

3. Typography

Choose appropriate fonts that complement the brand's visual identity and enhance readability across different mediums.

4. Imagery and Visual Elements

Define the style of imagery and visual elements (e.g., illustrations, icons, buttons) that align with the brand's aesthetic.

Pattern Library Template

Step 4: High Fidelity Prototype

  • Once the low-fidelity prototype has been tested and refined, design high-fidelity prototypes that include detailed design elements such as colors, typography, images, and realistic content
  • Ensure consistency with the final visual design and brand guidelines

Step 5: Add Interactivity and Animation

  • Incorporate interactive elements and animations to simulate user interactions and demonstrate functionality
  • Use transitions, gestures, and animations to create a more engaging and realistic user experience

Step 6: Test Your App

  • Choose 2 other groups to share your prototypes with in order to test your app's usability
  • Test specific interactions, user flows, and features to ensure they meet user needs and expectations
  • Gather feedback on the overall usability, visual design, and interactive elements of the prototype
  • Note if there were any challenges or difficulties and work on an improved design

Step 7: Present Your App

  • Export frames and videos from your Figma file to present the final product prototype
  • Talk about how you came up with your design, flow, visual identity, and the results of your user testing

Nice Job! You've walked through the complete UX design process from research to presentation. Your vision about the app's function and look should now be solid, and you've created a working prototype to demonstrate your product concept!