B2B WEB APP DESIGN 

Vendr

Procurement made easy

Vendr is an innovative SaaS platform reshaping the procurement industry with over $1 billion in SaaS purchases across 1,700+ suppliers. With 500+ customers worldwide, Vendr’s core goal is to enable companies find, buy and manage SaaS at the best price and the right time.


Vendr has raised over $200 million in capital in 2022 and continues to onboard high caliber players such as Toast, Canva, Cargurus and more.


As Vendr's customer-base rapidly grows, introducing automated workflows specifically for SaaS procurement became a top priority for delivering value to their customers and the cornerstone of their partnership with Neuron.

Vendr UX UI Design Workflow Builder Space
Vendr-UX-UI-Design-Partnering-With-Neuron.png

An embedded design partnership

After listening to the needs of their users, Vendr came to Neuron to design product features that allowed their customers to construct workflows to automate the internal requests for new SaaS software at their organizations. At the same time, Vendr had just acquiring Blissfully, a SaaS management platform originally designed for an IT use case, and needed to rethink the user experience for less technical users.
 

Ultimately, introducing workflows was one piece of a multi-pronged approach to position Vendr as the obvious choice for the end-to-end management of SaaS products — beyond just purchasing — through a relentless focus on user experience.

Product-led growth

THE PROBLEM

Managing procurement is a disorganized timesink, that does not leverage data

The way procurement is traditionally done is messy. It’s riddled with various documents outlining internal processes, confusing email chains, and loosely defined rules which cause confusion, delays or the purchase of software that doesn't satisfy a companies needs because critical information was siloed.

Vendr UX UI Design Disorganized Procurement Flow
Arrow

THE SOLUTION

Powerful human-in-the-loop workflow tools that solve the unique procurement needs of Vendr’s enterprise customers.

We designed a “human-in-the-loop” workflow builder for procurement professionals to bring structure and automation to their organization’s inefficient, convoluted, or outdated processes, to position Vendr as the source of truth for the growing need for end-to-end SaaS management.


The tool allows “Builders” to visually construct workflows that map out their process, assign tasks to the right stakeholders at the right time, and easily set up conditional logic to streamline the approval or rejection of software requests. The product is designed to increase productivity, efficiency and reduce the operational cost associated with traditional procurement.

 

The priority was reducing the amount of work a procurement officer or team must do to manage the many requests for software they are inundated with daily, by giving them the power to "set it and keep an eye on it". Building templates for common requests allows them to offload tasks, to the right person or team, at the right time. Once the Builder constructs their workflow, it can be published for employees to begin using when they have a SaaS need.

Vendr UX UI Design Abstract Procurement Workflow
Vendr UX UI Design Icon Operational Efficiency

Operational efficiency

Workflows automate the most mundane and repetitive actions of procurement, increasing operational efficiency while removing the responsibility of admins and POs to manually track every last detail of every request.

Vendr UX UI Design Icon Designed For All

Designed for all personas

Visually constructing no-code workflows helps less-technical users understand the logic and power behind the systems they are designing. Users engage easily and quickly to complete tasks that streamline procurement at scale.

Vendr UX UI Design Icon Cost Reduction

Reduced costs

Optimizing and automating internal procurement processes once done by employees reduces costs for companies, and only involves high-value stakeholders for input at key moments.

Vendr UX UI Design Icon Empowered By Data

Empowered by data

Workflow systems allow companies to record and organize the all important information about their various vendors, software, and contracts, becoming their source of truth for all things SaaS.

Thoughtfully designed for multiple personas involved in the process

Multiple parties play role in an organizations procurement processes. There are three fundamental personas we defined and considered throughout the design process.

Key user types defined

Builder persona

The Builder's role is to craft the automations that will optimize procurement processes at their organization to reduce cost, and increase efficiency.

Requester persona

A Requester can be any employee of an organization who needs a new SaaS product to improve their team’s work processes.

Assignee persona

An Assignee is a responsible party who approves or rejects new requests based on legal documentation, security protocols, budget, etc.

Their roles within a procurement workflow

Builder persona

Creates a procurement workflow

Visually builds a workflow and configures the logic for a specific procurement process they want to automate for their company.

WORKFLOW INSTANCE

Requester persona

Requests new software

Fills and submits a request form for new software at their company, which automatically triggers the procurement workflow instance.

Vendr UX UI Design Three Assignees

Completes approval tasks

Various parties complete approval tasks of the workflow, to determine if a purchase or renewal of the requested software is viable and should be made.

Complete Tag

Software purchased

If all steps are approved, the workflow is finalized and the request is executed.

Vendr-UX-UI-Design-Builder-Persona-Shadow-On-White.png

Visually composing a workflow automation

The builder is responsible for creating and configuring the procurement workflow, which then launches and powers their company’s purchasing, renewal and other processes.

Users can either start building from scratch or pick a ready-made template for core procurement workflows:

Vendr UX UI Design Template Options
Vendr UX UI Design Workflow Builder Upgrade

Creation and Step Layout

Steps are laid out in horizontal orientation and follow a linear path. Users can branch pathways using conditional logic or create parallel steps to run multiple steps at the same time rather than one at a time. The fundamental step types are Approvals, Notifications and Conditionals. They create the building blocks of the procurement workflow ecosystem.

Step Configuration

