Second Funnel CMS

A SaaS product for marketers to create customizable, eCommerce-enabled landing pages.

We had designed landing page experience that was reliably lifting conversion rate and getting positive feedback from customers and end users. Now we needed to create a product that would allow us to scale that success. This is case study shows the process we followed to design the web-based page builder that would be our SaaS product.


Role:

I was the product design lead on this project. It was my job to meet with our customers, understand their needs and goals, and translate that into a saleable and useful product. I defined product strategy, conducted user research and testing, and produced product requirements documentation, site map and user flow, high-fidelity wireframes, a style guide, and final design comps. I worked with a team of one other designer and three developers.


Getting Started

The message from our customers was clear: they needed to easily and quickly create eCommerce landing pages without having to rely their platform team.

If we could build a self-service tool for creating landing pages, then the time, effort, and cost needed to launch a page would be significantly reduced.

customer quotes

Objectives and Key Results

So that we’d have a clear picture of what success looks like, we defined objectives and key results for our product.

Objectives

It’s easy to use It’s quick to launch a page It’s a trusty resource

Key Results

  • No major usability issues, found via usability testing and customer feedback.
  • Percentage of users that use each feature (high percentage across all features indicates discoverability and usefulness = usable)
  • The minimum and average time required to build and publish a new page from scratch.
  • The number of pages published per quarter.
  • New template requests per quarter

User types

To better understand our customers and how they worked within their organizations, we ran customer interviews and mapped out their org. structure. This process helped us define our user types and their respective goals.

Our primary user type was the Digital Marketing Manager. This person was responsible for configuring the landing page and managing their campaign.

user types

User goals

  • Configure and publish landing pages
  • Monitor and report on page performance

Tasks and user stories

To define tasks, we looked at the output of the product (a fully populated and configured page) and listed out all the inputs required to get there:

  • Choose a Template
  • Populate Page (Add Products & Content)
  • Merchandize Page
  • Configure Settings
  • Publish

Each of these tasks have subtasks, which we summarized and described as user stories, and then translated into features and requirements. We listed everything in a Google spreadsheet.

feature set

Sketches and prototypes

We started concepting by sketching various user flows, screens, UI elements and interactions that could support each story. From rough sketches and ideas, we went into simple wireframes and built some basic elements of the product that we could use and test internally. For example, we built a very basic interface for importing product data into our database that we used internally before rolling out this feature to our customers.

sketches

prototype

Sitemap and user flow

Before working on detailed designs, we mapped how everything would fit together, and showed how the user would move through the app to get things done.

Low-fidelity Designs

With the sitemap in place, we then created detailed wireframes for the screens and interactions that made up the user flow.

Start Screen

Template Selection Modal

Add Content Via Image Upload or Scraping Product Page URLs

Interface for Tagging Images with Products

Drag-and-Drop Interface for Arranging and Editing Content Tiles

Style Guide

Controls


See More Case Studies