Bentopath

User Research / UI / Product Design / SaaS Product
November 2020

Trailmerge Labs saw an opportunity to expand their horizons as a design agency within the B2B SaaS space by contracting my team and I to craft a web-based SaaS platform that solves this complex problem facing product leaders and cross-functional teams.

Project Role
Product Designer (Lead) with 3 other designers
Platforms
Cloud-based Enterprise Software
Deliverables
High Fidelity Figma Prototype
Timeline
3 Weeks Agile Sprint

Project
Overview

For my first case study, I would like to showcase BentoPath. But first, let’s talk about why we set out to solve this problem when Trailmerge Labs contracted my team and I to design a SaaS product for them. Trailmerge Labs, a product design agency from Atlanta, saw an opportunity to create a solution focusing on various obstacles that product leaders were experiencing within the agile software development cycle.

The Problem?

Product leaders are having a hard time with clear project management, functional agile development, and open communication with other teams. Conversations between teams are siloed off from each other instead of directly going across, leaving a lot of room for miscommunication and consequently slowing down the entire product release cycle—causing startups to miss releases, disappoint customers, and loss of revenue.

Problem Statement

How might we create a solution that would help alleviate problems experienced by product leaders with agile planning, roadmapping, and in coordinating design, development, and sales/marketing efforts within complex SaaS environments?


The Solution

a cloud-based tool that allows for more agile planning by removing siloed workflows between teams, empowering product leaders to prioritize builds, track releases, and foster roadmap collaboration between everyone.

As the Product Design lead for BentoPath, I was responsible for user research, interaction design, design system development, and visual branding while working alongside 3 other designers. Building tools that helps connect people and empower them to do their jobs better is one of the most satisfying types of work I’ve had the pleasure to experience.

  • All-inclusive, web based SaaS solution
  • Reduces silos within an organization by congregating the agile workflow into one tool
  • Helps executives, stakeholders, and entire organization gain valuable time through transparency and efficiency
Main Dashboard
High-Level Product Release Cycle View
Team Plan View
Calendar View
Team Goals / Plan View

Aligning Goals

Project Goals

  • Conduct user interviews for a deeper understanding of the problems and behaviors product leaders are currently experiencing with roadmapping in complex SaaS environments, especially with coordinating design, development, and sales/marketing efforts
  • Build and test low and mid-fidelity prototypes of the core release planning functionality
  • Design, test, and deliver a MVP core release planning functionality, from low-fidelity wireframe to high-fidelity prototype

Constraints

  • Project timeline: 3 weeks
  • Approval on design decisions, style guide, and prototype as inputs needed from stakeholder
  • Design the product less for complexity and more for simplicity

Assumptions

  • There are “silos”, most teams are having difficulty with planning across teams. Things get lost in translation between each department.
  • Each department has its own tool for managing product and development, and these tools are not integrated across teams.
  • Product Managers need to be able to zoom out into a higher-level view in order to see the tasks, progress, and deadlines.

