Simplifying the Customization of Influitive Communities

Simplifying the Customization of Influitive Communities

For over a decade, there was a status quo. If you wanted to customize the look and feel of your Influitive community, pay up or spend hours writing the code. In 2023, we took a step towards eliminating this as I led an effort to make the navigation bar fully customizable in just a few clicks.

My role

Lead designer

Length

3 months

Areas

Strategy, Research, Design

Platform

Responsive web

Team

Product Manager x 1

FE Engineers x 5

Platform

Responsive web

Team

Product Manager x 1

FE/BE Engineers x 20

QA Engineers x 3

Impact

Projected reduction in:

  • Navigation bar customizations done via custom code

  • Engineering service requests for navigation bar customizations

  • Time required to launch a new community

  • Time spent by customers on simple navigation bar customizations by 99%

About Influitive

In 2010, Influitive was created to help companies get closer to their customers. After 10 years, Influitive became the premier platform for 270+ companies to discover, nurture, and mobilize their most loyal customers and advocates.


In addition to participating in discussion forums, referral campaigns, and consuming admin-written articles, members can complete Challenges that involve sharing social media content, providing product feedback, and a plethora of other tasks in exchange for points.

Stock Influitive home page

THE PROBLEM

Diverse customers, diverse content

When customers choose to start an Influitive community, they all start from the same blank slate. With each piece of content published to members, they slowly shape their community to be their own.


While some customers place an emphasis on Challenges, others may focus on other types of content depending on the needs of their company. Although these priorities may be reflected in many different ways, the majority of community managers use their navigation bar to serve prioritized content to users by adding, removing, and grouping links to their liking.

Variations of navigation bars from customer communities

The issue – these navigation bar customizations are only achievable with hours of engineering effort by our team or their own.

If a customer wants to do more, such as customize the look and feel of Challenges, different widgets, or entire community pages, we’re talking months of communication and implementation before a community is ready to go.

THE GOAL

Turn months into seconds

The goal of our project was to take the first step towards making communities fully customizable directly through the product, starting with the navigation bar. Our vision was simple: if a community manager wanted something changed, they would be able to do it in seconds. This means eliminating the technical knowledge needed to write custom code by making customizations possible with the click of a few buttons.


Our high-level goals were to:

  1. Reduce number of navigation bar customizations done via custom HTML/CSS/JS

  2. Reduce number of ESRs (engineering service requests) for navigation bar customizations

  3. Make it easier for admins to perform simple link customizations to their hub’s navigation bar

RESEARCH

Finding that first step

Branding and theming customizations are a big part of building a successful and engaging community. In fact, they are so important that Influitive has an annual award dedicated to the community with the best branding.


Over the years, this became problematic. Customers began paying more and more for customizations, community launches were being delayed by months, and our engineering services team had more customization requests than they could handle. After not long, it became clear that this was not scalable and we had to act fast. The big question was, where to start?


I paired up with an engineer to build an inventory of all customer implementations of custom code with the goal of finding the largest opportunities for our product team. We quickly made a few eye opening discoveries.


  • Navigation bar customizations were the second most common customization

  • Navigation bar customizations make up 10 of the 70 most complex implementations of custom CSS/HTML

  • Navigation bar customizations require on average 6000 lines of code and even simple changes like hiding/adding links require a minimum of 500 lines of code

This begged the question – if this was a substantial effort for our team, how difficult would this be for our customers who rarely have an engineer on hand? Armed with this knowledge, we knew that this would be the first customization we’d productize.

Establishing baselines

To gain insight into exactly how our customers feel about customizing their navigation bar, I conducted a survey and learned that they found it moderately difficult to customize it the way they want. This didn’t come as a surprise, as changes typically require rounds of refinement, constant communication with engineers, and even an additional monetary cost for Influitive’s engineering services.

These baseline scores will be remeasured post release and serve as our success metrics

In addition to these baseline sentiments, we also wanted to get a hold of how many ESRs we’ve received that are related to navigation bar customizations. Diving into our ESR backlog revealed a two key findings:


  1. 7 ESR requests on average per quarter (2020-2022)

  2. Each request takes on average 2.5 weeks to complete (2020-2022)


This way too much for our engineering service team of 2 to handle. Improving these metrics became our definition for success.

Gathering requirements

Through our survey to customers and customization inventory, we were able to narrow down the desires of our customers to 3 customizations which guided the requirements of this project.


  1. Add new links

  2. Group links

  3. Target* links to groups of members


*Targeting is the ability to allow a specific subset of users to see a piece of content, commonly used to prevent users from seeing content that’s irrelevant to them.


All our insights up until this point made us wonder…

" How might we make it easy for community managers to add, group, and target links in their navigation bar? "

EARLY IDEATION

Sticking with the wheel

In many if not all cases, community managers are marketers who are used to using CMSs and site builders. Since navigation customization is done quite often in these tools, I researched and analyzed products such as Wordpress and Squarespace, and competitors such as Khoros to get a better understanding of how users were used to customizing a website’s navigational structure.

Comparative research of market-leading products that offer navigation editing functionality. This involved the analysis of their information architecture, UX, and capabilities.

I quickly discovered that this feature was quite well-defined and similar across products in the market. Users are presented with a list of items, each representing a link to a webpage shown in the site’s navigation bar. New links can be added, and existing links can be reordered, grouped, removed, or modified through various settings.

Many of the products we looked at had similar solutions for displaying and editing a site’s navigational structure.

