Sales App

Research

• I’d like to watch the users performs some of the tasks that have come up, with the current state of the art they have access to. This helps me understand where the opportunities of improvements really are.

Wirefraing and Proof of Concept

• Wire framing is a great tool to get some ideas down so I can share with them team what I think should be our immediate steps. I’d like to run some iterative sessions with my key stakeholders and a technical lead from my team, and go over some basic ideas, to ensure the focus sounds helpful to stakeholders, and the expectations in terms of technical achievements are appropriate.

• Once I have a good understanding of what to focus on for the the MVP, I define the scope of the project, and discuss it with stakeholders and my team.

• As soon as the scope of the MVP is defined, it’s time to start working on the nitty gritty interactions and high fid mockups. Of course the stakeholders are kept informed and consulted during this process.

Mockups

• My favourite part of the process is when the first iteration of high fid mockups are ready, so it’s time to make a real-life scenario prototype and test it with some users. I try to recruit users that have not been already consulted to make sure I get realistic results. During user testing, I look for qualitative data such as how the user reacts and whether they can intuitively understand the flow, and quantitative data like SUS scores, task completion time, and number of errors.

Key Features

• New Design System
  I designed a new design system for internal products we built at Beanfield, called Hopscotch. The Hopscotch design system is inspired by and built on top of Vuetify’s implementation of Material Design.

• Opportunity Page
  The new and improved opportunity page helps the sales rep and their leader know what exactly is going on with each opportunity.
  The concise but clear opportunity card shows the sales rep, client’s name, the estimated value of the opportunity, the categories of the services on the opportunity, and the state of the opportunity. The previous tool didn’t have a good way showing this information clearly.
  Sales reps can add one or more quotes to the opportunity, each with a unique category and address combo. Quotes could have multiple packages and term offerings for the customer to choose from. These delicate workflows were designed very carefully based on the feedback and experiences of sales reps and were thoroughly tested before the MVP version was approved.
  The communications card shows the entire timeline of emails, comments, and potential forms for the customer. The sales app is integrated with our email system, allowing the reps to link email communication to the opportunities and activities of each client.
  Follow ups allow the sales reps and their managers to easily create to-do items and add due dates to ensure the follow up gets completed. There are notifications designed to ensure the sales reps won’t miss follow ups that are due soon or overdue.

• Search and Advanced Search
  Live search allows the users to search for clients, opportunities, activities, and parent companies. For a more thorough search, users may hit enter to land on a search results page, showing all the search results matching the search term.
  The advanced search allows users to do more detailed searches and save them as a report. Advanced searches can also be shared with others and added to the sales dashboard for easier access.

Live Search Results

Advanced Search Page

• Linked Accounts
  Sometimes we have more than one client account under the same holding umbrella, and the sales app allows to add this parent-child relationship, so we can get more accurate reporting in revenue.

• Meeting Tracking
  The sales app is fully integrated with google calendar, allowing the sales reps and their managers to track the meetings they’re having with clients. Meetings are a great indicator of how the sales process is going and how successful the opportunity will be.

• Sales Dashboard
  The dashboard was specifically designed to show important KPIs at a glance, including quota, open opportunities, future forecasts, meetings, monthly revenue, etc.

• Pricing Browser
  The pricing browser shows all the available products based on the address of the clients, so sales reps can quote customers accurately with just a click.

• MyQuotes Page
  This page was designed to eliminate manual work for the sales reps communicating product offerings with customers. This page is created on a public URL, showing all the quotes added on the opportunity live, with timestamps. This makes back and forth between the sales rep and the client a breeze.

Information Architecture:

• Once the user logs into the Sales App, they land on the Dashboard.
  There is a search field on the dashboard that allows the users to search for leads, customers, opportunities, etc. This is the  main workflow for most of the users of the sales app, so I made this live search field look prominent.

• The main navigation of the sales app is through the left navigation drawer. This navigation drawer follows our design system and is always accessible throughout the entire user experience.
  This navigation drawer has 2 levels of entries, since some of the pages required to have children pages. The navigation drawer opens when the user hovers over it and stays open as long as the cursor does not leave the drawer.
  When the navigation drawer is closed, the users only see the level one parent pages icons, and when the navigation drawer is open, the users will see which parent/child page is selected. They can also interact with the navigation drawer and see the names of all the pages, and navigate to them by clicking on the page name.

• Tabs are used throughout the application to separate data and categorize flows  that were related but did not need to be visible at the same time

• Breadcrumbs are also used strategically throughout the application to help the users understand where they are, and offer a route back to where the user came from
  I used the “Entity type: Entity” when needed to clarify further to the user what each breadcrumb entails