About company
In-house is an anonymous community platform where people share what they can't say anywhere else. It's a space for vulnerability, honest conversations, and genuine connection, where users discuss everything from career struggles to personal challenges without fear of judgment.
But when the interface itself becomes a barrier to connection, the platform fails its core purpose.
The Problem
V2 of In-house was struggling. While the community remained engaged, the interface was quietly pushing users away. The UI/UX wasn't just aesthetically dated, it was creating friction at every turn, making it harder for people to find support when they needed most.
The symptoms were somewhat clear:
-
Users struggled to parse content from interface elements
-
Navigation felt disjointed and unclear
-
Visual hierarchy was competing with the content itself
-
The technical implementation lacked consistency, creating mistrust between design and development
What Users Were Experiencing
The existing interface consumed 35-40% of valuable screen real estate with a static header space - that could have been dedicated to the conversations people came for. The visual structure made it difficult to distinguish between content and UI, leaving users feeling lost in their own community.
My Role
As UX Researcher and UI Designer, I was brought in to diagnose the disconnect between user needs and interface execution. My mission was twofold:
-
Identify the root causes behind user friction and frustration
-
Develop a comprehensive design system that would rebuild trust between design and development while elevating the user experience
Phase 1 : Listening Before Solving
1. Moderated User Studies
I conducted one-on-one sessions with 14 active community members, watching them navigate the platform in real-time. The pauses, the confusion, the moments where they couldn't find what they were looking for these revealed more than any survey could.
Preview link
2. Unmoderated User Studies
To capture broader sentiment and usage patterns, I deployed structured surveys that allowed users to share their experience in their own words, on their own time.
3. Heatmap Analysis
Behavioral data revealed where users were actually clicking, scrolling, and abandoning their journeys often contradicting where we thought their attention would go.
We synthesize feedback from the user stories and created a holistic review to understand at what exact sections users are dropping off.
1. The interface was fighting with the content.
Users came to In-house for connection and conversation, but the UI demanded constant attention. The oversized static header created a claustrophobic browsing experience, particularly on laptop screens. Content - the most important part of the platform - was relegated to a cramped viewing window.
The lack of clear visual differentiation between content containers, navigation elements, and interaction points meant users had to work harder than they should to simply understand what they were looking at.
2. Users had to think too much about how to use the platform instead of why they came.
Navigation patterns were unclear. Action hierarchy was muddled. The rating system - a core interaction - felt bolted on rather than integrated. Every click required a micro-decision that shouldn't have been necessary.
The lack of clear visual differentiation between content containers, navigation elements, and interaction points meant users had to work harder than they should to simply understand what they were looking at.
3. The design system didn't exist it had just happened.
Without a unified design language, every screen felt like it belonged to a different product. Component states were inconsistent or missing entirely. This wasn't just an aesthetic problem; it eroded trust. Developers couldn't reliably implement designs. Designers couldn't guarantee consistent experiences.
Mapping the Journey: User Flow Diagrams
After establishing our design issues, I needed to understand how entire product works instead of getting into abstract concepts. I designed User flow diagrams which became the bridge between research insights and tangible design solutions.
1. First-Time User Onboarding
Mapping how newcomers discover the platform's purpose, understand the anonymous community culture, and feel safe enough to engage. This flow was crucial - if we lost people here, they'd never experience the value of the community.
The flow addressed:
-
Entry points and first impressions
-
Understanding community guidelines and trust signals
-
The decision point between lurking and posting
-
Reducing anxiety around first-time sharing
2. Content Discovery & Consumption
How users browse, filter, and find conversations relevant to their struggles. Our research showed users getting lost in navigation, so this flow mapped clear pathways from homepage to meaningful content.
Key considerations:
-
Browse vs. search behavior patterns
-
Category and topic navigation
-
Thread preview and decision to engage
-
Return pathways (how to get back without losing place)
From Flows to Wireframes
With validated user flows in hand, the next step was giving them form. Here, I collaborated closely with another Lead UX designer and the founder, who took the lead on wireframe creation.
The Wire-frame Process:
Working from the user flow diagrams, the UX designer and founder translated each pathway into low-fidelity wire-frames. This collaborative approach was intentional—the founder's deep understanding of community needs combined with the UX designer's structural expertise created wire-frames grounded in both user empathy and
platform vision.
Phase 2: Building the Foundation
With user flows mapped and wireframes validated, the next phase focused on developing a comprehensive visual system for In-house. This phase addressed the need for scalable design infrastructure that would maintain consistency while supporting users during vulnerable interactions.
Design system architecture
I implemented a comprehensive atomic design methodology- a hierarchical framework ensuring every component, from foundational elements to complete page layouts, functions as part of a cohesive system.
Atoms: The Foundational Elements
Atoms represent the basic building blocks the smallest functional units that combine to create more complex components.
Iconography:
A standardized icon system designed for clarity and consistency
Color Palette :
Each color selection served both psychological and functional objectives
Typography System:
A type scale optimized for sustained reading and emotional legibility, critical for a platform centered a personal narratives.
Molecules: Functional Component Combinations
Molecules combine atoms into functional interface elements serving specific user interaction needs.
Buttons:
Comprehensive button system addressing various interaction priorities
Breadcrumbs:
Navigation trail component providing contextual wayfinding
Input Fields
Form components designed to support users sharing personal narratives
Dropdown Menus
Selection components optimized for category navigation and content filtering
Scoring Elements
Redesigned rating system integrated as core interaction pattern
Organisms: Complex Integrated Components
Organisms represent sophisticated UI components forming distinct interface sections through molecule and atom combinations.
Headers:
Redesigned adaptive navigation system addressing V2's excessive screen real estate consumption
Cards:
Standardized container system for posts, comments, and content previews
Input Fields:
Form components designed to support users sharing personal narratives
Navigation Items:
Sidebar and mobile navigation component system
Comment Threads:
Core conversation component redesigned for clarity and reading flow
Post Containers:
Complete thread view components for deep reading and engagement
Explainers:
Contextual guidance components providing assistance without disruption
Pages: Complete Screen Compositions
Fully composed page layouts integrating all component levels into cohesive user experiences. High-fidelity mockups developed for:
-
First-Time Onboarding: Initial user introduction sequence
-
House Rate: Community rating interface for house attribute evaluation
-
Post: Primary communication interface for member dialogue
-
Mink: Management interface for confidential mink curation and selection
-
House Listing: Property submission interface for secured house registration
-
Ownership: Administrative dashboard for house leader management
-
Anonymous Share Modals: Modal components for rate, mink, and posts
-
Poll Page: Voting interface for unbiased community feedback collection
-
Landing and Service Pages: Public-facing informational pages
All page designs utilized realistic content scenarios ensuring validation against actual use complexity.
UI Rulebook: Comprehensive Documentation
I developed extensive documentation establishing shared terminology and standards across design, development, and product teams.Spacing Systems Documentation
Standardized spacing application:
Component Internal Spacing: Padding specifications per component
Layout Spacing: Inter-element margins and gaps
Section Spacing: Vertical rhythm between page sections (40px, 64px, 80px intervals)
Responsive Spacing: Viewport-based scaling specifications
Component Usage Guidelines
Comprehensive component documentation including:
Use Cases: Appropriate implementation contexts
Alternatives: Recommended alternatives for edge cases
Props and Variants: Complete option configurations
Accessibility Requirements: ARIA labels, keyboard interactions, screen reader support
Content Guidelines: Character limitations, tone standards, example implementations
Color Usage Standards
Semantic Application: Success, warning, and error color usage protocols
Contrast Requirements: Minimum text and interactive element ratios
Future Considerations: Dark mode planning documentation
Accessibility Compliance: Color vision deficiency-safe combinations
Typography Guidelines
Type Scale Application: Sizing specifications for headings, body text, captions
Line Length Standards: Maximum character counts per context
Emphasis Techniques: Bold, italic, and color emphasis protocols
Microcopy Standards: UI text tone and style guidelines
Testimonial
"Working with Chintan has literally reinstated my faith in people. His even-keeled, due-diligence ability to manage expectations and build & own our entire UI atomic design system has been extraordinary. Please contact us directly for anything you need before declining to work with him. He has never disappointed!"
Learnings
This project taught me that design systems are as much about team alignment as creating components. Comprehensive documentation eliminated ambiguity between design and development, while mapping user flows before wireframes saved time by identifying problems early.
I learned that good design should be invisible - when users focus on conversations instead of the interface, it's working. Most importantly, spending time with real users revealed needs that go beyond what people explicitly ask for.