Log-out: to Stay in Control
An End-to-End AI-Driven UX Case Study: From Prompt to High-Fidelity
OVERVIEW
Log-out is a disruptive social-health platform that explores the intersection of Clinical Precision and Absurdist Humor. By transforming daily bowel movements—the most private of biological rhythms—into high-end digital collectibles, the app destigmatizes personal wellness through a sophisticated, tech-forward lens.
MY ROLE
Product Designer
TOOLS
Google Stitch, Gemini, Figma
TIMELINE
April 15th 2026
The Origin Story
From Corporate Resistance
to Social Ritual
The genesis of Log-out stems from a pervasive trope in Chinese workplace culture known as 'Paid Pooping' (带薪拉屎💩). Originally conceived as a form of 'silent resistance' by workers facing stagnant wages and long hours, it represents a playful defiance—a tactical reclamation of time where even the most basic biological act becomes a way to 'get paid' by the corporation.
Log-out seeks to elevate this cultural anecdote into a sophisticated design narrative. I transform this act of rebellion into a 'soft social' platform that is both absurdly playful and clinically serious. By integrating professional health analytics with a high-end collectible ecosystem, the app turns a daily necessity into a statement of autonomy and joy. It is a space where personal wellness meets subversive humor, allowing users to track their rhythm, share their 'Pooprints,' and remind the world that even in a high-pressure society, we live for the sake of being happy.
Concept
Absurdist Professionalism
Log-out transforms personal health data into a playful yet profound social currency. By utilizing stylized collectibles to convey wellness insights, the app effectively mitigates social friction and pioneers a new vernacular for modern connection. This alternative method of tracking one’s 'global Pooprints' redefines the boundaries of social distance, encouraging users—from students, office workers to global travelers—to embrace a lifestyle where health tracking is no longer a chore, but an exuberant expression of self-care and happiness.
CHALLENGE
Refining the Unspoken
How do we bridge the gap between a "taboo" biological necessity and a high-end social experience? The challenge was to create a visual language that feels as rigorous as a medical report yet as engaging as a rare-asset collection game, specifically tailored for a vibrant demographic of students, office workers, and global travelers.
To navigate this, the project focused on solving three core tensions:
-
How might we elevat a workplace meme into a premium social ritual?
-
How might we Merging clinical analysis with collectible-driven engagement?
-
How might we share the "unshareable" while maintaining privacy?
Design Process
A Paradigm Shift:
Inverting the Design Process through AI
Adopting AI led to a pivotal realization: the traditional, linear design workflow is fundamentally evolving. The hyper-efficiency of AI allows for instantaneous brainstorming and seamless iteration, transforming visual output into a real-time diagnostic tool for user experience.
Rather than following a bloated traditional research phase, I utilized AI to collapse the distance between concept and execution. In this new workflow, the designer’s visceral reaction to the initial output serves as the most authentic mapping of user psychology and behavior. This 'Designer-as-First-User' philosophy, supported by AI’s ability to synthesize vast datasets, allowed me to integrate deep scientific research on gastrointestinal health directly into the prototyping phase. By merging medical insights with high-velocity AI generation, I bypassed conventional constraints to focus on what truly matters: an intuitive, data-informed, and highly responsive user journey
From Gemini 3.0 to Google Stitch
I fed the following product vision into Gemini to generate a structured natural language 'bridge.' This ensured that the resulting prompts would not only produce high-fidelity UI components in Stitch but also remain perfectly aligned with my own conceptual intent.
I want to start from scratch and use Stitch to make an APP. Its main content is to record users' daily bowel movements with a sense of contrast that is humorous and funny, yet also very serious. The menu bar from left to right is sequentially: 1. Social page, to see the pooping records shared by friends. Adding friends, deleting friends, and filtering friends are all completed here. 2. Map, showing where I and my friends have pooped all over the world. You can screen through a filter to see only yourself, or you can simultaneously see friends or close friends. 3. The middle is a plus sign; clicking it open is "I want to record right now." It includes date and time, how much was pooped, whether it was dry or watery, the color of the poop, and whether the process was easy or difficult. There is also the location; after recording, a random cartoon poop image will be generated based on this record. There will be one every time, used for collecting and sharing. 4. Is my collection of all poop cartoon images; there will be levels of rarity. 5. Is my page, including all my poop records and settings.
The main fun of this App is to use poop cartoon images as a medium to convey everyone's social concern for physical health, as well as to relax the social atmosphere between friends, and create brand-new social topics and social distance. Through this alternative way of sharing the poop footprints you leave all over the world, it demonstrates a life attitude that living is for the sake of being happy.
The user positioning of this App is mainly based on students, office workers, and travel enthusiasts. This type of group has fixed living habits, frequent travel needs, and an attitude toward life that is more energetic and passionate.
The style requirement of this APP is serious and has a sense of playfulness. Colors should not have strange gradients; they should be vivid and eye-catching. I am currently considering Klein Blue as the theme color tone, or a large amount of white combined with rainbow gradients as accents, or tech white + grey, giving a feeling that a cartoon poop was generated through unknown high-end technology. A large amount of white space and breathing room are needed. Of course, the theme color can also be other colors; I need several ideas recommended.
Role: Senior UX Designer for a disruptive social-health startup.
Project Background: 'PooPrint' - An app for students and travelers to track bowel movements. The core vibe is 'Serious Humor' (Absurdist Professionalism). It’s a mix of a high-end medical diagnostic tool and a playful social game.
User Persona: Energetic students, office workers, and travelers who value hygiene, health, and a 'live for fun' attitude.
Design Goal: Create the 'Log Entry' screen (The '+' tab).
Visual Style:
-
Aesthetic: 'High-tech Lab' meets 'Minimalist Luxury' (similar to your preference for a high-end, textured Dior-like feel but in a digital health context).
-
Layout: Extreme white space, very breathable. Strict 8px grid alignment.
-
Color: Primary 'Klein Blue' for interactive elements. Clean 'Tech White' and 'Cloud Grey' for backgrounds. No gradients.
-
Typography: Strictly use Roboto for a geometric, clinical look.
Content Requirements:
-
Serious Input: A vertical list of data points: Time/Date, Volume (1-5 scale), Texture (Dry to Watery), Color (Clinical palette), and Effort (Easy to Difficult). Use precise sliders and segmented controls that look like professional medical equipment.
-
Location: A prominent field for 'Current Geotag' to emphasize the travel aspect.
-
The Hook: A CTA button at the bottom labeled 'ANALYZE & GENERATE' in solid Klein Blue.
-
The Twist: A small preview area where the 'Secret Tech' is 'calculating' the next collectible cartoon poop.
-
Instruction: Ensure all elements are perfectly horizontal, no slanted graphics. Use Auto Layout to keep the spacing consistent.
Typography Rules
-
Primary Font: 'Roboto', sans-serif;
-
Secondary Font: 'Open Sans', sans-serif;
-
Rule: All text elements must strictly use these two fonts. Never use serif or system default fonts.
By feeding Gemini’s prompts into Google Stitch, I generated the following high-fidelity primary screens, representing the initial visual framework of the app.
Evaluating the Initial AI Output:
1. Iterative Refinement & Manual Polishing:
-
While the initial UI reached an 80% success rate in visual alignment, certain structural elements required secondary AI iterations.
-
Final precision will be achieved through manual refinement in Figma.
2. Design Serendipity & Evolution:
-
Unexpected AI-generated features have sparked new creative directions, allowing me to expand the design system and further enhance the user experience.
3. Tool-Specific Limitations & Hybrid Workflows:
-
Recognizing the limitations of Stitch in custom illustration, I will integrate specialized AI tools to ensure the 'Poo-tar' assets meet my high-fidelity standards.
Prompt-Based Iteration
By leveraging AI as a high-velocity prototyping tool, I recalibrated the UI to prioritize emotional resonance and intuitive flow. Through iterative prompting, I addressed the following core touchpoints:
-
Structural Archetypes: Exploring homepage layout variations to maximize 'breathing room.'
-
State-Transitions: Visualizing different design trajectories for the Loading Page to maintain a cohesive 'High-Tech' narrative.
-
Interactive Inputs: Refining data parameters on the 'Log' page and integrating a reflective text box for user sentiments.
Formalizing the Visual
Language in Figma
To bridge the gap between AI generation and a production-ready system, I transitioned the core interfaces to Figma for granular refinement and standardization. Here, I extracted the AI's most compelling design elements and transformed them into a unified visual system. Key tasks included standardizing the navigation icons and ensuring consistency across backgrounds and textures.
This process proves that while AI provides a powerful foundation, the designer’s manual intervention is what crafts the final 'soul' of the product. By establishing this Figma-based baseline, I can now reverse-integrate these refined styles back into the AI to efficiently scale out the rest of the app—including secondary screens and pop-up windows—until the entire ecosystem is complete.
Before
After
Design feature
The Daily Drop: Turning Private Rhythms into Public Icons
Step 1: Initiation
-
The Gateway: The journey begins with a centered "+" icon on the persistent menu bar. This prominent placement ensures the app’s primary function is always within thumb-reach, facilitating a frictionless start to the ritual.
Step 2: Contextual Sync
-
Automated Precision: To minimize user effort, the Time and Date are automatically synchronized with the mobile system.
-
Manual Flexibility: Users have the autonomy to manually select or refine their location, allowing for a personalized "geographic footprint" for every entry.
Step 3: Granular Calibration
-
Multi-axis Sliders: Instead of rigid text inputs, we utilize intuitive sliding scales to capture the nuances of the experience. These parameters include:
-
Volume & Consistency: Measuring the physical output with haptic-friendly sliders.
-
Color & Sensation: Selecting from a curated palette and a "feeling" axis to capture the overall mood of the moment.
-
Step 4: Sentiment & Synthesis
-
Narrative Expression: A dedicated text module allows users to attach a personal "vibe" or reflection, bridging the gap between clinical data and emotional reality.
-
The Reveal: Upon clicking "Generate," the system’s backend logic synthesizes these specific inputs into a unique, AI-generated Poop-man Identity Card—a digital collectible that mirrors the user's current state.
Step 5: Confirmation & The Global Drop
-
Final Handshake: Once the user reviews and confirms their generated card, a final Upload action integrates the post into the "Output Stream" (Homepage Feed).
-
Social Presence: The user’s personal rhythm is now part of the collective narrative, standing out as a stylish, trend-forward update in the community.
The Anatomy of a Post:
Data Encapsulation
& Visual Synthesis
1. The Symbolic Cipher
-
Data as Art: To maintain a "Less is More" aesthetic, I synthesized the user's inputs—Volume, Consistency, and Ease of Movement—into a single, composite symbol.
-
Information Integrity: This custom icon allows for high information density without cluttering the UI, turning clinical metrics into a decorative, yet functional, brand element.
2. The Generative Core & Rarity
-
The Visual Soul: The AI-generated "Poop-man" stands as the centerpiece of the card, reflecting the user's unique physical state.
-
The Rarity Badge: Located at the bottom-left of the character, a subtle Rarity Indicator signals the uniqueness of the generated asset. This gamified element transforms a daily routine into a "limited edition" moment, encouraging user engagement and pride.
3. Unified Card Architecture
-
Seamless Integration: Each card is a self-contained ecosystem, housing the Username & Avatar, Contextual Metadata (Time & Location), and User Sentiment.
-
Social Connectivity: Below the character and personal reflection, minimalist Engagement Triggers (Likes & Comments) invite community interaction without distracting from the card's premium texture.
4. The "Daily Drop" Experience
-
The Infinite Gallery: Users navigate the social landscape via a vertical scroll on the homepage. This "Daily Drop" feed functions like a high-end digital gallery, where users browse through their friends' latest rhythms in the form of stylish, data-driven artifacts.
What's next
The Ecosystem:
Exploration, Collection, and Identity
1. The Pulse Map
-
Geospatial Socializing: The Map Interface provides a live visualization of the community’s footprint. Users can discover where their friends are "logging out" in real-time, transforming private moments into a shared geospatial experience.
-
Proximity & Privacy: By blending precise location data with a stylized map aesthetic, the interface encourages spontaneous social discovery while maintaining a sophisticated, high-tech vibe.
2. The Vault: Personal Asset Repository
-
Curation of Rarity: The Vault functions as a high-end digital gallery for all unlocked "Poop-man." It’s not just a collection; it’s a record of the user’s biological journey, organized by rarity and aesthetic style.
-
Achievement Narrative: This interface gamifies the experience, allowing users to revisit their most "Ultra Rare" or "Rare" drops, fostering a sense of pride and long-term engagement with their personal health data.
3. Identity Hub & Milestones
-
Profile Customization: The User Hub allows for seamless identity management, where users can refine their digital persona (Avatar and Username) to match their evolving style.
-
The Legacy Archive: Beyond basic settings, this screen serves as a centralized dashboard for personal milestones:
-
Social Impact: Tracking friend counts and engagement levels.
-
Exploration Progress: Showcasing the number of "Special Locations" and "Rare Assets" unlocked.
-
Future Drop:
Turning Prompts into Products
"The exploration doesn't stop at high-fidelity mockups."
My experience with AI has redefined how I view the design process. Next, I will focus on architectural scaling—perfecting the UX framework to support long-term user retention.
More importantly, I am initiating a "Build" phase using Claude Design & Claude Code. By integrating AI as my primary coding collaborator, I aim to bypass traditional development bottlenecks and transform Log-out from a visionary design concept into a live, interactive experience.
