Loft AI
An AI-enhanced bookmarking app designed to help users rediscover what matters.
Save Anything, Remember Anything
Project
Project
Loft AI: An AI Bookmarking App
Loft AI: An AI Bookmarking App
My Role
My Role
Junior Product Designer
UX/UI & Interaction Designer
Junior Product Designer
UX/UI & Interaction Designer
Duration
Duration
2.5 months
2.5 months
Type
Type
Real Client Project
Real Client Project
Tools
Tools
Figma, Linear, Notion, Jitter, Canva, Lottie
Figma, Linear, Notion, Jitter, Canva, Lottie
Platform
Platform
Mobile &
Web
Mobile &
Web
Problem Statement
Problem Statement
Saving is easy. Remembering is not.
Saving is easy. Remembering is not.
People save content with intent — but without context.
Over time, bookmarks pile up, disconnected from the reasons they were saved in the first place.
People save content with intent — but without context.
Over time, bookmarks pile up, disconnected from the reasons they were saved in the first place.
Context & Role
Context & Role
Stepping into ownership on a real AI product.
Stepping into ownership on a real AI product.
Loft AI was a real client project I worked on as a junior designer and founding solo designer at our agency.
The client had already defined the product vision, core flows, and features. My responsibility was to translate that vision into a clear and usable experience — shaping the UX structure, designing high-fidelity screens for mobile and web, building an interactive prototype, and iterating continuously based on client and senior designer feedback.
Loft AI was a real client project I worked on as a junior designer and founding solo designer at our agency.
The client had already defined the product vision, core flows, and features. My responsibility was to translate that vision into a clear and usable experience — shaping the UX structure, designing high-fidelity screens for mobile and web, building an interactive prototype, and iterating continuously based on client and senior designer feedback.
UX Structure
UX Structure
Hi-Fi UI Designs
Hi-Fi UI Designs
Interactive Prototype
Interactive Prototype
Responsive Design
Responsive Design
Iterations
Iterations
Understanding the Space
Understanding the Space
Before designing Loft, I studied how people currently save and rediscover content.
Before designing Loft, I studied how people currently save and rediscover content.
I analyzed leading bookmarking and knowledge tools to understand their interaction patterns, content organization models, and visual systems.
I analyzed leading bookmarking and knowledge tools to understand their interaction patterns, content organization models, and visual systems.
Pixel App
Pixel App
Card-based grid layout
Card-based grid layout
Pocket App
Pocket App
Content feed focused on reading
Content feed focused on reading
Mymind App
Mymind App
Visual-first, AI-assisted clustering
Visual-first, AI-assisted clustering
Raindrop App
Raindrop App
Folder-driven organization
Folder-driven organization
Pixel App
Card-based grid layout
Pocket App
Content feed focused on reading
Mymind App
Visual-first, AI-assisted clustering
Raindrop App
Folder-driven organization
Key Insights
Key Insights
Most tools depend on folders, tags, and manual sorting — assuming users are willing to organize consistently.
In reality, saved content often piles up faster than it’s structured.
Most tools depend on folders, tags, and manual sorting — assuming users are willing to organize consistently.
In reality, saved content often piles up faster than it’s structured.
Visual Direction & Branding
Visual Direction & Branding
Shaping Loft’s Visual Direction
Shaping Loft’s Visual Direction
I built Loft’s visual identity by defining the brand language, designing the logo from scratch, and establishing a calm, structured design system.
I built Loft’s visual identity by defining the brand language, designing the logo from scratch, and establishing a calm, structured design system.
Mood-board
Mood-board
I explored calm, modular interfaces with soft gradients and structured card layouts, creating warmth and clarity.
I explored calm, modular interfaces with soft gradients and structured card layouts, creating warmth and clarity.
Logo & Style guide
Logo & Style guide
I created Loft’s logo and style guide to build a cohesive, calm & modern identity rooted in structure, clarity, and intelligent simplicity.
I created Loft’s logo and style guide to build a cohesive, calm & modern identity rooted in structure, clarity, and intelligent simplicity.
With the visual identity defined, I simplified the structural foundation of the app to ensure clarity across core flows.
With the visual identity defined, I simplified the structural foundation of the app to ensure clarity across core flows.
IA Structure Thinking
IA Structure Thinking
Simplifying the Structure
Simplifying the Structure
Using the provided flows as a foundation, I simplified Loft’s structure to ensure saving, rediscovering, and interacting with AI felt lightweight and intuitive.
Using the provided flows as a foundation, I simplified Loft’s structure to ensure saving, rediscovering, and interacting with AI felt lightweight and intuitive.
Ideation & Sketching
Ideation & Sketching
Early ideation sessions with my senior designer helped clarify layout structure and navigation patterns.
Early ideation sessions with my senior designer helped clarify layout structure and navigation patterns.
Design
Design
Designing Loft AI Experience
Designing Loft AI Experience
The goal was to make saving and rediscovering content effortless. The experience focuses on reducing friction when capturing links, organizing them intelligently, and helping users quickly revisit what matters through AI-powered context.
The goal was to make saving and rediscovering content effortless. The experience focuses on reducing friction when capturing links, organizing them intelligently, and helping users quickly revisit what matters through AI-powered context.
Onboarding
Home
Save Link
Library
Ask AI
Profile
Browser Extension
Web
Introducing Loft’s Value from the First Interaction
The onboarding flow introduces Loft’s value, personalizes the experience through user interests, enables quick sign-in, and guides users to start saving and rediscovering content effortlessly.
Get Started
Login/Signup
Personalization
User guide
Onboarding
Home
Save Link
Library
Ask AI
Profile
Browser Extension
Web
Introducing Loft’s Value from the First Interaction
The onboarding flow introduces Loft’s value, personalizes the experience through user interests, enables quick sign-in, and guides users to start saving and rediscovering content effortlessly.
Get Started
Login/Signup
Personalization
User guide
Onboarding
Introducing Loft’s Value from the First Interaction
Get Started
Login/Signup
Personalization
User guide
Home
Save Link
Library
Ask AI
Profile
Browser Extension
Web
Onboarding
Home
Save Link
Library
Ask AI
Profile
Browser Extension
Web
Introducing Loft’s Value from the First Interaction
The onboarding flow introduces Loft’s value, personalizes the experience through user interests, enables quick sign-in, and guides users to start saving and rediscovering content effortlessly.
Get Started
Login/Signup
Personalization
User guide
Iteration & Feedback
Refining the Product Through Feedback
Refining the Product Through Feedback
Throughout the project, I iterated on the designs through regular feedback sessions with both the client and my senior designer. These discussions helped refine layouts, interactions, and product clarity.
Throughout the project, I iterated on the designs through regular feedback sessions with both the client and my senior designer. These discussions helped refine layouts, interactions, and product clarity.
Client Brief & Feedback Review
Reviewing the client’s feedback and product direction together helped translate high-level ideas into actionable design decisions.
Design Reviews & Iteration
Regular design reviews with my senior designer helped refine interaction flows, layout clarity, and feature behaviour.
01 Iteration — Home Experience Refinement
01 Iteration — Home Experience Refinement
The updated design prioritizes AI-powered rediscovery and recent saves, making it easier for users to revisit content instead of searching.
The updated design prioritizes AI-powered rediscovery and recent saves, making it easier for users to revisit content instead of searching.
Initial Design
Home_Empty State
Home_Empty State
• No guidance to start saving
• Focused on content discovery
• Saved content not prioritized
• No guidance to start saving
• Focused on content discovery
• Saved content not prioritized
Home Screen
Home Screen
• Featured content dominates layout
• Saved items less visible
• Rediscovery requires navigation
• Featured content dominates layout
• Saved items less visible
• Rediscovery requires navigation
Apporved Design
Home_Empty State
Home_Empty State
• AI guidance for new users via Ask Loft AI
• Clear first-save prompt and Action
• Subtle micro-animations with CTA
• AI guidance for new users via Ask Loft AI
• Clear first-save prompt and Action
• Subtle micro-animations with CTA
Home Screen
Home Screen
• Recent bookmarks surfaced
• AI insights easily accessible
• Faster rediscovery of saves
• Recent bookmarks surfaced
• AI insights easily accessible
• Faster rediscovery of saves
02 Iteration — Library Experience Refinement
02 Iteration — Library Experience Refinement
Client feedback led to refining the library with clearer navigation, scalable tabs, a persistent save FAB for quick access, and horizontally scrollable collection sections for easier browsing.
Initial Design
All Bookmarks
All Bookmarks
• Navigation tabs feel rigid
• Actions clutter top navigation
• Save action not accessible
• Navigation tabs feel rigid
• Actions clutter top navigation
• Save action not accessible
Collections
Collections
• Collections stacked vertically
• Hard to preview items
• Slower browsing between collections
• Collections stacked vertically
• Hard to preview items
• Slower browsing between collections
Apporved Design
All Bookmarks
All Bookmarks
• Scalable filter tab navigation
• Persistent quick-save FAB
• Improved bookmark hierarchy
• Scalable filter tab navigation
• Persistent quick-save FAB
• Improved bookmark hierarchy
Collections
Collections
• Horizontal collection browsing
• Better visual content preview
• Faster navigation across collections
• Horizontal collection browsing
• Better visual content preview
• Faster navigation across collections
Handoff
Handoff
Design Handoff to Development
Design Handoff to Development
Preparing structured design files, components, and documentation to support smooth implementation.
I organized the Figma workspace with clear sections for components, mobile screens, responsive layouts, and extension designs so developers could easily navigate and implement features.
Preparing structured design files, components, and documentation to support smooth implementation.
I organized the Figma workspace with clear sections for components, mobile screens, responsive layouts, and extension designs so developers could easily navigate and implement features.
Handoff Included
Handoff Included
Component library and reusable UI patterns
Organized mobile and responsive screens
Interactive prototypes for flows
Component library and reusable UI patterns
Organized mobile and responsive screens
Interactive prototypes for flows
Reflections and Next Steps
Reflections and Next Steps
⚠️ Challenges I Faced
⚠️ Challenges I Faced
Designing Loft without access to real user data made early decisions challenging. I relied on discussions, sketches, and iterative feedback from my senior designer and the client to refine the structure and interactions.
Designing Loft without access to real user data made early decisions challenging. I relied on discussions, sketches, and iterative feedback from my senior designer and the client to refine the structure and interactions.
🧠 What I Learned
🧠 What I Learned
Loft was a formative project for me as a junior designer.
This project strengthened my ability to design complex products in high fidelity and iterate quickly based on stakeholder feedback while maintaining clarity in structure and usability.
Loft was a formative project for me as a junior designer.
This project strengthened my ability to design complex products in high fidelity and iterate quickly based on stakeholder feedback while maintaining clarity in structure and usability.
📈 Where I Could Improve
📈 Where I Could Improve
Validating the experience with real users would provide deeper insights. In future iterations, usability testing would help ensure the product truly supports how people save and rediscover content.
Validating the experience with real users would provide deeper insights. In future iterations, usability testing would help ensure the product truly supports how people save and rediscover content.
🚀 Next Steps for Loft
🚀 Next Steps for Loft
Future improvements could explore smarter AI summaries, contextual recommendations, and deeper personalization to make rediscovering saved content even more effortless.
Future improvements could explore smarter AI summaries, contextual recommendations, and deeper personalization to make rediscovering saved content even more effortless.
Glad you came here
thankyou for all your support
Glad you came here
thankyou for all your support
Please let me know your valuable feedback,
I will be Greatfull for that.
Please let me know your valuable feedback,
I will be Greatfull for that.