Ux/Ui Design

Sales Property Page

June 2018

The Project

I was recently tasked with solving a problem for our sales staff. We have a sales team that currently uses BASE CRM, and although it does a great job, the sales staff didn't have the features or information needed when they made their sales calls. They regularly found themselves jumping from BASE CRM to our database, all while being on a sales call with a client. We wanted to create a Sales Property Page (SPP) for our sales staff so they could have all the resources necessary when making sales calls. The goal was to give our sales team access to all the vital information needed.

sketches

After our product kickoff meeting and I've completed the competitive analysis, I move onto sketching. I find that sketching allows me a multitude of ideas and iterations before settling on one. I find sketching provides these three significant benefits:

  • 1. Generate Ideas

    Sketching offers an opportunity to brainstorm - it supports a fast-fail approach and it quick, easy and cheap. As long as you have paper and pencils, you can ideate on ideas.

  • 2. Visualize Ideas

    Sometimes you may think that you don’t need to sketch because you already have a clear idea of how you want to build something. However, in practice, it’s tough to create something when ideas are locked in your head. Only by visualizing ideas will you be able to understand how something should look or work in detail.

  • 3. Faster Iterations

    Sketching allows you to iterate on your design quickly. Even when you have a high-fidelity prototype, it can be faster to validate new ideas through sketches before you have to make those changes to your digital prototype.

Early Sketching Concepts

Early Sketching Concepts

wireframes

This stage of the UX process is all about ideas, iterating and testing our hypothesis. Sketching is a quick, functional and low-cost way to test our hypothesis. It allows us to make changes quickly, test our theory and get feedback.

We are in the stage of breaking eggs, flushing out ideas and building off of those ideas. Once we feel comfortable with a sketch, we can move to a low-fidelity prototype. Low-fidelity prototypes allow us to create a straightforward interface to test.

Black and White Wireframes

Low Fidelity Wireframes

High-Fidelity Mockup

Once we feel the prototypes are in the right place. We are now ready to begin the design. I like to start by creating a mood board. I use InVisions mood board feature. The mood board allows me to develop ideas for images, UI elements, and colors. If we are building a shopping cart, I like to research shopping carts and add that to my mood board as a reference or idea.

High Fidelity Mockup

Final High Fidelity Mockups


Previous Case Study Next Case Study