Saas.hpe.com Pricing PagesVisual & Interaction Design

Pricing Page - After months of analyzing our current page and exploring new options, this is the final design I created for our pricing pages. Each page features package listings at the top with highlights of each package below, as well as the base price. The pages also have a comparison table and frequently asked questions. Configurator - If the user hits "Build Package" below any package, the configurator will open up where they can select build the package to their desired specifications by answering certain questions (ie, how many users, what type of subscription). A summary on the right shows them their total price, and from here they can go to checkout. Pricing page, mobile - The page changes in mobile version, and the packages stack on top of each other. Configurator, mobile - The mobile version of the configurator stacks, but otherwise doesn't change much. Pricing Prototype - This is a mockup of one of the wireframes we had prototyped to test with usertesting.com Configurator Prototype - This is a mockup of one of the configurators we had prototyped to test. Explorations - As part of my exploration, I looked into the details of each of the possible input tools we used in our configurator to consider their need of use, use cases, and other parts about them. This is one document showing some of my explorations. At this point, I was looking into visuals.

Project Goal

Explore the existing pricing pages on SaaS.HP.com and improve their usability and design.

Tools

HTML5, CSS3/SASS, Adobe Photoshop & Illustrator

Project Overview

Over the course of several months, I took the time to redesign our pricing pages for our products. Each page consists of several package offerings and a "configurator" for each package before checkout. Over the course of the project I evaluated our current pages, made assumptions and hypotheses about what could be improved, designed variations that tested these hypotheses and ran user tests on prototypes.

Team

I worked as the sole designer on the project, with frequent reviews with my team and manager for feedback and to narrow down a direction. I worked with a prototyping team who built the pages I tested.