Overview
White Truffle is a unique talent matching service that connects tech professionals with ideal job opportunities using an intelligent algorithm that analyzes skills, experience, and interests. The platform had established a successful web presence, but needed to translate their desktop experience into a compelling mobile app that would appeal to on-the-go tech professionals while maintaining their distinctive brand personality.
The Challenge
White Truffle faced several significant challenges in their transition to mobile:
Beyond Responsive Design: The client explicitly wanted more than just a responsive web app. They needed a native mobile experience that leveraged device capabilities while maintaining their brand identity.
Interaction Translation: The desktop experience relied heavily on detailed information displays and multi-step workflows that wouldn’t translate effectively to smaller screens and on-the-go usage patterns.
User Engagement: Building a mobile app that would drive regular engagement required rethinking how users would interact with the platform in brief, frequent sessions rather than longer desktop sessions.
User Context: Tech professionals often explore job opportunities during commutes, lunch breaks, or other brief windows of time. The mobile experience needed to accommodate these usage patterns.
Competitive Differentiation: With numerous job search apps in the market, White Truffle needed to retain its unique value proposition while adopting familiar mobile interaction patterns.
Discovery & Research
I began by conducting a series of research activities to understand both our users and the competitive landscape:
User Research
I led interviews with 12 active White Truffle users, focusing on:
- Current pain points with the desktop experience
- Mobile usage patterns and expectations
- Job search behaviors in different contexts
Key findings included:
- Users valued the curated matching algorithm but wanted more control over exploration
- Privacy was a major concern when job-hunting on mobile devices
- Users expected immediate notifications for new matches but wanted to control their visibility
- Brief, frequent check-ins were the expected mobile usage pattern
Competitive Analysis
I analyzed eight competing job platforms with mobile apps, identifying opportunities to differentiate:
- Most competitors simply miniaturized their desktop experience
- Few leveraged intuitive gesture-based interactions
- Most lacked personality and felt transactional
- None effectively balanced algorithmic matching with discovery
Technical & Business Requirements
Working with stakeholders, I identified several key requirements:
- Integration with existing matching algorithm and backend systems
- Support for iOS and Android with consistent experience
- Push notification capabilities for real-time matches
- Analytics integration to measure engagement and conversion
- Scalable design system for future feature expansion
Design Strategy
Based on our research, I developed a design strategy built around three core principles:
1. Intuitive Interaction Model
Rather than forcing users to learn a new system, I proposed adopting familiar interaction patterns from popular apps (including dating apps) that users already understood:
- Swipe-based job discovery
- Card-based UI for quick scanning
- Double-tap to save for later
- Pull-to-refresh for new matches
2. Contextual User Experience
The app needed to adapt to different user contexts and provide value in brief interaction windows:
- Glanceable dashboard showing key metrics and recent activity
- Simplified profile management for on-the-go updates
- Time-aware notifications based on user preferences
- “Quick apply” for opportunities matching 90%+ with user profile
3. Personality-Driven Design
To differentiate from utilitarian job platforms, I proposed infusing the app with playful elements that reflected White Truffle’s brand:
- The Truffle Pig guide character to assist with onboarding and discovery
- Conversational microcopy that brought warmth to the experience
- Celebration animations for matches and milestones
- Playful loading states and transitions
Design Process
Information Architecture
I restructured the app’s information architecture to optimize for mobile contexts:
- Simplified navigation with 4 primary sections (Matches, Discover, Messages, Profile)
- Progressive disclosure of job details to reduce cognitive load
- Context-based actions that adapted to user behavior
Wireframing & Prototyping
I created low-fidelity wireframes to rapidly explore different approaches to key screens:
- Tested multiple navigation patterns with users to find the most intuitive approach
- Explored various card designs for job listings that balanced information density with scanability
- Prototyped swipe interactions to ensure they felt natural and intentional
Visual Design System
Building on White Truffle’s recent rebrand, I developed a comprehensive mobile design system:
- Adapted their color palette for optimal contrast on mobile screens
- Created a typographic hierarchy optimized for smaller displays
- Designed custom iconography that complemented their visual language
- Developed consistent UI components and patterns for use across the app
Key Features & Screens
Onboarding Experience: The onboarding flow introduced users to the Truffle Pig guide character who established the app’s personality while guiding users through profile creation. I designed a modular onboarding system that adapted based on whether users were migrating from the desktop platform or completely new to White Truffle.
Discover Feed: Taking inspiration from dating apps, I designed a card-based discovery feed that displayed one opportunity at a time with the most relevant information, allowing users to swipe right for interest or left to dismiss. A “swipe up” gesture was added for “super interested” to give users an additional signal of enthusiasm.
Match Dashboard: I created an intuitive dashboard that provided at-a-glance visibility into match quality, recent activity, and pending actions. Custom data visualizations helped users understand why they matched with specific opportunities.
Profile Management: The profile section was reimagined for mobile, breaking down the extensive information from the desktop experience into manageable sections that could be updated independently. Machine learning suggestions helped users improve their profiles with minimal effort.
Messaging Interface: I designed a messaging experience that balanced professional communication with ease of use, incorporating smart replies, attachment support, and scheduling capabilities for interviews and follow-ups.
Prototyping & Testing
I created high-fidelity interactive prototypes in Figma to validate the design with real users:
Testing Methodology:
- 3 rounds of usability testing with 8 participants each
- Task-based scenarios covering key user journeys
- A/B testing of different interaction patterns
- Unmoderated tests to gather quantitative metrics on completion rates
Key Insights:
- The swipe interaction was intuitive but needed visual affordances to indicate availability
- Users wanted more granular control over push notifications
- The job detail cards needed refinement to prioritize the most decision-relevant information
- Users loved the personality of the Truffle Pig but wanted the ability to minimize guidance over time
Iteration & Refinement
Based on user feedback, I made several key improvements:
Interaction Refinements:
- Added subtle visual cues to indicate swipeable cards
- Created a “peek” gesture to preview more details before committing to a full view
- Refined transition animations to provide better feedback
Information Architecture:
- Reprioritized content on job cards based on user preference data
- Simplified the matching metrics to focus on most relevant factors
- Added customizable dashboard widgets to personalize the experience
Personality Calibration:
- Created a “guidance level” setting to adjust the frequency of the Truffle Pig appearances
- Refined the tone of microcopy to maintain personality while respecting the professional context
- Added subtle celebrations for meaningful milestones rather than trivial achievements
Results & Impact
The White Truffle App launched in March of 2015, by this time, my involvement in the project had ended.
While it was in the App Store:
User Feedback:
- App Store rating of 4.7/5 stars
- Positive reviews specifically mentioned the intuitive interface and personality
- Users reported feeling more connected to potential opportunities
Learnings & Takeaways
This project reinforced several key principles that continue to guide my design approach:
Context Matters: Understanding how, when, and why users engage with a product on mobile is crucial for creating an experience that fits into their lives rather than disrupting them.
Personality Creates Differentiation: In a crowded market, infusing the experience with brand personality created memorable moments that users actively mentioned in feedback.
Familiar Yet Fresh: By borrowing interaction patterns from popular apps while adding unique elements, we created an experience that felt both intuitive and distinctive.
Progressive Complexity: Breaking complex workflows into manageable steps with clear feedback kept the experience from feeling overwhelming on smaller screens.
The White Truffle mobile app demonstrated that thoughtfully translating a desktop experience to mobile isn’t about shrinking the interface—it’s about reimagining the core value proposition for a different context while maintaining brand consistency and product
Example – the signup process