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:
The original People Card struggled to scale. Click or swipe to explore the carousel.
For this project, the scope was clear:
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: Discussion 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 long titles and multiple roles made cards harder to scan.
Customer Success flagged requests from large orgs to make people easier to find.
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.
Impact of the redesigned People Card across users, business, and the design system.
View the Support Center Documentation I made for the card below.
Better mobile support
In future iterations, I’d explore lightweight overlays or tap-to-reveal patterns to give mobile users the same glanceable context without hover.
More measurable validation
I’d also run baseline usability tasks and lightweight A/B tests to capture clearer outcomes such as task success rates, speed, and comprehension.
What started as fixing a frustrating card became an exercise in embracing the messy parts. Addressing those edge cases led to clearer rules, which gave the team a system that scaled better and was easier to maintain long term.
Most of all, it reinforced that even the smallest component can shape how people experience and trust a product, and that’s the kind of impact I want to keep bringing to every project.
• Toronto, ON