Developing Home Screen of Mobile App
Home Screen — first thing authorized user sees. This is aggregator: shows most important from different app sections, provides quick access to key actions and sets tone for entire product. Design it poorly — user opens app and doesn't understand where to go and what to do.
Architectural decision: sections vs feed vs dashboard
Three fundamentally different approaches to home screen:
Sectioned list — vertical scroll with horizontal carousels inside sections. Classic for eCommerce and content apps (Spotify, Netflix, Airbnb). Implemented via UICollectionView with compositional layout on iOS or LazyColumn with nested LazyRow in Compose. Technical nuance: nested horizontal scroll in vertical container requires explicit nestedScrollEnabled on Android, otherwise scroll gesture captured incorrectly.
Dashboard with widgets — grid or arbitrary block layout with metrics, quick actions, statuses. Characteristic for financial apps, banks, health. On iOS widgets as such — other thing (WidgetKit for device screen), inside app just custom grid layout.
Personalized feed — infinite scroll of mixed content ranked for user. Requires backend with recommendation system; screen itself — UITableView/LazyColumn with heterogeneous cell types.
Choice determined not by designer preferences — but product type and main user use case.
Personalization and "new" vs "active" user states
Home Screen for new user (just registered, no data) and user with history — two different screens. New user needs guidance: onboarding tips, empty placeholders with data fill prompts, category recommendations. Active user — real data, personalized content, history.
Show new user empty widgets — perceived as bug. Design must explicitly solve this, not leave for developer.
Header and personal greeting
Personal "Hi, Alex" — good pattern creating personal product feeling. Technically: user name from local cache (UserDefaults/SharedPreferences/MMKV), don't wait API. Avatar from cache with placeholder while loading — URLCache on iOS, Coil + DiskCache on Android.
Notification badge in header (bell icon with number of unread) — popular element. Number from push payload or API; UNUserNotificationCenter.current().getDeliveredNotifications() on iOS returns only delivered, not unread — need custom counter logic.
Quick actions
Horizontal button row under header: "Transfer", "Pay", "History", etc. Quantity — not more than 4–5, otherwise icons too small or need horizontal scroll breaking discoverability. If more actions — show 4 + "More", opening full list.
Quick action icons — custom (not SF Symbols) because often carry brand meaning. States: default, pressed (scale down 0.95), disabled.
Banners, promo and notifications inside screen
Promo banner top or after header — common element. Carousel with auto-scroll (PageViewController on iOS, HorizontalPager in Compose). Auto-scroll should stop when user interacts manually — otherwise extremely annoying.
In-app notifications (not push) — slips with important message: "Confirm email", "Update app", "Card expiring". Dismissible, save dismissed-state to UserDefaults/DataStore, don't appear again.
Home screen performance
Home Screen often loads data from multiple APIs in parallel. On iOS via async let in Swift Concurrency or TaskGroup. On Android via viewModelScope.launch + async/await in coroutines. Both approaches — parallel requests, not sequential. Sequential requests give sum TTI (Time to Interactive) instead of maximum.
Skeleton during loading — mandatory. Home Screen without skeleton on slow internet shows empty white screen for 2–4 seconds. Perceived as crash.
Repeat opening optimization: data cached (URLCache, Retrofit + OkHttp Cache, or custom storage), screen displays cache immediately and updates in background — stale-while-revalidate pattern.
Process and timeframe
| Scope | Timeframe |
|---|---|
| Simple home screen, static sections | 1.5–2 days |
| Personalized, multiple APIs, skeleton | 2–3 days |
| Widgets + onboarding + quick actions | 3–4 days |
Cost calculated individually after TZ and architecture analysis.