Case Study: Sales Order Entry Tool

The Challenge: Vivint SmartHome needed a consistent sales process

Paper Napkin Wire Frame

My Role on the Team:
Information Architecture (with developers)
Interaction Design (frequently reviewed with the team and stakeholders)
Usability (continuous testing)
Visual Design (also defined a style guide for apps like this)
Prototype Engineering (HTML, CSS, JavaScript)
UX Research, User Interviews, Wire Frames, Front-End Development

Summary: Throughout Vivint SmartHome, there are over a dozen sales organizations. For example, National Inside Sales, the Summer Sales Door-to-Door Program, customer support representatives, field services, installers, and retail sales & channel partners. And everybody does it just a little differently. Needless to say, that caused confusion (and even some legal problems in some cases).

Who would be using the web application?

Time to meet with actual people who would be using this app. Since most of the people who would be using this sales-and-order-entry tool were primarily employees, who were involved in the sales process, it was simply a matter of identifying all the sales organizations throughout the company. Once I had that information, I was able to set up interviews with key employees who were identified by the managers of those organizations.

As I created Personas, I refined them throughout the design & development process. I also discovered additional people who would be using the app, and their needs were just different enough to warrant new personas.

Personas help focus on building the right thing and building it right

Personas helped to create understanding and empathy with the end users.

Finding Consensus and Coming up with a Plan

After meeting with the stakeholders, conducting field research and user interviews, I decided to take a very simple step-by-step approach for the sales and ordering process. Instead of using an extremely long web form that was used by one sales organizations but was no longer being maintained, the step-by-step approach allowed me to keep specific information clean and clear to the end user. With this approach, a new client could get signed up within a matter of minutes (provided they had all the information ready, passed the credit check and knew what they wanted). Business rules were much easier to implement, because we were only dealing with one "screen" at a time. Underneath it all, we maintained security and collaborated heavily with the Salesforce Team, to get information safely to and from the Salesforce database. Frequent reviews of best practices took place throughout development.

The 6-step approach to starting and wrapping up a sale

The 6-step approach to starting and wrapping up a sale

How did I choose my UX Design Approach?

As a UX Designer, there are various approaches available to design the user experience.
It depends on the type of product that gets designed and created. A corporate web site and a banking app require different approaches when it comes to information architecture, interaction design, usability, visual design and so forth. If I design for an existing product or service, I use a different approach than when I get to start working on something new from scratch.

However, for the most part, I like to apply the concept of "design thinking" – which has triggered a number of related UX design processes. In a nutshell, the basic steps of "design thinking" look like this:

Design Thinking Steps

More about Design Thinking

Every step in this process consists of multiple key phases, as well as a number of deliverables – which should fall in line with the development life cycle and provide useful information rather than just "additional documentation." For example, In this particular situation, a very important document for the rest of the team was the Customer Journey Map. (Sometimes, this is also referred to as the work flow document or goes by other names.) This document gave the team a clear idea of where to start, what information to gather along the process and knowing when everything is complete.

There are, of course, many other deliverables throughout the design and development process, but before spending valuable time and energy, I would meet with team members and stakeholders to verify what was truly needed. In my experience, there is nothing more frustrating than creating documentation, charts and assets that nobody really wants or needs.

To sell this design approach, I consulted with all stakeholders, including my project manager and our developers. Then I worked on initial designs, using wire frames, and later on high-res designs. After the team and the stakeholders decided which direction suited them most, I began developing a fully functional prototype, using HTML, CSS and JavaScript (and some dummy data to mimic the contents of the database we were using).

I would set up usability testing with 5 to 8 people, in different organizations, to see whether the design and the business logic were easy to understand to potential users of the app. Typically, I would watch (and if possible record) what the test subject would do, while I had a fairly objective person act as the moderator. We would ask the test subjects to perform specific tasks, using the talk-out-loud protocol. We only provided some guidance or suggestions when a test subject felt stuck. Other than that, we would find out quickly what worked and what didn't.

Customer Contact Information

Gathering the information of the prospective client. Optimized for tablets.

