App Redesign Field Guide — WWDC25

The App Redesign Field Guide

Based on "Design foundations from idea to interface" (WWDC25)

How to Use This Guide

Use this document when performing a design audit on an existing app. Move through the four layers of the Audit Framework (Structure, Navigation, Content, Visuals) to identify friction points and apply the corrected patterns.

Part 1: The Foundation Audit (Structure & IA)

Goal: Reduce cognitive load by defining exactly what the app is.

Before touching a pixel, the app must answer The 3 Critical User Questions immediately upon launch. If the user has to guess, the design has failed.

1. The Diagnostic Test

Open the app's home screen. Can you answer these three questions instantly?

Where am I? (Context)
What can I do? (Action)
Where can I go? (Navigation)

2. Common Symptoms of Failure

The Symptom	Why it Fails	The Fix
The "Vague Menu" Trap	Hiding the primary context behind a hamburger menu (`≡`) leaves the user unanchored.	Replace the menu with a Toolbar containing a clear Title and screen-specific Actions.
Branding Over Utility	Large, decorative headers ("Your Jams") that look nice but don't explain the utility.	Use standard System Titles (e.g., "Records") that describe the functional section.
The "Empty" Home	A screen that looks nice but offers no clear path forward (browsing without action).	Ensure primary actions are visible immediately (see Navigation below).

3. The IA Cleanup Workflow

If the app feels bloated, run this process:

List: Write down every feature (even nice-to-haves).
Filter: Ask, "When/Where is this used?"
Prune: Remove the non-essential; rename the unclear; group the related.

Part 2: Wayfinding & Architecture (Navigation)

Goal: Provide a sense of place and control.

Navigation is not just about moving around; it is about architecture. You must distinguish between Global Navigation (Tab Bar) and Contextual Action (Toolbar).

1. The "Tab Worthiness" Test

Does a feature deserve a spot on the bottom Tab Bar? Use this logic to decide.

Is it a destination? (e.g., "Records", "Search") → YES.
Is it an action? (e.g., "Add", "Create") → NO. Move to the Toolbar or inside a specific screen.
Is it a sub-set? (e.g., "Crates" inside "Records") → NO. Merge it into the parent tab.

2. The Anatomy of a Perfect Screen

Use this schematic to place elements correctly:

 _________________________________________
|  < Back     [Screen Title]      (+) ... |  <-- TOOLBAR
|_________________________________________|      • Context (Where am I?)
|                                         |      • Local Actions (Add, Edit)
| [Content Area]                          |
|                                         |
|  • List Items                           |  <-- CONTENT
|  • Collections                          |      • Primary task flow
|  • Grids                                |
|                                         |
|_________________________________________|
|   (A)          (B)           (C)        |  <-- TAB BAR
|  Global       Global        Global      |      • Navigation only
|   Nav          Nav           Nav        |      • No actions
|_________________________________________|

3. The Fix: Simplifying the Vinyl App

Before: Tabs were [Records] [Crates] [+] [Swaps] [Saves].
- Critique: Crates is a subset of Records. + is an action, not a place.
After: Tabs are [Records] [Sharing] [Wishlist].
- Result: The hierarchy is flattened. The + action moves to the top right of the "Records" screen (Toolbar).

Part 3: Data Density & Scannability (Content)

Goal: Guide the user to what matters most using Progressive Disclosure.

Don't dump the database onto the screen. Show just enough to get started, then reveal more.

1. Layout Decision Matrix

Choosing the wrong layout kills scannability. Use this guide:

Layout Type	Best Used For...	Avoid When...
Grid	Highly visual items (Album Art, Photos).	You have long text titles or low data density (1-2 items).
List	Scanning text, high density, heterogeneous data.	You rely purely on visuals to differentiate items.
Collection	Grouping items by theme (horizontal scroll).	You need to show everything at once without hiding items.

2. Grouping Strategies

If a list is too long, break it up using these human-centric themes:

Time: "Recent", "Summer", "Friday Night".
Progress: "Continue Watching", "Drafts".
Patterns: "Genre", "Style", "Related Items".

3. The "Progressive Disclosure" Pattern

Instead of showing all items immediately:

Show a Collection (horizontal scroll) of the top 5 items.
Add a Disclosure Indicator (>) or "See All" button.
Let the user tap through to a dedicated List View for the full data set.

Part 4: Visual Physiology (Visual Design)

Goal: Use hierarchy to reduce eye strain and communicate personality.

1. The Squint Test (Pro Tip)

To test your visual hierarchy, squint your eyes until the screen blurs.

The Goal: You should still be able to identify the most important element (the anchor) and the structure of the page.
The Fail: If the screen looks like a uniform grey blob or if a secondary element (like a decorative banner) overpowers the content.

2. System Materials & Accessibility

Don't hardcode values. Use Apple's system standards to ensure your app adapts to Dark Mode and Dynamic Type.

Text Styles: Use Large Title, Headline, Body, Caption 1.
- Benefit: automatically scales text for users who need larger fonts.
Semantic Colors: Use Label, SystemBackground, Separator.
- Benefit: Automatically ensures perfect contrast in both Light and Dark modes.

3. Improving Text-on-Image Legibility

When placing text over images (e.g., Album Art cards):

The Problem: High contrast images make text unreadable.
The Fix: Add a subtle material layer (blur or gradient) behind the text. Do not rely on drop shadows alone.

Part 5: The Redesign Checklist

Use this worksheet during your design critique.

Structure

Does the home screen immediately tell me where I am?
Is the primary user goal obvious without scrolling?

Navigation

Does the Tab Bar contain only destinations (no actions)?
Are we using SF Symbols for instant recognition?
Are screen-specific actions located in the top Toolbar?

Content

Are we using Progressive Disclosure to hide complex lists?
Is the layout (List vs. Grid) appropriate for the text density?
Are items grouped by human logic (Time, Progress) rather than just alphabetical?

Visuals

Does it pass the Squint Test? (Is there a clear visual anchor?)
Are we using System Text Styles for dynamic scaling?
Are colors Semantic (e.g., Label color) rather than hardcoded hex codes?