Hopscotch Design System

A Sales application designed and built specifically for the Beanfield Sales team

🙋🏻‍♀️ My Role

I have been the sole product designer working on this product, performing UX research, usability tests, UI, and interaction design.

I was also acting product owner of this application for some time.

I started the discovery phase of this project in Jan 2021, this product has been maturing with new feature launches every sprint ever since.

📋 The Problem

Context

At Beanfield, we build most of the tools the employees use in house. Before the Sales App, the team had developed a sales tool that was used internally for over a decade. However, with the processes changing and the company growing, there was a need to upgrade the system.

User Needs

Sales people were confused about the state of their opportunities. Search feature was not usable, crucial information was missing or hard to find, duplicate leads were created daily, there was no way for the sales leader to track and forecast sales, the overall information architecture and UI design was difficult to navigate.

Business Goals

I worked closely with the VP of sales, CEO and COO along with sales leaders to understand the process they wanted the sales team to follow, and how the workflows and features of this product could help the sales team eliminate manual work so they have more time to bring more leads and make more sales.

🙋🏽‍♂️ The Users

Design Process

The first step of my user research was to sit down with a few sales reps with different experience levels and ask them questions about their daily work, interactions with the tools they use, their pain points and goals. I’d like to create personas for the users of my products to ensure everyone on the team is on the same page about who the users of our products are.

📐Selected Components

Navigation Drawer

Combo Box

Form

Live Search Results

Table

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.

🙇🏻‍♀️ Design Decisions

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

Visual Design
Most UI choices were made to follow the company’s design system which I created. When needed, we made additional components to tweaked the existing ones. The Hopscotch design system also covers everything accessibility related, including font size, color contract, clear tone of voice, etc.

🌿 Results and Reflections

Lessons Learned
Most of the challenges I faced during the design and development of the sales app was the value of clear and open communication with stakeholders. I worked with a small team of developers with limited number of resources. I learned how important it is to be clear about where we were in the process and trying to have a rough timeline is helpful for the stakeholders to manage their expectations. over communication is sometimes the best thing you can do as a product designer and owner.
Another lesson I learned was not getting attached to my designs. More often than not usability research shows that my initial ideas are not the final solution, and it’s okay to pivot.

Next Steps
I am currently working on the design phase of new features including Commission tracking and Order Submission Templates

Page updated

Google Sites

Report abuse