Although it was a bit of a gamble and a first for the IT department, I designed and developed a fully functional prototype in HTML, CSS and JavaScript that could be sent to everyone by e-mail. Then it was just a matter of dragging the e-mail attachment into a web browser, and the in-progress prototype could be "experienced" in a web browser. This helped the recipients to experience the look-and-feel. Being able to enter text, clicking buttons and working with dummy data was much closer to a "real life" situation than just looking at visual proposals.

Product and Service Packages

Fully functional prototype to select the Security and Automation package. Additional items and services could be added on easily. Certain sales organizations had more options to get incentives and bonuses than others.

Highlights & Lessons Learned

What I particularly enjoyed throughout the duration of the project was the fact that I got to meet a lot of new people throughout Vivint and eventually had a list of Subject Matter Experts (SMEs) that were available to verify certain features, ranging from scheduling, to payment collection and cost calculations.

The "human factor" during the design and development phase is extremely important! Typically, there is not one person, who has all the answers. So, in my opinion, UX Designers need to be even more pro-active and outgoing to gather all of the information that needs to be included when designing a successful solution. For example, to get the exact pricing for all products and services, tax information and monthly installment rates, I had to reach out to three different people. Those three people were not on the same page, but I used the power of meetings with stakeholders, who were financially involved in a number of organizations, to get the three people to agree upon the numbers.

All financial aspects of the sale had to be fully transparent at all times

All financial aspects of the sale had to be fully transparent at all times.

Big Stakeholder & Big Data: Of course, dealing with several sales organizations (including supervisors, managers, directors and the VP of Sales) and a large inventory catalog, resulted in everyone wanting to leave their mark on this project. Sometimes, there were a couple of head-strong individuals who wanted specific features just for their sales organization. Others even wanted to change some features and available product packages completely. Tactfully, I explained that some of those features would have to wait until v2.0, because we were under deadline pressure. In some cases, we were able to set up the sales order entry tool for specific sales organizations, who required certain features that nobody else needed.

By and large, I frequently took the time to get to know the stakeholders, VPs, Directors and Managers personally. As a people person, and former journalist, I enjoyed being able to get people to talk. I would actually find out about new features, current issues and other things that at some point or another were used to make the app even more versatile and robust.

For example, without wanting to get too technical, some sales organizations had business rules that prevented them from selling a Doorbell Camera to customers. Other sales organizations were urged to sell as many Doorbell Cameras as possible. Getting the full and correct information about all products and services involved a lot of communication, in person, via e-mail and during meetings that I called myself. Sometimes, someone I talked to would casually mention something that would turn out to be a game changer, so to speak. For example, not everyone who was dealing with products and services was aware of the fact that Vivint actually sold four different colors of Deadbolt Door Locks – most people only knew about three of them.

Security and Automation equipment could be added on to specific packages

Security and Automation equipment could be added on to specific packages.

In conclusion, there were many more features and UX Design tasks that went into the creation of the Sales Order Entry Tool. However, in this brief case study, I simply wanted to highlight a few approaches and features that were important to the various sales organizations who were using this tool. In this project, I was able to do what I am most passionate about: present information in a meaningful and easy-to-understand fashion. Yes, I had to deal with potential errors and then steer the end user back on track. But that's life: the happy path exists and so do several other paths. It is my job to anticipate as many situations as possibly, and I get to work with many other people, who have the necessary know-how. And in the end, it really is a team effort.

Note: After the Sales Order Entry Tool was released, Vivint's sales increased by roughly 60 percent. There were other factors at play, of course, such as several marketing campaigns, but I was proud to be told that the tool we had built had a lot to do with it.

Tools and Deliverables

Photoshop, Balsamiq, Invision, Illustrator, SublimeText, HTML, CSS, JavaScript, Google, StackOverflow

Structure Diagram and Page Types, Global Elements, Use Case Scenarios, Wire Frames, Key States, Usability Plans & Sessions, UX Research, Mock-ups, Style Guide, Assets, UI Component Library, Prototypes, UI Patterns