Skip to content

Landing Site Design

Posted on:November 14, 2023

The hero section of Jenni's landing page.

Table of contents

Open Table of contents

Overview

Summary

Roles

Background

Altum saw the need to add and alter content on the landing site to better reflect the Jenni writing service.

Goals

We hypothesized that making both simple iterative changes and major visual overhauls would result in an increase in conversions (# of accounts) and signups (# of payment info submissions).

Process

The steps of Altum’s design process are:

A graphic showing a loop around Define and Ideate. Test and Observe aren't looped.

The Altum design process.

Define

Our primary target users were SEO marketers and marketing agencies.

Screenshot of a Jenni customer's Facebook post with underlined text indicating underlying needs.

A Jenni user revealing some of the underlying needs for SEO marketers in a Facebook post he made to help share our promo offer.

Ideate

Older, unresponsive version of the customer testimonials carousel.

An example of the original testimonial carousel.

Screenshot of responsive designs for new customer testimonial carousel.

The testimonial carousel’s responsive layout redesign.

Wireframes for a Jenni AI landing page redesign.

A mixed-fidelity wireframe of the desktop layout for a page announcing the SaaS transition.

Older landing page layout for desktop with updated graphics. Thumbnail of an old Jenni AI landing page mobile layout.

An older redesign of the landing page. We updated image assets and included new sections.

A newer desktop layout for Jenni's pricing page.

Desktop layout for Jenni’s pricing page.

Older desktop and mobile layout for Jenni's pricing page.

Older mobile and desktop layout for Jenni's pricing page.

Desktop layout of Jenni's landing page on Webflow.

A Webflow migration that consolidated our landing site elements and let us include more visual appeal.

Two pages, one on the left with a grid of blog posts, one on the right showing blog post content.

A blog page both let clients read up on valuable content writing tips and helped jenni.ai rank on search engines.

Flowchart showing the logical sequence following a user navigating between pages.

A site structure flowchart that helped ensure proper navigation between the landing site and the login/signup page.

Modal with form for logging in and graphic.

A screenshot of the old login modal.

Simplified modal with form for logging in.

Login form on the separate app.jenni.ai site.

Marketing page layout for desktop.

Page for EasyRead that marketed its capabilities and hosted the tool’s actual interface.

Test

Our main testing methods included:

Screenshot showing results from an audit report.

Part of an audit report where I used CrazyEgg’s heatmap and confetti features to highlight areas with frequent user activity. I believed these areas took priority in the next redesign.

Observe

Based on our success metrics of an increase in conversions and an increase in signups, we found that altering the landing site resulted in more conversions and signups for certain changes.

Reflection

I learned that by making simple changes and keeping a good record of wireframes, UI elements, etc. one could provide meaningful impact for the business.