Product, service, UI/UX

This category could include real-world commercial projects, speculative design, or more in-depth research projects.

To participate in a real-world project, you will need to locate a client — a company, event, organization, group, etc. — that has a specific challenge. You can then work with the client to design a solution that meets a need or opportunity. Whether you are working with web and information technology, or 3D printing physical prototypes, many aspects of the design process will be similar.

Depending on the deliverable, you may want to explore related media pages for technical and process tips.

Types of product or service projects

• Functional mobile or web app
• High fidelity interactive mockups (UI)
• Speculative or discursive design projects
• Comprehensive user experience (UX) research
• Instructional design product
• Digital fabrication products or prototypes (handheld objects, furniture, wearables, clothes, toys, etc.)
• Physical computing or Internet of Things (IoT) device

Production requirements

1. Research, design thinking, and ideation

   • Design Frameworks
     • IDEO Design Kit
     • Stanford D.School
     • Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions
   • Specific UX Methods
     • Types of UX research tools and when to use them
     • To understand a problem
       • Interviews (see suggestions for user interviews)
       • Surveys (Google Forms, etc.)
       • Field studies
       • Data analytics
     • To define a problem
       • Themes and insights
       • Affinity Maps: A workshop-style method for organizing research findings and design ideas.
       • Competitor testing (notes taken while critically examining existing tools)
       • Empathy Maps: What does a hypothetical user feel, think, say, and do? Who are they?
       • Personas: Imagining specific hypothetical user biographies.
         • Counterpoint: Are personas a useful tool?
         • Focus on user needs not their biographical identities.
       • Journey Maps: What happens during the user's experience from awareness to desired outcome? (Includes activities outside of the digital app experience)
     • To explore a problem
       • Card sorting
       • User Flows: A flowchart depicting a subsection of the larger user journey, focusing specifically on the use of the software or tool.
         • Recommended Flowchart tools:
           • FigJam — Easy and powerful whiteboard app within Figma
           • Excalidraw — Simple app for flowcharts and wireframes, featuring a hand-drawn aesthetic.
           • Miro — Another digital whiteboard app
           • Post-its and paper!
       • Low-fidelity prototyping (paper or digital wireframes in Figma etc.)
   • Branding
     • Your project may or may not include high-fidelity designs; focusing on simple wireframes, user analysis, and functionality can be sufficient for a UX project. But if you are going to develop aesthetic visual designs, you might consider the brand's core values and messaging at this stage alongside your product's functional design.
     • For branding projects, complete a branding research document.
     • Designing Brand Identity by Alina Wheeler and Debbie Millman (PSU Library eBook)
     • Guide to Successful Bran Positioning in Your Market
   • Design Systems
     • Everything you need to know about Design Systems
   • Mobile App design
     • Mobbin — Gallery of real world mobile app screen designs.
     • PageFlows — Excellent gallery of user flow videos from apps and websites.

2. Prototyping and production

   • CAD modeling
     • Rhino3D (recommended)
     • SolidWorks(free access to PSU students)
     • AutoCad (free education license available)
   • Polygonal/Nurbs modeling
     • Blender, Autodesk Maya, Maxon C4D, Foundry Modo
   • Digital fabrication
     • 3D printing — Shapeways will print designs and mail them to you.
     • Laser cutting
     • Advanced fabrication: CNC Routing, turning, and milling, water-jet cutting (using fabrication equipment requires proximity to PSU Main Campus and coordination with facility operators in advance)
     • Device programming: Arduino
   • UI/UX Design
     • LinkedIn Learning UX Learning Pathway
     • Software
       • Figma: Web app for responsive UI design, interactions, prototypes, and collaboration.
       • Mockup: Web app for simple app prototypes and wireframes.
       • Excalidraw: Web app for simple wireframes and diagrams using a hand-drawn style.
       • Sketch: UI Design and prototypes; web app or MacOS.
       • Adobe Illustrator: Powerful vector editor
       • Framer: Web app for UI design and prototypes
       • Flinto: MacOS app for UI designs and prototyping; used in-house at Apple.
   • Product Mockups
     • Free Mockup: Photoshop templates for displaying 2D designs on business cards, t-shirts, etc.
     • Mockups Design: More Photoshop templates for product images
   • UX Research
     • A project in this area could take the form of a case study, video presentation, website, or other means of communicating in-depth research into a particular experience design.
     • Complete beginner's guide to UX research
     • How to write a UX case study
     • Collection of case studies
     • More UX case studies:
       • Cujo app and branding for home security
       • [Uber] app design
       • Red Pen design feedback app
     • Data Visualization Learning Path (LinkedIn Learning)
   • Web design and development
     • Website dev tools and technology: VS Code, Github, Git Pages Tutorial 1, Git Pages Tutorial 2, Webflow — See web page for more.
     • Everything list: Extensive list of web tools and technology
   • App Development
     • FlutterFlow.io – Visual low/no-code app development software
     • Xcode — Apple's development suite for iOS; generally easier than developing for Android as it has a visual editor in addition to coding. Still a ton of work to program anything complex. Stick to something simple if you're new to this.

3. Testing and analysis

   • User testing
     • Conduct a survey online
     • Get your friends to test your prototype
     • Use specific and structured questions to get useful feedback.
   • Performance testing
   • Accessibility evaluation
   • Heuristic evalution: comparing your design to industry benchmarks for usability. The 10 Usability Heuristics from the Neilson Norman group are commonly used.

4. Iterate

   • Keep refining and testing ad infinitum!
   • Your project might never advance beyond low-fidelity prototypes, and that could be fine!
   • High-fidelity designs should usually only be made after a low-fidelity prototype. One option for limited time is to create high-fidelity (fully-designed) designs for only a limited number screens or sections, to depict the UI without a comprehensive high-fidelity prototype.

Proof of concept

The goal of a proof is to demonstrate that you have a strong grasp of relevant research, design, fabrication, and/or development principles.

• For a product or service, a low or high fidelity mockup would demonstrate the essential functionality of your idea.
• For a research project, you could collect some test data and compose a brief presentation of your research, or demonstrate your plan to collect primary data and outline any testing or visualization strategies.