CMS Landing Pages
A Design Project for AutoAnything
Executive Summary
This project enabled AutoAnything’s Internal Content Editorial Team to create responsive landing pages to feed customers into their e-Commerce site.
AutoAnything benefitted by increasing its organic traffic. End-users benefitted by having a seamless workflow in their shopping experience.
THE PROBLEM
Decrease in Organic Traffic
Upon investigation, it was found that the paid traffic side of things was active, but the organic traffic was losing traction. The traffic that was generated from the landing pages were decreasing, quickly.
The main e-Commerce site had been recently optimized for mobile, but the landing pages were not, due to the limitation of the CMS tool that was in place. It did not allow the Content Editors to generate pages that were optimized for viewing on mobile or tablet devices.
THE PROJECT
Timeline
2 months (2 week sprints)
Make of the Team
- Sr. User Experience Designer <—me
- Product Owner
- Sr. Marketing Channel Director
- Development Lead
- Sr. Software Engineer
- Content Editor Lead
- Business Analyst
My Role
I was the Sr. User Experience Designer on this project.
I led the cross-departmental communication to come up with the product strategy and gain approvals with all stakeholders along the way.
I was in charge of visual and interaction design and worked alongside the Sr. Software Engineer during the execution of development.
KEY GOALS
Increase Company's ROI
Optimize the company’s return on investment from their market spend.
Create a new CMS editor that generates responsive pages.
User-Friendly Workflow
Create a user-friendly workflow throughout their shopping experience. From discovery, cost comparison to purchasing.
THE PROCESS
Paper Prototyping
I started with paper-prototyping so that we could communicate our ideas quickly with each other.
Identify Key Requirements
Landing Pages:
We were able to identify and agree upon templatizing the landing pages based on what previously existed as well as what was going to be created in the future.
We decided on creating three types of pages, an “article,” a “list” style, and an “overview” template.
CMS Editor:
We agreed on requirements for the new editor by pairing down a wish list from all stakeholders.
We decided to make it WYSIWYG to reduce the ramp-up time of the staff creating these new pages.
We added the ability to toggle on or off many of the features as well as have a preview before the article gets pushed live.
LOW FIDELITY WIREFRAMES
Article Template
Low fidelity screens helped me to define the requirements from the stakeholders. This type of page was to be more copy heavy. It was geared more to text or telling a story.
1 - Hero Image
- The hero image will have a pre-determined gradient overlay that will be applied by default. This helped to ensure legibility of the HTML title and for accessibility considerations.
2 - Author & Social Share
- Author’s name to be displayed by default
- Social sharing icons to be shown by the author’s name
3 - Text
- Ability to enter text blocks in the main text area.
4 - Secondary Image/Video
- Ability to support a secondary responsive image or video.
List Template
This type of landing page was to be more image heavy, more of ‘suggested products’ grid that would link directly to the coordinating product page on the e-Commerce site. This page primarily used as a ‘top ten’ type of formatted list.
1 - Hero Image
- The hero image will have a pre-determined gradient overlay that will be applied by default. This helped to ensure legibility of the HTML title and for accessibility considerations.
2 - Author & Social Share
- Author’s name to be populated
- Social sharing icons to be shown by the author’s name
3 - Text
- Ability to enter text below the hero
4 - Grid Text
- Ability to number each grid text
- Subhead and short supporting text block
5 - Grid Image
- Product images inserted in the grid
Overview Page
The purpose of this page is to house the landing pages and present them as related articles off of the main AutoAnything site.
1 - Title and Intro Text
- The page title and support text will display at the top of the page.
2 - Article Hero Images/Headlines
- The hero images that have been assigned to each article will populate on this page in a thumbnail size.
- Each article image will be clickable and will take you to that corresponding article page.
- Article Titles will be displayed
3 - Load More Button
- The ability for the user to ‘load more’ titles.
HIGH FIDELITY WIREFRAMES
Overview Page
High fidelity wireframes helped me to get final sign-off on the agreed upon design and get it into production.
The high fidelity wireframes helped to communicate the layout changes/effects that happen on each viewport, not only for the stakeholders but the developers as well.
Article Template
My high fidelity wireframes were attached to each corresponding user story for the development and QA teams to reference during production.
List Page
The wireframes helped to communicate the layout differences across viewport sizes of the product grid section of this template.
OUTCOME
Responsive Landing Pages
Hundreds of responsive landing pages have been created, giving AutoAnything a stronger return on investment from their market spend.
Users can have a consistent and user-friendly workflow through their entire shopping experience.
We were able to deliver a stronger and more consistent shopping experience for the customers across their full journey from product discovery, to price comparison, to purchasing.
TAKEAWAYS
A WYSIWYG Editor
I worked along-side the Sr. Software engineer to come up with an easy to use WYSIWYG editor.
The internal content editorial team could use this editor to not only create new content but transform pre-existing (non-responsive) content into new responsive landing pages.
