I approached this project from a design system perspective at our company, and therefore took on a few roles towards updating our cards in our activity feed to best meet our persona's needs.
As our company scaled, we adopted a new method of displaying potential customers for our users, the sellers, to contact: the Activity Feed. This displayed customers activity on various parts of the seller's website to see which customers were most engaged and could transition into potential buyers.
This new form of displaying data led to customer feedback of there being too much noise on the feed, and that they weren't able to quickly determine who to contact. We also reached a point within our design system where various feature squads within the company were creating cards for this feed style layout with varying patterns.
As the design systems designer, I took on the project of aligning our card patterns, while also addressing the customer feedback.
.png)
There were three key problems to address that we learned from generative research from our customers:
I started by taking the original findings from our generative research to create a new concept of cards. I then ran a within subject usability study with 8 participants that fell within our target personas of Sales Development Representatives:
- 4 external customers
- 4 internal company users
Each participant was shown both the existing feed cards and the new concepts, but in different orders each time. The cards were displayed at the page level with multiple cards stacked as scrolling feed.
Below are the two concepts that were tested against each other.
.png)
Users were asked the following questions:
We have two Figma files for this project, one for explorations and one for final component deliverables that designers and engineers could actively use. Each component went through the stages of research, exploration, refinement and dev ready, This was reflected in both the Asana board and our Figma exploration file.
When we completed a component, it was moved into our final design system file and turned into a Figma master component and heavily annotated. Every time a component was completed on our end and moved into dev ready in Asana, a message was triggered in Slack to alert the engineering team that a component was ready. Each Asana ticket was set up to have the link to the page in the exploratory file and the frame in the final design system file.
We found that the new concept greatly outperformed the existing designs, and led us to make the following recommendations:
1. The cards should have a consistent header that focused on the account name rather than a combination of account + contact.
2. The account engagement score should be showcased on the top right of the card with a clear interaction on hover to breakdown the details further. The updated visual design of the flamed was also strongly preferred to the original.
3. Progressive disclosure on the cards was extremely intuitive, and users knew right away to click there to find more information on contact activity.
4. Contacts should be separated by who was online vs offline to better determine who to reach out to first.
From a few qualitative questions we learned that the updated designs were much easier to scan and had a stronger information hierarchy. 6 out of 8 users preferred the new design, and specifically called out that the design felt visually cleaner and less noisy. These, among other learnings were integrated into our updated designs.
With these results, my first step was to conduct a research read out to all of the teams that had created cards like these for their areas of the product.
Once we were able to align on the recommendations, the updated cards were added into our design system component library. I made components for each of the card types we needed, ensuring they all met the updated guidelines. I also created a container card which contained the framework for creating these new cards, with the flexibility to adapt them as new requirements came up. These were also heavily documented.
Each squad then began to incorporate these updated components into their screens and added a quality sprint to their roadmaps to address these UX updates. Currently all the card designs have been completely updated.
Overall we found that the screens with the dark blue top navigation performed better than the rest, showing faster wayfinding times in two out of three categories. In reviewing all three concepts with the participants, the idea of a clear information hierarchy came through a lot with the blue top navigation, showing that it was easier to separate the working area from the navigation area because of the stark color contrast.
We need to incorporate the results of the above testing and update our navigation items across the products. We’ve also begun to map out what shapes a product identity and how it ties into elements such as branding, voice, personality, etc., and understand which of the adjectives from our study might be more relevant to which of our personas. Our next step is to finalize what voice we are working towards and identify which of our components could be affected by this.
Our next steps will be to start tracking user data on these cards to see which areas users expect to interact with the most so we can determine how to link best link these records to contact data.
We will also be doing further research on the engagement score to help increase visibility around it.