Vendr UX UI Design Workflow Builder Configuration Panels
Vendr UX UI Design Workflow Builder Approval Panel

Each step has its own configuration side panel. Users can assign tasks to different entities which includes specific people, teams or roles. They can create automatic notification and define their source, recipient and content if applicable.

Vendr-UX-UI-Design-Builder-Persona-Shadow-On-White.png

Defining and customizing workflow triggers

One of the crucial elements of a procurement workflow is understanding what software is wanted, why it is needed, what research has been done, and what other contracts might already be in place. The way this information capture can be streamlined is through an intake form, which an employee may easily access and submit whenever they have a software request. In our version of workflows, an Intake form is the most common trigger of a workflow. We provided an intuitive way for a Builder to construct their own intake forms for each workflow, defining different question sets to suit their specific needs.

Vendr UX UI Design Intake Builder

The Form Builder helps manage incoming requests at scale

The Builder has full flexibility and can define questions, their types, answer options, and the conditional logic in case certain answers require separate paths and different follow-up questions.

Vendr UX UI Design Intake Form Add A Question

Customizable Questions

There are multiple types of questions the Builder can choose from. They can define the answers and set-up other configurations.

Vendr UX UI Design Workflow Builder Conditional Configuration Panel

Conditional Logic

Workflows have to account for multiple different scenarios and information. Therefore, Builders have the ability to create conditional statements based on intake form questions and create varying flows for different scenarios.

Vendr-UX-UI-Design-Builder-Persona-Shadow-On-White.png

Streamlining the experience for employees to request, renew, or terminate SaaS products

Vendr UX UI Design Submitting Intake Form
Vendr UX UI Design Intake Form Question 3
Vendr UX UI Design Intake Form Question 2
Vendr UX UI Design Intake Form Question 1

Enabling employees to seamlessly submit requests

If an employee of a company needs new software to improve the way they or their team works, or an update to a current product, they can submit an intake form, defined by the builder, and trigger the workflow process. Through custom intake forms created by builders, general information about the requested product and why it is needed can be captured in a simple, organized manner and relayed to stakeholders at relevant decision points.

Vendr UX UI Design My Requests Page
Vendr UX UI Design Individual Request Side Panel
Arrow

My Requests Page

Employees can track their requests and monitor progress. Requests are represented as card-style elements that provide the request type, relevant dates, the requested app, and most importantly, it's current status.

Request Decision Rationale

Once a user opens up a request card, they’ll be taken to a detailed view of their request, where they can see the completed steps to date and where it is in the process, or an explanation if it was rejected.

Vendr-UX-UI-Design-Assignee-Persona-Shadow-On-Dark.png

Providing the context to complete tasks efficiently and with confidence

Vendr UX UI Design Assigned Tasks Into Individual Task

Task Viewer

With a high level of responsibility and large volume of tasks, assignees needed a quick way to assess each task, as well as access to detailed information to base their final approval decision on. Assignees are able to grasp an overview of the workflow and its progress, while in the side panel they receive all of the contextual information necessary to make an informed decision. Before a decision is made, the assignee may write their reasoning so that the requester, and other stakeholders, are aware as to why the decision was made.

Vendr-UX-UI-Design-Assignee-Persona-Shadow-On-Dark.png

Enabling visibility on the status of all requests

It is important for the key stakeholders like the builder to monitor the requests running on their workflows. This allows them to identify bottlenecks, integration issues or any other problems existing within a workflow.


Users will have two tabs under Manage Workflows page which would allow them to manage the workflows and the instances that are running on them. They will have all the information at hand such as what app is requested, when it began, last interaction, status and more.

Vendr UX UI Design Workflow Instances Into Individual Instance

Workflow Instance Viewer

Users are provided a holistic view of all running instances, from which they can review their progress, see the progress of the steps, and step in and take action if there is a bottleneck in the process. Depending on their permissions, users will be able to select a steps and see a detailed view of the task associated.

Working with users to maximize the success of the feature launch

User testing was conducted to assess the performance of the user experience building workflows, managing workflow instances, and completing tasks. Participants from various backgrounds have tested prototypes we produced, along with early builds coordinated with the Vendr development team. The majority of participants found tremendous value in the new product and felt that the design was intuitive. However, where clarity was lacking or users were getting stuck, our team iterated on the interaction model and copy to improve the experience in subsequent tests.

Vendr UX UI Design User Research Value
Vendr UX UI Design User Research Transparency
Vendr UX UI Design User Research Ease Of Use
Vendr UX UI Design User Research Innovation
Vendr UX UI Design User Research Productivity

What resonated well with customers

Vendr UX UI Design Research Comprehension
Vendr UX UI Design Research Value Proposition
Vendr UX UI Design Research Design Feel

User sentiment was overwhelmingly positive

Here are some adjectives participants used to describe their experience testing workflows:

Vendr UX UI Design Research User Adjectives And Quotes

Conclusion

The first engagement between Neuron and Vendr was completed in four months. We handed off the design to Vendr’s internal development team for implementation and release amongst a subset of their customers.


As part of the engagement, we were able to tackle some of the most complex aspects associated with Vendr’s vision for workflows. Our design process was staged to align with requirements for an alpha release, but we continued our design development to pave the way for following releases that will not only introduce more robust functionality, but position Vendr as the industry leader for end-to-end SaaS management.

Vendr UX UI Design Conclusion Vendr Photo

Next up

Givelify