Convention Scavenger Hunt

  1. On your phone, find 3 UI patterns that appear across multiple appsBottom navigation  ·  Pull-to-refresh  ·  Swipe-to-delete
  2. For each: Write what the pattern does and why multiple apps use it
  3. Be ready to share one pattern you found

Prayer

[Name], will you pray for us today?

Unit B: Make It Better App

Platform conventions exist because users expect them—breaking them has real costs

Today

Convention Scavenger Hunt
Platform Conventions
Task Flows vs. User Flows
Paper Prototyping Workshop
B1 Completion & B2 Work Session

By the end of today...

Platform Conventions

You'll understand why conventions exist and when it's justified to break them

Flow Diagrams

You'll know the difference between task flows and user flows (and when to use each)

Paper Prototypes

You'll have created testable paper screens for your new feature

Platform Conventions

Why they exist and when to break them

Conventions are learned expectations

Hamburger menu → expect navigation

Pull down → expect refresh

Users don't read instructions—they rely on patterns learned elsewhere.

Breaking a convention = forcing users to re-learn

What patterns did you find in the scavenger hunt? Why did they spread?

iOS vs. Android

iOSAndroid
NavigationEdge swipe + back in nav barSystem back button
Tab barsBottom tabsBottom nav OR top tabs
TypographySan FranciscoRoboto
ActionsAction sheetsBottom sheets

Native apps feel native when they follow their platform's conventions.

When to Break Conventions

Good break

Snapchat's camera-first launch — broke convention, but served core purpose

Bad break

Non-standard confirmation dialogs — confuses users, no clear benefit

Break conventions only when the benefit clearly outweighs the learning cost.

For the feature you're adding, are you tempted to break any conventions? Why?

Task Flows vs. User Flows

The pancake analogy (Erika Harano)

Task Flow

The ideal linear path, no branches

"Making a pancake": preheat → gather → mix → cook → flip → eat

User Flow

The real experience with decisions and branches

"Mimi, a parent of three, making pancakes":
START → Do I have all ingredients? → Can I substitute? → [task flow] → Make more? → END

Key insight: Task flows can be embedded within larger user flows.

Your B2 Task Diagrams

For B2, you're creating two task diagrams:

  1. Existing app flow (how it works now)
  2. Modified flow with your new feature added

Use color or a visual separator to demarcate the new feature from the original.

Paper Prototyping

Rapid iteration on paper

How to Create a Paper Prototype

  1. One screen per card/paper (index cards or 8.5×11 sheets)
  2. Draw enough detail that someone can "tap" elements while you flip pages
  3. Focus on structure and flow, not polish—paper is for thinking, not impressing

Demo: A quick 3-screen prototype for a simple task

Sketch Your First Screens (15 min)

  1. Create paper screens showing your new feature integrated into the existing app
  2. Start with 3-5 screens covering your new feature
  3. Think about: What conventions apply to your platform?

Quick Test in Pairs (5 min)

Tester

Point at elements and ask "what happens if I tap here?"

Designer

Flip to the next screen and narrate what happens

Note where testers get confused.

Next up

Work Session: Finish B1, polish B2a matrix, start B2 paper prototype + task diagrams

1:1 feedback available as instructor circulates

Due end of class:

  • B1 User Flow & Competitive Analysis (PDF)
  • B2a Competitive Analysis Matrix (PDF)

Due before Day 7:

  • B2 Paper Prototype + User Task Diagram (PDF)
  • Test with at least 1 person outside class
  • Bring your paper prototype to Day 7
1 /