Landing Site Design

Produced a responsive design for a content writing service’s landing site.

The hero section of Jenni's landing page.

Overview

Client: Altum, Inc. (Startup)

Summary

Jenni, Altum’s content writing service, needed a new landing page that reflected Altum’s changing business models and focuses.

Roles

UX Designer, UI Designer, User Researcher

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:

Define. Defining our users and the MVP design.
Ideate. Ideating on design possibilities.
Test. Testing pre-release ideations.
Observe. Observing post-release outcomes.

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

A testimonial carousel displaying quotes from our satisfied clients.

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 redesign.

An AI toolkit page for showcasing our new SaaS approach.

Wireframes for a Jenni AI landing page redesign. — A mixed-fidelity wireframe of the desktop layout for a page announcing the SaaS transition.

Landing page redesigns that updated the visual design and incorporated additional graphics.

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 pricing page that goes into more detail about Jenni’s plans without clogging up the main landing page.

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.

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

Desktop layout of Jenni's landing page on Webflow. — Iterating on the Webflow landing site layout from start to finish.

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

Two pages, one on the left with a grid of blog posts, one on the right showing blog post content. — The main blog page and an example blog post.

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

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

A login/signup page redesign allowing existing users to login to their accounts and new ones to sign up to make new accounts and/or submit applications (writers and editors).

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.

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

Test

Our main testing methods included:

User testing to gain a qualitative perspective on the effectiveness of intended landing site design changes.
A/B testing using Crazy Egg, a service that records and highlights user interactions.

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.