Before I tell you about NimbleBrain,
Have you ever had difficulty finding important information?
This information is scattered across various platforms, including SLACK chats, the company website, Google Drive, and other platforms. It’s frustrating and time-consuming to find a quick answer.
Meet Nimblebrain
NimbleBrain connects all your information platforms in one place, using AI agents to provide answers to your questions. It’s an AI-powered SaaS product designed to streamline business data management by connecting various sources into a cohesive, easily accessible system, to speed up the company’s workflows.
At a Glance: NimbleBrain is an AI-powered chatbot that retrieves information from your various connected sources.
Imagine your Google Drive, Slack, company website, and Airtable all integrated into one platform, allowing you to quickly search across them to find where specific information lives. NimbleBrain does the work for you, delivering the information you need in seconds!
The Problem
Mat, our CEO/Cilent, requested we focus on the source page. He knew his customers were having issues with the usability of the source page. Through our research, we identified two key issues impacting usability:
Customer Support Overload - Customers frequently emailed customer support with questions about how to use the product. This highlighted a critical issue: users could not navigate or utilize the product independently.
Underutilization of the Product - User research revealed that customers were not fully leveraging the product's features. This suggested they were missing out on key functionalities, exposing a gap in our user experience and diminishing the product’s overall value.
Project Overview
Current source page
During this project, Mat, our client requested, that we focus on improving the usability of the source page.
What is the source page?
The source page is where customers connect all their company’s platforms. It’s the central hub where customers can connect all their platforms like Slack, Notion, their company website, and more.
Goals:
Enhance usability for the source page
Establish a consistent design pattern for all the sources
Design a user-friendly interface that caters to non-technical users
Current design patterns for all the different sources
And when I say consistent design pattern, here are the current design patterns for all the connected sources Slack, Public URLS, and Notion.
We realized that all these sources were different from one another, each with its own design. It became clear that we needed to create a more consistent design across all sources.
Our Solutions
For our solution, we used our research to drive our designs.
The new source page features all the different sources and establishes a consistent design pattern.
Consistent Design Patterns
Our overall design solution focused on creating a consistent design pattern to streamline the user experience and ensure uniformity across the product.System Alerts: Keeping Users Informed
To improve communication on the page for connecting external platforms, we introduced system alerts and status updates to notify users of any issues. The previous system was limited, offering minimal information to users.Increased UX Copy
We added clear, informative text to help users better understand product features and maximize usability. Our research revealed that the existing language was confusing and lacked guidance, so we enhanced the copy to improve clarity and user experience.
To dive a bit deeper, here’s an example of Website URL design pattern and how we added system alerts and improved UX copy.
With these new designs, we achieved excellent results with our customers.
Through usability testing, we discovered that customers experienced reduced help requests and error rates, as well as increased enjoyment and success rates!
Our Design Process
Understanding our users
Why aren’t our users using the product to its full potential?
Since the main goal of this project was to increase the usability of the source page, we began with a heuristic evaluation to quickly identify potential areas where users were experiencing confusion.
We used this information to develop metrics for our usability testing. Specifically, we measured how often users asked questions for help and how frequently they were unable to complete tasks.
This was the current data source page and heuristics evaluation on it
During our usability testing, we discovered these key insights:
The majority of users were able to complete the tasks but were unsure what to do afterward. They successfully added their company’s Slack, Notion, and companies websites but after adding all of those sources, they were uncertain what to do next and confused how to manage those connections.
Additionally, all users were confused by the copy and system language used on the page, often asking questions like, ‘What does autoresponder mean?’ or ‘What do public URLs mean?’
This research revealed that our users were not entirely sure how to use the product efficiently and to its full potential.
Understanding the Existing Product
The Constraints of the Existing Product
Over eight weeks, I led weekly stakeholder meetings with our design team. After presenting our research findings to the client, we realized the need for a deeper understanding of how the product functions behind the scenes and its long-term goals. The data source page emerged as a critical component, as it is the core from which the AI Agent retrieves information to answer user queries.
This meeting was pivotal, setting constraints and providing a comprehensive view of how the system operates.
These discussions gave us valuable insights into the constraints and goals guiding our new designs. We identified three key learnings:
While our stakeholders desired a consistent design pattern across different sources, we found that each source had unique requirements that needed tailored solutions.
The system's architecture and API constraints meant limited flexibility in how external platforms connected to NimbleBrain, requiring careful consideration in our designs.
We learned that Mat, our stakeholder, and developer, built the pilot version within a week using the Bootstrap Design Library. To maintain design consistency, we aligned our new designs with the existing Bootstrap framework.
Designing for a Diverse User Base
As business goals shifted during the design sprint, we reassessed our target audience and adapted our design strategy to accommodate a broad range of users and use cases, ensuring effectiveness as NimbleBrain expanded its customer base.
Here is the current design pattern, and because of our new and different users, we learned that not all users will need to connect Slack, Website URLS, or Notion.
We asked ourselves several key questions:
How can we ensure a consistent design across all sources?
How can we communicate to users what actions they must take for each source?
How will users know if a connection to a source fails?
Current Design Patterns
Generating new ideas
Creating and designing with all these constraints
New User Flow
By understanding how the existing system works and aligning with business goals, we leveraged this knowledge to design new solutions for Nimble.
Before sketching any designs, I conducted market research to gather inspiration on how other companies organize their data and dashboard screens. Additionally, I analyzed the current user flow and developed a new one to ensure a seamless journey for both new and existing users.
We first focused on the design patterns, here are just 6 different ways we explored the new design patterns. There are many other versions of the exploration of the design patterns.
Here are just some of the different design patterns we tried
An example of one of the ideas we explored—and why it didn’t work!
A low-fidelity mock up of one of the ideas we explored but didn’t work
So yes, this is one the design patterns that didn’t work.
By designing with constraints, we also realized
Why did we choose this specific design pattern?
Let’s dive a little deerper, here is website URL Design pattern
Dev Handoff
Handing off for development
Screenshot of some of the dev hand off
Throughout the process, we aligned our designs with business goals while ensuring they were feasible within current constraints. Fortunately, our client was also our developer, which streamlined communication.
I led the developer handoff while Hannah focused on usability testing and organizing information. Together, we cleaned up files and used Figma's Dev tools to mark everything, ensuring clarity and completeness.
Overall thoughts and reflections
Working in an agile environment during an eight-week design sprint kept us adaptable as our client’s business goals evolved. We frequently revisited user scenarios, tackling diverse challenges while staying within scope.
Working in the B2B space with NimbleBrain showed me how niche a product can be and how a specific solution can make a big impact on the right audience. I also loved how technical this project was—it pushed me to think within constraints and find creative ways to design within that framework. Overall, it was a great challenge that helped me grow as a designer.
Fun fact: Hannah and I presented this case study during Honolulu Tech Week 2024!
From left to right: Myself, Mat (Our Cilent), & Hannah (UX Designer)
Hannah & I presenting our NimbleBrain Case Study at Honolulu Tech week 2024!