Practice designing effective data display interfaces AND analyzing real-world form validation patterns to understand complete UI/UX flows.
Design a mobile interface that efficiently displays AND allows interaction with large datasets.
- Paper and pencil
- Sticky notes
- Timer
- Your design thinking brain!
Design an interface for a learning platform with:
- 1,200 lessons across different subjects
- 300 quizzes with progress tracking
- 50 instructors with profiles and ratings
- User progress data showing completion status
Step One: Information Architecture (6 min)
- How would you organize 1,200+ learning items?
- What are the top 3 user goals when browsing lessons?
- How do you balance browsing vs searching?
Step 2: Display + Interaction Design (8 min)
Sketch layouts that show how users both VIEW and INTERACT:
List View Approach:
- What lesson info is essential in list items?
- Where do interactive elements go (bookmark, start lesson, progress)?
- How do you show completion status at a glance?
Filter/Search Integration:
- How do users narrow down 1,200+ items?
- Where do filter controls live?
- How do you show active filters?
Step 3: User Flow Design (4 min)
Map the journey: Browse -> Filter -> Select -> Take Action
- What happens when a user taps a lesson?
- How do they track their progress?
- Where do quizzes and assessments fit?
Test form experiences in 3 different apps:
App Category 1: Social/Entertainment
- Try signing up for Instagram, TikTok, or similar
- Focus on: account creation, profile editing
App Category 2: Commerce/Services
- Test Amazon, food delivery, or booking app
- Focus on: checkout forms, address entry
App Category 3: Educational/Productivity
- Try Khan Academy, Duolingo, or work apps
- Focus on: registration, settings, quiz submissions
For each form, intentionally:
- Leave required fields blank
- Enter invalid email formats
- Use passwords that are too short
- Test auto-complete and keyboard switching
Create a quick comparison:
| App |
Error Timing |
Error Style |
User Guidance |
Best Feature |
Worst Issue |
| Social App |
|
|
|
|
|
| Commerce App |
|
|
|
|
|
| Educational App |
|
|
|
|
|
Think about how data display and forms work together:
Scenario Planning:
- When a user finds a lesson (display), how do they enroll (form)?
- If they want to filter by difficulty (form), how are results shown (display)?
- How does quiz-taking (form) connect to progress tracking (display)?
Design Principles:
Based on your analysis, write 3 key principles:
- "Great data displays should..."
- "Effective forms always..."
- "The best apps connect viewing and interacting by..."
Discussion Prompts:
- Which app had the smoothest combination of browsing and interacting?
- What's one form pattern you discovered that you'd want to copy?
- How did your data display design change when you considered user interactions?
- Seamless Flow: The best interfaces make viewing data and taking action feel like one continuous experience
- Context Matters: Forms work differently in social apps vs commerce apps vs educational apps
- Progressive Disclosure: Show the right amount of information and interaction options at each step
- Error Recovery: Great interfaces help users fix mistakes without losing their progress or context
This comprehensive practice prepares you to design complete user experiences that handle both information display and user input effectively!
Complete this activity and submit your work through the Activity Submission Form