Increasing Engagement through Member Exploration​

Research

Research began by identifying a location within our platform where I could create a new member-centric feature. We reviewed platform locations such as the Feed, Discovery and Members tabs.
‍
Ultimately, I decided that the Members tab was the most intuitive. The Feed and Discovery were both great options but the new feature would be competing with other content on that page whereas Members could have a section solely devoted to the new experience.

Observations for the current Members tab

• There were only a few filters and they could only be applied one at a time.
  
• Each filtered list could include hundreds of people but only 5-7 people could be seen at a time because of the height of the list cards.
  
• There was a lot of usable data on the page already such as, member's mini-bio, their member category and their role in the network.
  

Host Insights​

I reviewed insights related to member discovery and connections through our portal on Productboard. A few of the insights are listed below in the carousel.

In addition to the feedback below, Hosts were also looking for stronger member connection to build attendance at events, create new friendships and discover people who have a particular set of traits in common.

Discovery​

During discovery, I collaborated with the design team to create initial mocks for the People Explorer. As the layout took shape, we organically surfaced key questions around interactivity, avatar clicks, filtering, responsiveness, hover animations, and other user behaviors.

Additionally, I worked with engineering to define basic API calls for retrieving avatars, member details, and segmented member lists—such as users living in the same city or sharing similar interests.

Questions

1. What data sources are used to generate these member segments?
2. What new filters are being introduced?
3. How many member avatars should be displayed per segment?
4. If no segments meet the minimum member count requirement, what should be shown?
5. How should we handle segments with only 1–3 members?
6. What should be displayed when a Host creates a network, but no members have joined yet?

Success Metrics

Design

Project Sections

Section 1: Layout, Hover and Animation for Segment​

First, I focused on refining the initial experience and interactivity. My goal was to ensure that members could seamlessly transition from one person to the next, creating an immersive experience. I also aimed for a visually engaging structure without making it feel too abstract.

Mobile is omitted from this section due to the emphasis on hover interactions.

Interactivity

My initial priority was the avatar behavior when hovering over each member. To emphasize the selected person, I designed the hovered avatar to expand while shifting the other avatars aside. Once the cursor leaves, the avatars return to their original positions. This behavior was applied to each avatar within the container. Below is an early iteration of the experience.

Info Card on Hover​

Beyond the hover and expanding avatar, I saw an opportunity to preview key details about each person—such as their name, profile highlights and available actions. This allowed users to quickly assess potential connections without needing to click.
‍
The implementation was relatively straightforward, as I was able to repurpose our tooltip component while making a few adjustments. I explored a white variation as well but ultimately chose the dark gray for its stronger contrast and visual impact.

Segment Container​ Designs

I was excited about the direction of avatars floating in randomized positions within the container. In a layout with clearly defined boundaries, this approach allowed the segment to break free from confinement. Below, I explored four different container styles.

Option 1: Show all members and break out of container

Option 2: Fewer avatars and aligned with header information

Option 3: Drag in any direction inside the container to view members

Option 4: Scroll horizontally to view members on either side

Option 1 felt by far the most promising. It struck a great balance of showing members in full view without being too restricted to boundaries or exploring members.

Section 1: Final Designs

Overall, the team was extremely pleased with this direction when I reviewed the design with them. The layout felt engaging and visually dynamic, while the interactions were smooth and aligned with our goal of effortless exploration.

I made a few final refinements, which are detailed below.

• Add a 'floating' effect to each avatar. The effect encouraged interactivity and exploration of the feature.
• Revert back to the old header style and filters that existed for the Members tab. We cut these changes for scope and chose to focus on other features, which are listed in later sections.
• Limit the number of avatars that shift when hovering over a member.
  
• Introduce a slight delay before displaying the card on hover to prevent it from appearing instantly with every movement, reducing jumpiness and potential user frustration.
  

Section 2: Focused State for Members

A key aspect of this project was the focused state of a member within a segment. When a user clicks on a member, the view transitions to highlight them inside a card with their image and additional details. The remaining members are then arranged in a grid next to the card.

