Project 3: Conference Mobile Website Interface

Project Overview

Learning Objectives

• Apply mobile-first design principles to create responsive, touch-friendly interfaces
  
• Translate a brand’s visual system across media while maintaining visual consistency and brand recognition
  
• Develop user experience thinking through content organization, user flow, and interaction design
  
• Gain fluency in Figma for interface design including components and interactive prototyping
  
• Practice content prioritization for mobile contexts and limited screen space
  
• Create professional digital portfolio pieces that demonstrate systematic design thinking across multiple media
  

Brand Translation Framework

Conference Brand Continuity

• Color palette: Same colors, adapted for digital display and accessibility requirements
• Typography: Same font families, sized for mobile screen readability
• Visual approach: Same overall aesthetic and design personality
• Content: Same conference information, reorganized for mobile user affordances

• Touch-friendly interaction - buttons, links, and navigation sized for finger taps
• Screen size optimization - content prioritized for small screens and vertical/horizontal scrolling
• Visual affordances - clear visual cues showing users how to interact with elements
• Interface conventions - familiar mobile navigation patterns

Content Reorganization Strategy

• Chunking: Breaking complex information into digestible, organized groups
• Information architecture: Logical organization and labeling of content
• Content prioritization: Deciding what information users need first, second, third
• User flow planning: Mapping the path users take through your interface

• Quick information access - event details, location, registration
• Schedule browsing - session times, speaker information, workshop details
• Contact and sharing - easy ways to register, get directions, or share event details

1. Essential information - Date, location, registration
2. Speakers and sessions - key attractions and main programming
3. Detailed schedules - comprehensive programming information
4. Additional resources - registration, sponsors, contact information

Project Timeline & Phases

Draft 1: Content Organization & Lo-Fidelity Wireframes

Content Strategy & Information Architecture Planning

1. 
   Content Chunking & Prioritization
   
   • List all content from your Conference Poster
   • Group related information into logical chunks (speakers together, schedule together, etc.)
   • Rank by importance for mobile users: Critical → Important → Nice-to-have
2. 
   Information Architecture
   
   • How many screens will your website require?
   • What content chunks go on each screen?
   • How do users navigate between different information sections?
   • What affordances will guide user interaction? (buttons, links, visual cues)
3. 
   User Flow Mapping
   
   • Primary user journey: Discovery → Essential Information → Registration/Contact
   • Secondary journeys: Schedule browsing, speaker information, location details
   • Navigation patterns: How users move through your content organization

Lo-Fidelity Wireframing in Figma

• Mobile frame size: iPhone 16
• Figma file organization: Use the page titled " Website Draft 1"
• Wireframe style: Grayscale boxes, placeholder text (Lorem Ipsum), simple shapes
• Focus on: Information organization and user flow, not visual design

• Approach A: Single long-scrolling page with all content
• Approach B: Multi-screen navigation with main menu and sub-pages
• Approach C: Card-based interface with content organized in digestible chunks
• Approach D: Timeline/schedule-focused organization highlighting temporal information
• Approach E: Visual/gallery-focused approach emphasizing artwork and speaker imagery

• Every content element from poster must be accounted for in wireframes
• Navigation elements clearly indicated (buttons, links, scroll areas)
• Visual affordances specified (what looks clickable, scrollable, or interactive)
• Information chunking demonstrated through grouped content areas
• Visual hierarchy indicated through different box sizes and positioning

Presentation & Feedback

• Share Figma link for group review and feedback
• 2-minute presentation explaining your content organization strategy
• Peer feedback session on user flow logic and content prioritization

Draft 1 Assessment Criteria

• Content Organization (55%): Clear user flow logic, appropriate information prioritization for mobile context
• Wireframe Exploration (45%): Five distinct approaches showing systematic thinking about mobile interface possibilities

Draft 2: Hi-Fidelity Design Development

Design Development Process

1. 
   Typography-Focused Version
   
   • Emphasize text hierarchy and readability on mobile screens
   • Apply your conference typography system adapted for mobile display
   • Focus on clear information communication and easy scanning
   • Use white space and text sizing strategically for mobile reading
2. 
   Visual-Rich Version
   
   • Integrate conference artwork and speaker imagery prominently
   • Balance visual content with essential text information
   • Create engaging visual experience that reflects art + technology theme
   • Consider image loading and performance on mobile devices
3. 
   Interface-Focused Version
   
   • Emphasize clear navigation and user interface elements
   • Design obvious affordances showing users how to interact with content
   • Focus on familiar interface conventions and intuitive organization
   • Use effective chunking to organize complex conference information

Figma Skills Application