Requirements & Trade-Offs

  • Has project / product release prioritization
  • Different views for teams (PMs need macro view of roadmap, design team needs to see which iterations/features to work on, development team needs to see project backlog
  • Instead of boards, task, sub tasks, and assignments, we are looking at more like “here is a feature/sub feature/block of functionality that can go into a roadmap” there will be design problem statements, Jira, etc .
  • Trade-Off: Only 1 week to conduct user interviews and research by ourselves
  • Trade-Off: Had to build a design system from scratch, no existing system
  • Trade-Off: Everything is bespoke to stakeholder’s preferences

Discover

Competitive + Comparative analysis

Analyzed 5 Product Management tools focused on
  • project management
  • developer backlog management
  • collaboration
  • product management
Current competitors
  • General Project management: Aha!, Plutora Asana, monday.com, Airtable
  • General Collab tools: Slack, Notion, Google Workspace, Office 365 
  • Dev backlog management: Jira, Confluence, etc
Tools all utilize
  • Project Roadmapping
  • Agile methodologies (Scrum, Kanban)
  • integration with additional software

User Research & Interviews

Led interviews with 6 different Product Leaders and Product Managers to identify problems with roadmapping in complex SaaS environments and coordinating design, dev, and sales/marketing efforts. Identified daily workflow problems alongside primary objectives when managing product release cycle.

Key Takeaways:

  • Manage teams while gaining a high-level overview of all tasks and product releases 
  • Need to keep track of different teams and departments due to highly collaborative work
  • Utilize either waterfall or agile methodologies; agile teams rely on scrum and kanban frameworks 
  • Use many different tools in daily workflow to manage teams (JIRA, Asana, Confluence, Slack etc.) 
  • Use roadmaps keep track of different releases and features


Affinity Mapping

Synthesized key findings using an affinity map to define target user and analyze main pain points they are facing.

Key Takeaways:

  • 100% said that they had to keep track of way too many tools on a daily basis
  • Under 66% use the Atlassian Suite as their primary tool for Product Management
  • 80% use some sort of an agile framework within their team or company 

"I" statements

Organized statements from user interviews into categories which highlighted their needs and pain points. Created “I” statements to help empathize with clients to create a target user persona.

Key Takeaways:

  • “I need a way to easily collaborate across teams on a product release” 
  • “I need a way to view all of the tools I use simultaneously on a daily basis” 
  • “I need a way to keep track of the varying needs of each department or team”

Develop

"How Might We?" Questions

  • How might we allow Product Managers to see a high level overview of the product releases?
  • How might we make it easier for the Product Manager to mark tasks as complete?
  • How might we make it easier to keep track of product releases between different teams and cycles?

Conducted a design studio using rapid ideation to brainstorm potential solutions. Refined sketches to create a main hub allowing users to view updated features, different roadmaps, project updates, and current/upcoming product releases.

Wireframes

High-level view of tasks and tickets that could be labelled depending on their status within a single dashboard.

Overall goals include:
  • Promote an agile approach that allows for a high level view of project progress
  • Ability to view more details upon clicking into a ticket
  • Easily viewable updates informing users who made changes
  • Knowing when to promote collaboration between team members

Wireflow Diagram

Product Release Experience #1

The goal was to design and test an intuitive guided experience for clients to view and track the progress of a new task from ideation to product release cycle. Tests were conducted remotely via Zoom with users of Product Management softwares such as Jira and Asana.

Key Results (Usability Test, round 1)
  • The navigational elements on the pages were too big - refined them to be smaller.
  • Wireframe components and modules were too large - redesigned to be in line with industry standard dimensions
  • Product Release section was not needed in a new page - changed the “Releases” card to a pop-up bar from the bottom of the main screen

Product Release Revised Experience #2

Resolved issues of validation by making iterations from first round of usability test and conducted the second round with a high fidelity colored prototype.

Key Results (Usability Test, round 2)
  • Successful task completion: Users were easily able to complete their provided scenario and preferred the high fidelity prototype with colors
  • Added onboarding: users were able to navigate through onboarding at a faster pace with more efficiency and precision
  • Drag and drop feature: users instinctively attempted to drag and drop the cards - we created an animation to show this feature

Deliver

Atomic Design System

Created an atomic design system with complete assets and components to deliver to our primary stakeholder and client.

Key Results:

  • Atomic Design: atoms, molecules, and organisms were designed to give the final product a cohesive look.
  • Colors: Utilized primary, secondary, and neutral color scheme
  • Accessibility: AAA accessible colors were used

Visual Branding & Identity

Primary stakeholder and client requested that the product be easy to navigate, pleasant to look at, and enjoyable to use. Created a custom logo using colors that reflect a light-hearted theme. Fellow teammate illustrated custom sushi icons to fit the theme of a bento box as requested by our client.

Key Results:

  • Logo design
  • Color System
  • Typography

Final Results

This is BentoPath, a brand new Product Management tool designed with Agile teams in mind. BentoPath allows Product Leaders and managers to collaborate quickly and efficiently across multiple teams using a single source of truth for managing agile planning, product roadmapping, and communication channels, all while integrating easily with cross-platform technology stacks.

Main Features:
  • Drag & Drop functionality: improve workflow speed and task management.
  • Onboarding process: showcases important features by immediately dropping users into the application, with setup items being prioritized via Notifications right on the dashboard
  • Different level views: Switch between high-level views for product releases, change team views with roadmaps and agile planning charts, add integrations with your current communication tools, and easily drop tasks into future release cycles.
  • View company objectives and key results, communicate cross-functionally with different teams directly, schedule calendar invites and meetings, view past and current product iterations according to roadmap.


Next Steps
  • Work with development team to implement the drag and drop feature.
  • Build out user flows for agile planning, product roadmaps, and collaborative features such as voice chat, live commenting, in browser messaging, linking different boards together across teams.
  • Conduct research and usability testing on the product release plan page.
  • Conduct research to integrate BentoPath with other tools like JIRA, Slack.