Background
Navigation architecture shapes every downstream screen. Tab bars and drawers each win in different contexts — showing you can compare patterns with evidence separates junior mockups from product thinking.
Your mission
For a student career app with five core areas (e.g. Home, Jobs, Tracker, Experience, Profile), design and prototype two navigation patterns:
- Pattern A — bottom tab bar (4–5 tabs)
- Pattern B — hamburger/drawer + optional FAB or top tabs
Build five screens per pattern (same IA, different chrome) and document when each pattern wins.
Required screens (both patterns)
- Dashboard / home
- Job search or listings
- Application tracker
- Experience or challenges hub
- Profile or settings
Requirements
- Interactive Figma prototypes for both patterns with tap flows between all five screens.
- Annotations — tap target sizes, thumb reach zones (one-handed use), badge/notification placement.
- Comparison doc (1–2 pages) covering:
- Discoverability of secondary features
- Scalability when you add a 6th section
- Accessibility (keyboard/screen reader if web; VoiceOver labels if native-style)
- Your recommendation and for which user segment
- Edge cases — logged-out state, modal overlay behavior, deep link landing.
Evaluation criteria
- IA consistency — same five destinations in both prototypes; only chrome differs.
- Annotated reasoning — not just aesthetics; reference reachability and task frequency.
- Prototype quality — flows are clickable without broken hotspots.
- Recommendation — clear winner for a persona, not "it depends" without criteria.
Tips
- Use iPhone 15 Pro frame for mobile; show safe areas.
- Tab bar: max 5 items; label + icon for each.
- Drawer: show open + closed states; don't hide critical actions two levels deep.
Submission checklist
