To-bout
New feature in shared social calendar app
Role: Product Designer (UX/UI)
Platforms: IOS
Skills: UX/UI Designer — Research, IA, User Stories, Wireframes, Prototyping, UX Writing, Usability Testing
Challenge
Design a social feed. It's enables Gen-Z users to share and engage with each other’s tasks, milestones, and achievements
Success criteria
Main user flow can be done in 6 seconds (comment and reaction)
Output
A light-themed, iOS-friendly social feed. Users can post completed tasks, celebrate milestones, comment, like, and stay connected with friends. Intuitive, playful
Process
🔍 Research & Discovery
Kickoff
Understood To-Bout’s mission. Help Gen-Z manage tasks while fostering social connection. Identified key challenges. Task overwhelm, disconnected social life, need for fun and motivation.
Benchmarking
Analysed popular to-do and planning apps. Discovered none featured social feeds, revealing a niche opportunity. Noted patterns for likes, comments, reposts, and navigation layouts.
Target
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.
Some spicy added because of jokes (like hamburger bar)
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