How We Designed ULI’s Trending Topics

The Urban Land Institute (ULI), a global, nonprofit member-based organization in the real estate and land use space, often heard that its members needed better access to knowledge generated by the organization. So ULI approached Velir to build on successes from their prototyped Knowledge Finder, an all-new platform with a powerful predictive search engine driven by AI and machine learning that helps members search thousands of ULI resources to find the most relevant industry knowledge.

How Trending Topics Started

ULI’s expansive content covers around 80 unique topics. Members can select their interests, and we provide personalized recommendations based on those interests. We’ve also worked to personalize content based on a member’s behavior on the site. If members have indicated they’re interested in Affordable Housing but visit Sustainability pages, we want to promote both.

The concern ULI had with this personalization tactic was that we would funnel members into their own bubbles rather than empowering them to explore new topics. This could prevent a member from learning about the latest industry trends affecting another topic.

A key value proposition for members is belonging to a global network of industry experts from which they can learn and share best practices. Members look to ULI and their fellow members to stay on top of the latest trends and understand what other members are talking about at any given moment. With Trending Topics, we saw an opportunity to give members a topic-based look at what other members are viewing so that they could discover this timely content for themselves.

From a content strategy perspective, ULI wanted to show the scale of content published on the site and encourage members to explore topics they might otherwise miss. While personalization works to funnel people toward what we think they are interested in, the Trending Topics feature’s goal was the opposite: to show what other people are interested in. To keep things simple for members ULI wanted to show 5-10 topics at a time with it.

Many of the Knowledge Finder’s major features are built to help members find content, including its robust search experience. Knowledge Finder also has personalization that provides audiences with recommendations based on both their explicit and implied interests. This curated content allows ULI to push important pieces to members. Building on the benefits of all these features, Trending Topics improves the site experience by helping members explore the topics their industry is focusing on.

Our Approach

We initially proposed a simple design with straightforward logic. Trending Topics was originally scoped as a small part of the personalization work we were doing. We planned to reuse the design of an existing feature and expand it to handle the longer names and larger number of links listed. With this direction, we would just list out the top six or so topics and meet our basic need: show members what topics are popular now.

After our first review with ULI, we agreed there needed to be a better focus on storytelling to provide members with a more engaging experience. So, we went back to the drawing board. The initial version was slated to be in a prominent place on the homepage, but, it became clear that for Trending Topics to deserve this prominent location, it needed to be more compelling. A list of links would be passed over as a member scrolled down the page. If this feature planned to help members browse the site and find content outside their bubble, we needed something they would want to engage with.

Our Design Approach

The idea of Trending Topics being more than a text and image component piqued the ULI team’s interest. We wanted it to feel interactive and dynamic while also conveying information at a glance. It needed to be useful for two audiences: people that want a quick overview, and those that like to explore topics in greater detail. That’s how the idea of the string chart was born.

Inspired by brandlovescore.com, we built a similarly designed approach to displaying a large number of topics. Initially, we thought the top 10 topics should have their own string, but as we explored the idea, it felt more interesting to show members the depth of topics Knowledge Finder has to offer. So, we decided to add all 80 topics.

Adding all 80 topics gave us a chance to display a variety of topics in a small space. The sidebar list quickly shared the top 10 topics and the colored lines drawn on the page encouraged members to explore them further. As members clicked on a topic, the chart would focus on that selected topic, and animate to show its difference in popularity since last week. Not only did the graphic give members a chance to see what the community was interested in, but it also gave insights into how certain topics had developed during the past week.

All this information expressed in a small space with smooth transitions and animations made the topic search experience much more fun than going down a list. For accessibility, we decided to also provide a list view of topics. This way, anyone who had issues using the graph would still be able to access the information in a chart without any graphics or motion.

Technical Limitations

There were several technical limitations for each feature. For example, displaying a list of topics based on member traffic was a challenge but a manageable one. Different topics have different amounts of content. Because ULI did not want to have all the big topics always listed and have the smaller topics never listed, listing topics by their number of pageviews was not going to accurately show popularity. 

The next challenge was how to display that in a chart. Based on our research on other sites, the chart view was a new take in the Trending Topics space. And, it came with its fair share of initial challenges. One of the biggest ones was the space allotted for the component since 80 topics is a lot of content to exist in a small area. Because of this, we had to focus on how we used interaction states. Here, our development team stepped up and helped us figure out how to make the chart slick and intuitive.

We decided to disconnect the chart slightly from the list of topics. This had the downside of making the order different between the chart and the list but allowed us to provide members with more data to interact with. Rather than showing the traffic spikes directly, we decided to show the popularity of each topic by percent of pageviews. When a member selects that topic, the chart changes and they’re able to see the topic’s normal traffic as well. The area between the lines is the size of the spike in traffic.

A strong design vision and story helped bring this dynamic feature to life on ULI’s Knowledge Finder. We were excited to collaborate with ULI on building Trending Topics and found the process extremely rewarding. ULI's valuable feedback allowed us to align on the best place for the feature, the best format for it, and the best ways to maximize member exposure to relevant industry topics. Through teamwork, we overcame technical challenges to create a feature that contributes to a great member experience in Knowledge Finder and helps ULI deliver increased value to its members. 

Read more about our work with ULI or reach out to learn how we can help you implement personalized content recommendations on your website.