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.
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.
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.
So that we’d have a clear picture of what success looks like, we defined objectives and key results for our product.
It’s easy to use It’s quick to launch a page It’s a trusty resource
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.
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:
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.
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.
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.
With the sitemap in place, we then created detailed wireframes for the screens and interactions that made up the user flow.
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
Copyright © 2017