on to the next adventure
Stacked Logo.png

Product Design

Product Design

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: What We Heard

 

The message from customers was clear: they wanted a tool that would let them easily and quickly create pages on their own, without needing to rely on us or their internal departments.

 

We had met and worked with enough customers building landing pages to hear and see first-hand what they wanted and needed.

The underlying assumption:

Our theory was that if customers have a self-service tool, then the time, effort, and cost needed to launch a page would be significantly reduced. If it was super easy and cheap to launch pages, then the number of pages launched would increase significantly, therefore increasing our value to customers. 

 
 

Product Purpose: What job is it being hired to do?

Source: Intercom, Jobs-to-be-done Framework

Source: Intercom, Jobs-to-be-done Framework

 

We used the jobs-to-be-done framework to define product purpose in terms of a customer need — what "job" are they hiring a product for?

 

The framework breaks a job story into three parts: First, what situation triggers the need? Second, what is motivating our customer to take action? Third, in performing this job, what outcome they are expecting?

In our case, this can be described as follows: 1) The situation that triggers the need is when our customers are preparing to promote their products online. 2) Their motivation is to have a custom landing page to support their promotional tactics (i.e. their campaigns). 3) Their expected outcome is to boost campaign performance and achieve (or exceed) sales goals. 

 
 

Product Objectives and Key Results

With the product purpose described in terms of a customer need, we could define objectives and KPIs that would best support that need. 

 

Product Objectives:

  1. It’s easy to use
  2. It’s quick to launch a page
  3. It’s a trusty resource 

Key Results and Measures of Success

  • 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

Org chart and Archetype.png
 

Over the course of many customer interviews, we mapped out the typical org structure for eCommerce and digital marketing departments, and we created archetypes for each role.

 

The archetypes would help define the product's user types and their respective goals. Our primary user type was a Digital Marketing Manager. She would be responsible for building the page and managing the campaign. Direction and final approval would come from her boss, the Director of Digital and/or the Director of eCommerce. The Director of Digital and the Director of eCommerce both reported to the VP, and their main goal was hitting revenue targets. 

 
 

Goals and Tasks

Feature Set.png
 

The primary goal for our user type, the digital marketing manager, is to quickly create and edit pages without any external help.

 

They have a secondary goal as well, which is to monitor and report on page health and performance.

User Goals:

  • Primary Use Case: Configure and publish pages
  • Secondary Use Case: Monitor and report on page performance

Tasks: 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:

  1. Choose a Template
  2. Populate Page (Add Products & Content)
  3. Merchandize Page
  4. Configure Settings
  5. Publish

User Stories: 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.

 
 

Sketches and Prototypes

sketches.png
 

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 prototyped an interface for importing product data into our database.

 
 
 
 
 

Sitemap and Userflow

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.

 
 

Wireframes

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

 

High-Fidelity Designs

 
Arrrange and Edit Tiles.png
 

Tile Over Controls

 


Other Case Studies

UX & UI Design: An eCommerce UI used by brands like Gap and Sur la Table. See more →

UX & UI Design: An eCommerce UI used by brands like Gap and Sur la Table. See more →

UX Strategy How to scale Starbucks.com across global markets? See more →

UX Strategy How to scale Starbucks.com across global markets? See more →

Design Research How can digital improve the customer experience? See more →

Design Research How can digital improve the customer experience? See more →