Research began with identifying a location within our platform where I could create a new member-centric feature. We reviewed the Feed, Discovery and Members tabs.
Ultimately, I decided that 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.
- 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 role in the network.
I reviewed insights related to member discovery and connections through our portal on Productboard. Hosts of a network 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.
Our Chief Product Officer had put together some initial mocks as inspiration for this project. They were incredibly helpful from a planning perspective for both design and engineering.
For design, I had a starting point to work outwards and figure out interactivity, focused state for each member, responsive behavior and animation. Engineering was able to start creating new API calls for avatars, additional member information and lists of member segments.
1. What data is being pulled to create these member segments?
2. What new filters are we using?
3. How many member avatars would we show in segment?
4. When there are no segments matching the minimum segment member count, what should we present?
5. What happens if there are only 1-3 members in a segment?
6. What will be shown when a Host creates a network and no members have joined yet?
1. Rate of New 1:1 Direct Messages among members
2. Visits to Member Profiles
3. Clicks on 'Show Similarities'
1. Interactivity and Layout
2. Focused State
3. Edge Cases
The main focus of section 1 was to get the initial experience and interactivity ironed out. I wanted members to seamlessly transition from one person to the next and feel immersed in the feature. I also wanted a visually interesting structure without being too abstract.
Mobile has been omitted from this section given the focus on hover interactions.
My first focus was the avatar behavior when hovering over each member. In order to emphasize that person, I wanted to expand the avatar being hovered on and move the other avatars out of the way. After the mouse leaves the avatars, I moved the avatars back into place. This behavior was applied to each avatar in the container. Listed below is an early iteration of the experience.
In addition to the hover and expanding avatar, I recognized this would be a great opportunity to show a preview of that person. Their name, some information from their profile and some action items that could be taken. This way, the current user could see who might be a good connection without needing to click on them just yet.
This implementation was relatively straightforward as I was able to reuse our tooltip component, which consisted of dark grey styling and white font color. I explored a white variation as well but chose to proceed with the dark grey as a bolder, contrasting visual element.
The team really liked the direction of avatars floating in randomized positions within the container. In a layout that contains clearly defined boundaries, this would break out of that confinement. To reaffirm this direction, I explored 4 different options.
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 from the first slide felt by far the most promising. It struck a great balance of showing members in full view without being too restricted.
Overall, the team was extremely pleased with this direction when I reviewed the design with them. The layout felt intriguing and visually interesting. There was also a smoothness to the interactivity and kept to our goal of effortlessly exploring people.
I made a few final revisions to the designs, which are listed 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. We cut these changes for scope and chose to focus on other features, which are listed in later sections.
- Reduce the number of avatars that moved out of the way when hovering on a member.
- Add a slight delay to the card on hover. This way, the current user wouldn't get a card instantly with every hover, which could get annoying and jumpy.
A large part of this project was the focused state of a member within a segment. When the current user clicks on a member in a segment we transition to a focused state with a larger image, additional member information and arrange remaining members in a grid.
Finding the right layout was challenging. I took down a number of open questions to get a better understanding of all the factors in the layout.
- How will other segments respond when selecting a member?
- What did the 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?
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.
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.
Ultimately we proceeded with option 2. The layout felt like it gave accurate emphasis to the selected member. We carried over two aspects from section 1 to make the experience feel more cohesive: the floating effect on avatars and showing the card on hover.
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.
I focused on two different edge cases that were very common for networks. One, if the network was just created and no members had joined yet, what should we show. Two, if there were only 2 or 3 members in a segment, what would the people explorer look like. Each scenario is outlined in greater detail below.
This was a very possible use case for the feature given that we have Hosts creating a new network or starting a free trial quite often. With that in mind, I wanted to create a visually appealing empty state to entice Hosts to begin inviting members and utilizing the People Explorer feature.
I worked alongside the marketing team to incorporate a little bit of branding content. I brought a proposal from the product side and marketing brought an idea from their team. We planned to take both directions and see how we could blend them into one unified experience.
Similar to the scenario above, there would be instances where a network might be only comprised of a few members or it was just getting started. In either situation, I needed to create a layout that accommodated for fewer people in a segment without it looking too empty.
I didn't want to use branding placeholders because that might give the impression that there were existing members. Instead I opted for grey circles with the addition of an interactive element.
Another piece that we worked on during this section 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. A few design directions are outlined in the following video.
These changes came at the end of the project so they were slightly affected by scope but overall the team was extremely pleased with the outcome.
For the empty state where there no members to show, the team loved the video inside the modal from marketing. They felt it was visually appealing and brought a lot of attention to the feature. They also liked the call to action section from product and the styling of the placeholder avatars. To manage scope, I ultimately created a simple empty state encapsulating a few broad ideas.
-poster-00001.jpg)
-poster-00001.jpg){kind=spacer}