Despite a feasible and viable solution being handed to us on a silver platter, just because other products are doing something doesn’t necessarily mean it’s right for your product. I wanted to know whether community managers would naturally gravitate to a similar solution before using it as the foundation for ours.

Figjam from the 45-minute brainstorming workshop

I conducted a cross-functional ideation workshop with our engineers, internal SMEs, and community managers, and to our surprise, the heavy majority of our participants landed on the same idea. This gave us the early validation we needed to pursue it.

Architecting for the future

In Influitive communities, navigation bars typically consist of 3 types of items – external links, folders, and pages. When customers create a community, they are provided with a default navigation bar which features a default set of pages that includes pages such as the Challenges page which lists Challenges for members to complete and the rewards page which lists rewards that members can redeem.

The default navigation bar that comes with every community

Along with being featured in the navigation bar, these pages have properties such as their navigation label, title tag, and targeting settings, which we aimed to make customizable through this project. However, customizing these properties means being able to find the page first, which posed an important question:

" How might we make it easy for community managers to find the page they want to customize? "

From our ideation workshop, we discovered that community managers naturally use two methods to find pages in site builders:


  1. Using a personalized mental model

  2. Using the navigation bar structure

Our initial impression was that supporting option 1 would make for a more flexible solution, especially in the future where customers may be able to create custom pages and require a more sophisticated information architecture. However, this future was one that our product team was not confident in and we had doubts on whether it was worth considering.


In addition, we also believed option 1 might create confusion since there would be 2 competing structures – the one meant for community managers and the one shown to members through the navigation bar. It would also require more work for community managers to maintain and increase the scope of our project – both being big red flags at the time.


With such high risk, we chose to set option 1 aside in hopes that option 2 would be a simple yet effective solution in the meantime. Fortunately, after testing option 2 with users, we discovered that it worked well in practice. In our product’s current state, community managers are very familiar to how pages are organized in the navigation bar as they spend a substantial amount of time testing the member experience. This meant that they naturally gravitated towards finding pages based on the structure shown in the navigation bar.


With option 2 being a desirable option that worked well in our existing product while limiting our scope, we chose to use it as the guide for our solution whilst designing with option 1 in mind for the future.

FINAL DESIGNS

Introducing Navigation Designer

Push your most valuable content

Got new content that you want your customers to see? Navigation Designer lets you add a link to any webpage directly to your community’s navigation bar in seconds.

Keeping things nice and tidy

Sometimes you want certain items to be more prominent and at other times you may want them grouped up. Through a simple drag and drop system, you can re-order and group items into folders, keeping your navigation bar organized for members to easily browse.

Finetuning at your fingertips

Not happy with a link’s appearance in your community or browser? Simply choose a link and fine-tune its title tag, navigation bar label, home page status, and other properties in one centralized location.

The right content for the right people

Not all content is meant for all eyes to see. Influitive understands that and gives you a way to choose the users you want the items in the navigation bar to be visible to.

See it and believe it

Whether you’re deciding which changes to make or ready to publish to members, Influitive invites safe and confident exploration by giving you a live preview of how your navigation bar will look at any device size.

Next steps

This feature is slated to be developed in the first quarter of 2024. Although we’ve seen early signs of this feature’s success through user testing sessions with customers, we hope to capture more concrete results post-launch.

Positive feedback from user testing sessions. Constructive feedback was iterated upon.

Once this feature is shipped and well-adopted by our customers, we will remeasure the baseline metrics gathered earlier in the project. We hope the quantitative and qualitative results will help us identify any areas for improvement and determine the success of the feature in terms of usability, time-saved, and customer happiness.

Led design and shipped Influitive's new member

platform - Elevate

Redesigned the end-to-end member experience. Eliminated UX debt and improved Challenge engagement by 56%

Read case study

Increased design and engineering velocity by 50%

Reunified Influitive's platform around a new design system. Reduced accessibility issues, improved user sentiment, and drove product consistency

Read case study

Led design and shipped Influitive's new member

platform - Elevate

Redesigned the end-to-end member experience. Eliminated UX debt and improved Challenge engagement by 56%

Read case study

Increased design and engineering velocity by 50%

Reunified Influitive's platform around a new design system. Reduced accessibility issues, improved user sentiment, and drove product consistency

Read case study

Led design and shipped Influitive's new member

platform - Elevate

Redesigned the end-to-end member experience. Eliminated UX debt and improved Challenge engagement by 56%

Read case study

Increased design and engineering velocity by 50%

Reunified Influitive's platform around a new design system. Reduced accessibility issues, improved user sentiment, and drove product consistency

Read case study

My experience

Senior Product Designer 2020-2024

Product Design Intern 2019

Product Design Intern 2019

Product Design Intern 2018

Various companies

Software Engineer Intern 2015-2017

Have a question, some feedback, or wanna work together? Msg me!

brandon.tong.do@gmail.com

Copied

Copyright © 2024 Brandon Do

My experience

Senior Product Designer 2020-2024

Product Design Intern 2019

Product Design Intern 2019

Product Design Intern 2018

Various companies

Software Engineer Intern 2015-2017

Have a question, some feedback, or wanna work together? Msg me!

brandon.tong.do@gmail.com

Copyright © 2024 Brandon Do

My experience

Senior Product Designer 2020-2024

Product Design Intern 2019

Product Design Intern 2019

Product Design Intern 2018

Various companies

Software Engineer Intern 2015-2017

Have a question, some feedback, or wanna work together? Msg me!

brandon.tong.do@gmail.com

Copied

Copyright © 2024 Brandon Do

Email