IdealPath Case Study

idealpath mockup screen

IdealPath

PRODUCT DESIGN, BRANDING, FRONT-END DEV


IdealPath is an enterprise SaaS product for intelligent marketing automation.

I was the lead product designer, and front-end developer on this project from 2016-2019.

Establishing a process

Based on extensive customer & market research delivered by the CEO, I worked with my team to establish a reliable product development process. We utilized the "double diamond" design based on previous success with enterprise software development.

design and development process chart

Information architecture & user needs

After establishing the key goals, features, and ideal customers for the product, I began creating information architecture that would support logical organization of each system. IdealPath needed to support four key user personas with a feature set that crossed multiple disciplines.

Our goal was to create a product that was "usable". This meant customers should be oriented to what was happening in the app, aware of the actions they could take, and efficient in completing their daily tasks.

App Architecture

app architecture flow chart

Hierarchy of Product Design Needs

product design pyramid

Defining user flows & data models

Due to the large scope of the app, over 50 user flows needed to be created based on the jobs to be done. These workflows helped identify the processes customers would follow while using the app and informed the product team of how to model the data relationships.

At the core of IdealPath was the concept of a campaign system that simplified and enhanced the existing process for building marketing campaigns. The following examples will focus on the campaign in an effort to focus in on this massive product.

Create Campaign Workflow

campaign workflow chart

Campaign Data Model

campaign data model chart

Prototype fast & iterate

I created a 40+ view prototype in only a week to begin testing the user flows and user interface design. After a few quick rounds of design feedback and changes, we immediately built the v1 of the application and I iterated the design directly in HTML/CSS/JS.

animated prototype walkthrough
campaign name profile page

Get customer feedback, iterate again

We gained our first customer within the first few days of building a functional prototype. They were able to use the product and help us identify points of complexity and confusion. Based on this feedback, we completely redesigned how we approached several key parts of the app from navigation to campaign building flow.

whiteboard notes
three versions of application
campaign content page

Optimizing for enterprise & accessibility

After a few months of developing and designing the product, I realized I had made a terrible mistake. The colors I selected early on for their emotional impact made the UI hard to read. Working directly with the CEO, I redesigned the brand and UI to be WCAG color contrast compliant.

These accessibility improvements added tremendous results for all users while helping us meet the disability requirements of enterprise companies.

colors and fonts branding

WCAG Color Contrast Compliance

buttons with contrast

Balancing customer needs with business goals

A little over one year into the project we had some customer traction and a strained product development team. With only 3 members including myself, every day was a struggle to balance support needs with new feature development.

In an effort to bring order to this chaos, I established a process to help the team measure customer and business value of our feature ideas and requests.

Customer Value + Business Value

customer values and business values chart

Feature Development Process

development processes

Continuously shipping enterprise SaaS software

No product is ever "complete". Product development is an ongoing process that requires constantly listening to customers, working with stakeholders, and building features that serve both the customer and business goals.

Leading the product development team at IdealPath was a wonderful experience that allowed me to grow tremendously as a designer and a person. Thank you for reading and please enjoy some samples of the final product below.

text editing example
analytics screenshots
idealpath mockup screen
idealpath logo
Back to Projects