The goal of this project was to re-imagine and innovate on the Hoover’s Product – a Sales & Marketing application. This was a very large project. I worked with another UX Designer using a divide and conquer strategy. I designed 80+ screens surrounding: User Type flow, Marketing Home Page, Registration flow, Smart Wizard flow, Dashboard flow, Build a List Tool, Analyzer Tool, Upload a File workflow, Download a File workflow, My Files workflow, Company Factsheet, and last but not least the Application Shell Experience.

This application is not live yet. For this reason, I briefly touch on only a few thoughts and samples of my work. If you’d like a sweeping walk-through of all my designs and contributions, please reach out to me.

Key players included:

  • VP Emerging S&Ms Product
  • Product Director
  • Product Manager
  • UI / UX Designer

Fundamental steps included:

  • Kicked-off the project with a 2 day Human Centered Design workshop
  • Participated in several Design Sprints
  • Ran Usability Tests to collect feedback and validate ideas
  • Once a clear direction was defined, I moved into granular page designs

Throughout all steps – I’m collaborating, brainstorming, reviewing designs, and gathering feedback from stakeholders / cross-functional team members.

  • Pencil & Paper
  • Photoshop (wireframes & user interface designs)
  • Usertesting.com (usability testing)

My Role & Contributions

  • UI / UX Designer
  • Information Architecture
  • User Interface Design
  • Interaction Design
  • Usability Testing
  • Interactive Prototype  (Password Required)

Establishing User Types

We designed this application using a “freemium model” (freemium is a pricing strategy by which a product is provided free of charge, but money premium is charged for proprietary features and functionality). User Types was one of the 1st items that needed to be established. In the end, we landed on 4: free user, free registered user, paid user,and paid admin user.

Next was determining workflows and global navigation for each user type. For instance, the free user lands on a home page to learn about the product and play with the tools. While registered, paid, and admin users land on a personalized dashboard. Dashboard 1st timers are given a smart wizard that allows them to setup and personalize their dashboard interface.

Low-Fidelity Wireframes

Global Navigation & Interactive States

Creating Component Variations

We architected the application so that Registered and Paid customers land on a personalized dashboard after signing in. The dashboard surfaces insights and recommendations based on user activity, most recent saved workflows, and user configured event / trigger notifications. Below are examples of different ideas I had on how we could display the Hot Leads dashboard panel.

Hot Leads allows the user to set event / trigger notifications related to a company or person. These low-fidelity and minimal effort designs helped the team have conversations around: which data points to display, in what order, in what type of layout, are sort and filter options needed, amount to display on the dashboard, etc… Ultimately helping us determine the most valuable experience.

Conducting Usability Tests

I conducted a usability test to validate assumptions surrounding the information architecture, layout, content, and visuals for the applications: frame / shell, lead builder landing page, and add additional filters component. I ran this test on UserTesting with 4 participants.

Check out the sample below or take a look at the in-depth Test Details Document I put together. Doc includes details around: User demographics requested for this test, types of questions asked, ultimate findings, and my suggestions to the team.

Crafting the Dashboard

The 1st step was defining the grid system. Grid systems are used for creating page layouts through a series of rows and columns. We used Bootstrap’s grid system – A responsive, mobile 1st fluid grid that scales up to 12 columns.

Below are the dashboard interfaces. These particular designs are examples of an actively engaged / diligent users dashboard experience. Here you can see the grid system in use and how it helped me to create a consistent look and feel.

Grid & Page Layout

User Interface Design

User Interface with Hover States