Process
🔍 Research & Discovery
Kickoff: Understood To-Bout’s mission: help Gen-Z Americans manage tasks while fostering social connection. Identified key challenges: task overwhelm, disconnected social life, and need for fun, collaborative motivation.
Benchmarking: Studied popular to-do and planning apps → discovered none had social feeds, revealing a niche opportunity. Noted patterns for likes, comments, reposts, and navigation layouts.
Target Audience: Gen-Z (18–28), tech-savvy, emotionally aware, collaboration-focused, value work-life balance, and expect playful, intuitive interactions.
User Insights: Future power users highlighted that To-Bout transforms productivity into something social and engaging, fostering both accountability and connection.
Pain Points: Users want instant access to friend activity, easy task sharing, and clear visual hierarchy without clutter.
🧠 Define & Ideate
Mapped user stories:
“As a user, I want to see my friends’ completed tasks so I can celebrate milestones with them.”
Developed user journey maps & storyboards illustrating daily app interactions.
Designed information architecture and main flows: posting tasks, engaging with friends, checking notifications.
Ran quick wireframe tests with three versions → Option 3 was fastest and most intuitive, refined further for clarity.
🎨 Design & Prototype
Developed responsive iOS-friendly UI with light theme for energy, readability, and versatile use.
Defined logo, color palette, typography, ensuring WCAG contrast compliance.
Designed core social feed:
Task cards with status, deadlines, and milestones
Commenting, liking, and sharing interactions
Notifications for friend activity (top-right button added after usability feedback)
Prepared interactive Figma prototype, demonstrating feed scrolling, task posting, and engagement features.
Built UI kit & variables to maintain consistency for future iterations.
🧪 Testing & Iteration
Conducted usability tests: verified scroll behavior, intuitive interaction with likes/comments, and notification access.
Iterated based on feedback → added notification button and clarified task card hierarchy.
Checked contrast ratios → adjusted colors for accessibility compliance.
Validated that the feed was fun, social, and easy to navigate.
Final result
Core social feed allows users to share completed tasks, celebrate milestones, and interact with friends intuitively.
Notifications & visual hierarchy improved engagement and reduced confusion.
Light theme enhances energy and readability while providing a flexible foundation for future dark mode.
MVP-ready design sets stage for additional features: shared tasks, advanced notifications, animations, and corner-case handling.
Design demonstrates ability to:
Understand users & business goals
Use research, IA, and user testing to drive decisions
Prototype, test, iterate, and deliver a polished, accessible solution
Learnings
This project reinforced the importance of user-centered design, rapid prototyping, and iteration. I learned to balance creativity with familiar patterns, prioritize high-impact features for an MVP, and ensure accessibility and clarity, all while designing a fun, social, and engaging experience for Gen-Z users