Jostle’s People view is a structured directory of profile cards that displays everyone in the company. Each card surfaces key details such as role, status, and base location.
But, as sorting features and metadata grew, the card stopped scaling:
[Click or swipe to explore the carousel.] The original People Card struggled to scale.
For this project, the scopes were:
Redesign, not a complete rebuild: the work was scoped as iterating on the existing People Card within the current system.
Platform-wide impact: since it is for a shared Card component, changes had to scale and support other use cases across the platform (e.g: News view).
With that in mind, I framed the challenge with the following design question:
The need for this work was clear from multiple signals:
Support tickets showed confusion about why profiles appeared in a certain order.
Feedback highlighted how truncation on long titles and multiple roles made cards harder to scan.
Flagged requests from orgs to make people easier to find by making sorting visible.
A well-known customer complaint that emails were almost always truncated, with no way to see full details even on hover.
Together, these patterns revealed the gaps in the existing card and guided my early explorations.
To kickstart the design, I mapped three concepts to test different levels of change:
Early explorations ranged from small layout tweaks to a full rethink: Mild (left), Mid (middle), and Wild (right).
The Wild concept had strong accessibility wins but made the card too tall, so I brought the Mild and Mid options to a Concept Review with product, dev, QA, and stakeholders.
The discussion surfaced trade-offs and wins (Mild kept things familiar, Mid added clarity), and alignment was made to move forward with a hybrid of the two.
Iterations led to a hybrid design that surfaced status more prominently while preserving the original card’s structure.
Dev was involved through checkpoints like this to weigh in on feasibility, and once the hybrid design was finalized, I had a more in-depth discussion with them to ensure the direction forward flexed where needed and reused components where possible.
With insights from usage data, edge-case testing, and dev reviews, I made the following changes guided by a set of design principles:
In reality, only 7% of our company’s users used personal status.
Redirects emphasis from status updates by moving the placement of the emoji to sit beside the name (consistent with Discussion and News view).
Principle: Scalability & Efficiency.
Tradeoff: Lost the quick at-a-glance status bar for a small % of users.
Why it's better: Saved 100px of height, reduced code complexity, and removed unnecessary visual weight from cards.
At 138px, the photo dominated the card, and long titles/emails were often cut off.
Reducing the photo size decreases truncation.
Principle: Hierarchy & Clarity.
Tradeoff: Slightly weaker face recognition at a glance.
Why it's better: Shrinking the image doubled metadata capacity → 95% of long titles/emails now display fully.
While reducing the image had a lot of wins, it introduced an awkward pocket of white space.
Flipping the layout aligned the design with users’ natural left-to-right scanning flow putting more emphasis on metadata first.
Principle: Clarity & Consistency.
Tradeoff: Small learning curve for existing users as it's a different layout.
Why it's better: Matches LTR reading → faster name-first scanning, eliminated whitespace, aligned with other views on Jostle (News and Discussion), stronger contrast between;
Card View → context-first
Photo View → face-first
It's now clearer when the goal is to understand their details at a glance, and when it's to recognize someone visually.
With the sorting options being birthday, join date, and anniversary date, icons can be confusing.
With the update, the design lets users rely on page-level context, with sort labels revealed on hover for extra detail.
Principle: Legibility & Scalability.
Tradeoff: “Jun 3” without an icon or a label on pills can feel ambiguous on a card level.
Why it's better: Using icons here would have meant finding symbols for every sort option which isn't feasible to maintain across all card components in the platform. Pills reduce design debt while keeping the system consistent.
For the platform
The redesigned People Card launched in 2024 as part of Jostle’s platform wide release. Collaborating closely with development and QA, we resolved long-standing issues with metadata handling, truncation, and sorting, making the directory more reliable at scale.
The update delivered the following:
Redesign outcomes: fewer support tickets, 95% metadata fit for names/emails, and no critical WCAG AA issues for badges after release.
The redesigned People Card on sorting.
The before and after of Joslte People Card.
Below is a Support Center Documentation & Feature Dialogue I made for the card:
New Feature Dialogue I built in Pendo to announce the People Card redesign to customers.
For the team
The update delivered the following:
Reusable patterns for sorting, status, and edge cases, giving components a consistent baseline.
Reduced maintenance through simpler structures and layout logic.
Stronger resiliency against real-world data with clearly defined rules for edge cases.
Earlier feasibility reviews, smoothing handoff and reducing rework between design and development.