Focused Card

• How will other segments respond when selecting a member?
• What does the visual transition look like when selecting a member?
• Should the selected members be kept on a single card or separated?
• What additional information would we show after selection?
• Can multiple focused states be selected at once?

Web Explorations

Option 1

Option 2

Option 3

Option 4

This direction contained everything within a card and brought the segment tag inside the container. This option felt very structured but blended the selected person with the other members in one card. That felt a little confusing and inaccurate.​

This layout isolated the selected member in a card and kept the remaining members on the background surface. This layout felt like an intuitive option because it put emphasis on the chosen member, elevated them on a new layer and kept remaining members on the current layer.

This option took the background of the segment tag and extended it across the whole container. We had a few concerns with this option though. The title of the segment and close action felt a little misaligned. Additionally, the grey fill on the grey background felt a little repetitive and unnecessary.

This direction was very similar to how we handle modals in the product. It was a focused state on a single segment with a card overlay and vertical scrolling would be disabled. It was a nice contrast to the background but ultimately we didn't like the idea of scrolling to be disabled.

Mobile Explorations

Option 1

Option 2

Option 3

Option 4

This direction offered a strong contrast between the focused member and the others in the segment. I staggered the remaining members, similar to the resting state of the member segment. The team liked this option, particularly the contrast, but since the member card would require a new component, we chose to explore other options.

This layout was busier with the dropdown and segment tag but ultimately provided more context and hierarchy for the focused state. The major concession I made was reducing the size of the avatar. I wanted to keep emphasis on the member but ultimately felt the additional elements were worth the trade off. I  proceeded with this option.

Option 3 isolated the entire segment in an overlay. It was visually interesting but added a new  layer to the view, which felt confusing as to where the user was in the experience. It also removed segment context and scrollability to other segments below. I chose not to proceed with this otion.

This layout removed the member card container and simplified the overall layout. It also allowed for a smooth visual transition when selecting members from the segment but it ultimately didn’t isolate the focused member enough. Every element felt like it had the same emphasis. I did not proceed with this option.

Section 2: Final Designs

Web

Mobile

I was really proud of how this turned out. The experience provided strong visual emphasis on the selected member while still keeping the other members in view. Additionally, we carried over two key elements from Section 1 to enhance cohesion and interactivity: the floating effect on avatars and the hover-triggered card.

This design was a challenge in organizing all the visual elements effectively. I aimed to create a clear hierarchy that emphasized the selected member, highlighting similarities while also encouraging users to start a chat or view their profile. The scrollable list at the bottom felt intuitive and easily accessible for continued member discovery.

Section 3: Edge Cases​

I addressed two common edge cases for networks. First, what should be displayed when a network is newly created, but no members have joined yet? Second, how should the People Explorer appear when a segment contains only two or three members? Each scenario is outlined in detail below.

Edge Case 1: No Members in Segment

Product - Web

Product - Mobile

Marketing - Web

Marketing - Mobile

Edge Case 2: Less than 6 Members in a Segment​

Similar to the previous scenario, some networks might start with only a few members. In those cases, I needed a layout that accommodated smaller segments without feeling too empty. Instead of using branding placeholders, which could incorrectly imply existing members, I opted for gray circles paired with an interactive element.

Another feature I worked on was how the grey placeholders would interact. The experience felt a little flat to simply have them take up space. Instead I explored how it would look applying a similar expand and hover effect with each placeholder with the option to invite a member to the network.

Below are a few design explorations showcasing different hover effects on avatars.

Section 3: Final Designs

These changes came toward the end of the project, so they were somewhat impacted by scope, but I was really happy with the outcome.

For the empty state with no members to show, the team loved the marketing video inside the modal, finding it visually appealing and attention-grabbing. They also liked the call-to-action section from product and the styling of the placeholder avatars. To keep things manageable, I ultimately created a simple empty state that captured a few broad ideas.