Background
About Influitive
Influitive is a B2B SaaS web platform used by companies to build branded communities where they can discover, nurture, and mobilize their most loyal customers and advocates to complete tasks that fulfill their sales, marketing, and product needs.
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
Problem
When customers 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.
Each community program typically focuses on different types of content – some placing an emphasis on Challenges while others may focus on discussions and articles.
To serve prioritized content to members, community admins frequently customize their navigation bar by adding, removing, and grouping links to their liking.
Variations of navigation bars from customer communities
The issue – many customizations are only achievable with hours of engineering effort by our team or their own.
Project Goals: Turn Hours into Seconds
The goal of our project was to take the first step toward making communities fully customizable directly through the product, starting with the navigation bar.
Our vision was simple: if a community admin wants 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.
Business goals
Reduce time required to launch a new community
When launching a new community, customers frequently undergo weeks of implementation effort to customize their community to their liking. Reducing time to launch will make Influitive more appealing to customer leads as they can hit the ground running.
Reduce number of ESRs
When an engineering service request is made to implement a navigation bar customization, an engineer is taken away from product development. Productizing these customizations will allow us to divert these engineering resources toward product initiatives.
Customer goals
Reduce time, effort, and cost to implement customizations
A key differentiator of our platform is its customizability, allowing customers to brand it however they want. Rather than making them jump through hoops to use this functionality, common customizations should be quickly attainable without the need of an engineer.
Impact
As we developed this feature, we saw early signs of success through user testing sessions with customers – many expressing their love for its intuitiveness and its time-saving potential for those implementing navigation bar customizations.
Positive feedback from user testing sessions. Constructive feedback was iterated upon.
This feature was slated for development in early 2024. Once shipped, we expected to see a 99% reduction in time and effort spent by customers on customizations toward adding, grouping, and targeting links in navigation bars based on our time-on-task test results.
We also expected to eliminate 83% of the code written for navigation bar customizations immediately at launch, totalling nearly 6,000 lines of code. This is crucial because this means customers in the future would have to write over 80% less code to customize their navigation bars the way they want.
Compared to the hours required to implement customizations via custom code, our feature requires 99% less time to implement comparable changes.
Needless to say, based on our projections, we believe we will meet and exceed all 3 project goals:
Reduce time, effort, and cost to implement navigation bar customizations
Reduce # of engineering service requests for navigation bar customizations
Reduce time required to launch a new community
Research
Defining our MVP
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 weeks, 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 160 lines of code
This begged the question – if this was a substantial effort for our team, how difficult is it for customers who rarely have an engineer? Armed with this knowledge, we knew that navigation bars would be the first customization we productize.
Success metrics
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. A shocking 96% of respondents also believe it would take more than an hour to make such changes. A far cry from the quick and easy experience we envisioned.
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 heavy workloads for our engineering service team:
7 ESR requests on average per quarter (2020-2022)
Each request takes on average 1 weeks to complete per engineer (2020-2022)
Improving these quantitative and qualitative 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 common customizations:
Add new links
Group links
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?
Design Process
Comparative research
In many if not all cases, community admins 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.
Brainstorming
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 admins would naturally gravitate to a similar solution before using it as the foundation for ours.
After conducting a cross-functional brainstorming workshop with internal stakeholders and community admins, to our surprise, the heavy majority of our workshop participants landed on the same idea. This gave us the early validation we needed to pursue it.
Figjam from the cross-functional brainstorming workshop with our engineers, internal SMEs, and community admins
Making things easy to find
Since we envisioned building a brand new part of our platform to support this feature, I wanted to explore building an information architecture (IA) that made it easy for community admins to find where to implement customizations.
Beyond navigation bar customizations, customers make all sorts of other changes to their communities such as colors, typography, browser icon, URL thumbnails, and the look and function of various components.
To ensure our feature is scalable and future-proof, it was imperative for us to build an IA that not only supported current requirements but also these other customizations as well.
An iteration of our site map, content inventory, and tree test plan and results
This work began with a content inventory that I created based on the customization inventory I collected at the beginning of the project and the feature sets I gathered from our comparative research.
An initial site map was constructed for the feature and iterations were made based on tree tests conducted with customers. This was to ensure every customization is easily findable by community admins. After seven iterations, we landed on a sitemap that fit the needs of our engineering team, was intuitive to users, had recognizable labels, and could support all customizations we might introduce in the near future.
Early designs
Building off the ideas that came out of our brainstorming workshop and research, I created initial designs that focus on making it easy and safe for admins to add, group, and target links in their community’s navigation bar.
Through several usability tests with customer admins, and product and engineering reviews, countless iterations were made due to various reasons: Technical constraints, user feedback, and changes in product strategy.
Final Product: 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.
What I Learned
Get people involved
As obvious as it may sound, collaboration is invaluable. Throughout this project, I had regular sync-ups with our engineers and community managers to validate and identify holes in our solution.
Early on in the project, our product team was convinced that auto-saving was the correct approach for users to save changes. However, despite being easier to use and more conventional to site builders, our meetings made us realize that auto-saving would require a way for users to be aware of each other’s changes, which adds complexity.
As a response, we conducted further research that told us users actually expect to manually save their changes since that’s what they’re used to in other parts of our platform. This led to us de-prioritizing auto-saving so that we could quickly deliver value to our customers.
Don’t be afraid to explore possibilities
Although the goal of this project was to build a navigation designer, it was ultimately the MVP for a larger feature to fully customize communities through the product.
It was incredibly useful for our entire product development team to explore what the feature might look like in the future and what we might have to account for now to ensure scalability.
Exploring these avenues created alignment across our disciplines and gave us security in knowing that the solution we create now can smoothly transition into the solution we create in the future.