• Auto Layout: For organized text and content areas
• Grid systems: Consistent spacing and alignment using Figma's layout grids
• Component creation: Design your own buttons, cards, and interface elements (don't use existing libraries)
• Visual hierarchy: Clear information organization through size, color, and positioning

• Touch target sizing: Minimum 44px for buttons and interactive elements
• Text legibility: Minimum 16px for body text, appropriate sizing for mobile reading
• Navigation patterns: Clear, familiar ways for users to move through content
• Content chunking: Logical grouping of related information for easy scanning

Brand System Application

• Color adaptation: Conference colors optimized for screen display and accessibility
• Typography scaling: Poster fonts adapted for mobile screen reading
• Visual consistency: Same design personality expressed through mobile-appropriate techniques
• Content voice: Same conference tone and messaging in mobile-optimized format

Technical Requirements

• Work in organized Figma file with clearly labeled frames
• Connect all screens using Figma's prototyping tools
• Create your own interface elements - design buttons, cards, navigation rather than using existing libraries
• Use Auto Layout for organized content areas
• Apply consistent spacing using grid systems for professional appearance

Draft 2 Assessment Criteria

• Hi-Fidelity Design Quality (35%): Professional mobile interface design showing strong visual hierarchy
• Brand Translation (30%): Effective adaptation of conference brand for mobile while maintaining consistency
• Mobile UX Application (25%): Appropriate mobile interface conventions and usability considerations
• Figma Technical Skills (10%): Effective use of components and layout tools

Final: Interactive Prototype & Complete Brand System

Interactive Prototype Development

1. 
   Navigation System
   
   • Connect all screens using Figma's prototyping tools
   • Logical user flow from homepage through registration/contact information
   • Clear affordances - users understand how to move through content
   • Return/back functionality for multi-screen approaches
2. 
   Interactive Elements
   
   • Clickable buttons leading to appropriate screens
   • Clear visual cues showing what's interactive vs. static
   • Scroll behavior for long-form content areas
   • Simple transitions between screens (slide, fade, smart animate, etc.)
3. 
   Interface Design Application
   
   • Touch-friendly interactions sized and spaced appropriately
   • Familiar navigation patterns that users expect on mobile devices
   • Visual hierarchy that guides users through your content effectively
   • Content chunking that makes complex information digestible

Complete Conference Brand System

• Brand overview: Conference concept, audience, and values
• Visual identity guidelines: Color usage, typography rules, visual treatment standards
• Information architecture: How content is organized and chunked across different media
• Interface design decisions: How your mobile design uses affordances and navigation patterns effectively

• Conference poster (final version from Project 2, potentially revised)
• Mobile website prototype (interactive Figma prototype with working navigation)
• Mockups and applications: Both poster and mobile interface shown in realistic use contexts
• Process documentation: Evolution from initial concepts through final brand system

Final Presentation Requirements

• Interactive prototype: Working Figma prototype link demonstrating full user flow
• Brand system overview: Both projects presented as cohesive conference identity
• Process documentation: Clear evolution showing systematic design development
• Professional mockups: Realistic applications showing poster and mobile website in context
• 5-minute presentation: Explain conference concept, design decisions, and brand system thinking

Final Assessment Criteria

• Interactive Prototype Quality (40%): Working navigation, appropriate mobile UX, effective user flow
• Brand System Coherence (35%): Successful translation of conference identity across poster and mobile media
• Process Integration (25%): Clear demonstration of iterative design methodology and systematic improvement across both projects

Technical Guidelines

Figma File Organization

• Organized pages: Draft 1 Wireframes, Draft 2 Hi-Fi, Final Prototype, Process Documentation
• Created interface elements: Your own designed buttons, navigation, and content areas
• Prototype links: Share prototype link, not design canvas link for final submission

Mobile Interface Standards

• Screen size: iPhone 16 (393 × 852px) or equivalent standard mobile dimensions
• Touch targets: Minimum 44px × 44px for all interactive elements
• Text sizing: 16px minimum for body text, larger for headlines and important information
• Spacing: Consistent margins and padding using 8px or 16px grid system

Prototyping Best Practices

• Logical flow: Every interactive element should lead somewhere meaningful
• Consistent navigation: Clear way to return to main navigation from any screen
• Complete content: All placeholder content should be replaced with actual conference information
• Clear affordances: Visual cues that help users understand how to interact with your interface

Cross-Project Integration

• Visual consistency: Mobile website should feel like natural extension of poster design
• Content coordination: All information should be consistent between poster and mobile versions
• Brand recognition: Conference identity should be immediately recognizable across both media

Assessment Rubric Summary

Re-cap and Success Strategies

Content Strategy

• Maintain brand consistency while adapting content for mobile interface design
• Use effective chunking - group related information for easier mobile browsing
• Apply content prioritization - what conference information do mobile users need first?
• Plan clear user flows - logical paths through your interface organization

Design Process

• Start with wireframes before visual design - organize content and user flow first
• Study mobile interface conventions - users expect certain navigation patterns and affordances
• Test your prototype regularly - ensure navigation works logically throughout development
• Integrate feedback systematically - use critique insights to improve interface organization

Technical Skills

• Master Figma fundamentals through provided tutorials and mobile interface examples
• Design your own interface elements - create buttons and navigation that fit your conference brand
• Prototype incrementally - add interactivity step by step, testing each connection
• Focus on clear affordances - make it obvious to users how to interact with your interface

Brand System Thinking

• Maintain conference identity while optimizing for mobile interface design
• Consider media relationships - how do poster and mobile website work as a system?
• Document design decisions - explain how you solved mobile-specific interface challenges
• Connect to your broader design learning - consider how this work builds on concepts from other classes or relates to mobile interfaces you use regularly