Case Study

Second Funnel CMS

A CMS for configuring eCommerce landing pages

As part of my work with Second Funnel, I helped design a web-based CMS that provided a way for marketers to configure and deploy custom eCommerce pages without having to change the code on their site.

The landing page UX Second Funnel provided was already increasing conversion rates by up to 5x over conventional eCommerce pages. The CMS would help scale that success by automating and streamlining our page deployment workflow.

Role and team

As the designer on our team, I interviewed customers, produced user flows and a sitemap, wireframes, and high-fidelity designs

Customer interviews

I met with our customers to understand how they worked within their organizations and how our product would fit into their workflow Our primary user type was a Digital Marketing Manager. This person was responsible for configuring and launching the landing page.

diagram of different roles in an ecommerce organization

Workflows and tasks

I mapped out a workflow and defined tasks and subtasks We translated them into feature requirements, and tracked everything in a Google spreadsheet.

To configure a landing page, the user would have to perform three major tasks:

  1. Import Content
  2. Tag Content
  3. Arrange Content

diagram of different roles in an ecommerce organization

Sketches and prototypes

With the tasks and requirements in hand, I started sketching ideas for the UI From these early sketches we prototyped some key features. For example, we built a very basic interface for importing product data into our database that we used and tested internally.

mock up of bare bones interface

Sitemap and user flows

I defined the information architecture of the app and showed how a user would move through the application to complete tasks The sitemap shows the top-level navigation and the three flows that make up page configuration: importing, tagging, and arranging content.

diagram showing all pages in the app and how they are connected


I created wireframes for the major tasks of selecting templates, and importing, tagging, and arranging content

grayscale mockups of different pages in the app

Styles and components

I put together a style guide and component library which I used to design the rest of the screens in high-fidelity The wireframes helped me define a set of UI elements. From here, I created symbols in Sketch and applied a basic set of shared styles to get me started. To come up with the visual styling, I referenced our product objectives and our visual identity.

mock up of styles and ui elements making up the app


mock up of the app's dashbaord

Tile arrangement


I experimented with different interactions and discovered a way to streamline content management By showing controls on hover instead of in a side menu, users could edit and arrange content faster, with less friction.

gif showing the hover state of controls in the app

gif showing the hover state of controls in the app

screenshot of the code written to make the interactive prototype

More Work
  1. Avie Medical
    Case Study

    Avie Medical

    A web-based CRM tool for medical clinics

  2. Avie Patient Onboarding
    Case Study

    Avie Patient Onboarding

    An iPad app for patient onboarding

  3. Dynamic eCommerce Landing Pages
    Case Study

    Dynamic eCommerce Landing Pages

    Increasing conversion by 5x over convensional eCommerce pages