top of page
SOMAmetrics Intelligent Prospecting (SIP)
Designing a B2B platform to ramp up new sales hires
PROJECT
SOMAmetrics Intelligent Prospecting
COMPANY
SOMAmetrics
DURATION
TOOLS
Figma • Bubble.io • HTML • CSS • JavaScript
WHAT I DID
Hand Sketches • High Fidelity Wire-frames • Prototypes • UI/UX Design • Front-End Development • User Stories • Task Flows
9 months; February 2023 - October 2023
ROLE
TEAM
UI/UX Designer and Front-End Developer
Amruta Bhavsar, Alex Brown, Alicia Assefa, Eskinder Assefa (supervisor)
PROBLEM STATEMENT
How Might We help new sales hires elevate their performance and receive more guidance from their higher-ups?
OVERVIEW
New SDRs who would otherwise take 4.5 months on average to ramp up can do so in 2 weeks with SIP's resources.
From February to October 2023, I was a UX Designer with the Berkeley-based company SOMAmetrics. The main project I worked on is the SIP platform, for which I directed and defined a visually compelling design direction through research, design, and prototyping efforts. Additionally, I've been building out the front-end of this SaaS web-application by incorporating knowledge of HTML, CSS, and JavaScript in Bubble.io.
IDEATION
What makes a successful B2B sales platform?
Before I began working on this product, my supervisor outlined the requirements and workflow he envisioned SDRs (sales development representatives) would need. Because SOMAmetrics is a company that seeks to aid in elevating the sales of other firms, the main goal of this product was to create a system which quickly ramped up new sales hires and maximized productivity. Keeping in mind the different features and pages my team wanted to include, I looked into different design directions and created a moodboard of inspiration.
Moodboard for SIP
Considering the needs of SOMAmetrics' clients led me to choosing a simple, minimalistic color palette and page architecture. As this would be a tool for professionals, I knew it would be easier to sell if it had a standard, but elevated, workplace feel. With a few ideas in mind, I moved to creating sketches of the SIP dashboard home.
The features I was told to highlight were GOSPA metrics (total accrued sales pipeline and meetings set) as well as ongoing campaigns and announcements, so below are a few different variations of a dashboard screen with those components.
Sketch 1
Sketch 2
MAIN PLATFORM PAGES
Transforming the skeleton
It was time to solidify some ideas and I had enough at this point to define a design style that looked clean and professional. Using the old version of the product as a skeleton and the user research the company had already conducted as guidelines, I updated and enhanced the existing SIP features in a Figma prototype. Each week, I presented my concepts and got feedback on usability, stylistic choices, and the workflows I envisioned.
Dashboard / Home: Graphs and easy access to new announcements
Older version of SIP
Based on the feedback I received on the sketches, I picked out the elements that were most visually-compelling and useful to include, which included sections for a pipeline graph, meetings progress, and announcements. The dashboard needed to convey information relevant to SDR progress as a reminder and motivator.
The pipeline and announcements would be fairly straightforward to depict visually but I experimented a bit with the meetings. I thought about ways the orange of the SIP logo could be incorporated but eventually decided it would work better in certain buttons and other interactive elements than sporadically appearing throughout the platform. Additionally, since meetings set would always be a whole number, I experimented with using dashes corresponding to the number of required meetings. With larger companies setting many more meetings, the number of dashes could get lost and not convey the information they way I intended them to.
Meetings panel with color differences; Figma
Meetings panel with dashes; Figma
I decided against both of these concepts and kept it simple, which fit the personality of the platform better anyway.
SIP Dashboard Redesign; Figma
Progress Bar: A one-step method of viewing and updating KPIs
Another part of the design included a bar that would show up on each page as a smaller conveyor of the progress information. I started with a straightforward translation of the dashboard graphs by including a pipeline bar and the numbers of monthly and quarterly meetings on a bar that would sit at the bottom of the page.
Progress Bar V1; Figma
Through testing, we found that SDRs would need a way to update their daily and monthly KPIs quickly, and because a lot of these metrics connected to progress information, it made more sense to group them together within this bar. The graphic would have to go though, as it took up too much space and didn't add much more information. The next iteration included input areas for today's phone dials, this month's dials, key conversations, and set meetings, and this quarter's meetings, pipeline, and revenues. Additionally, the required quota and above-and-beyond quota is listed with a percentage of the SDR's progress as a reminder of their goals.
Progress Bar V2; Figma
This was a lot of information for the SDR to update regularly and viewing it all at once didn't achieve the desired emotion of motivation either. The next version of the bar cut down on the number of KPIs shown and changed "Today" to "This Week." Additionally, it was moved to the top of the page so it wouldn't become an afterthought.
Progress Bar V3; Figma
Products, Industries, and Personas: Reference pages and write-ups
A big part of the platform is its wealth of information. New SDRs can look up the specifics about products they're selling, the industry they're in, and the kinds of personas they will encounter on the phone. Knowledge of this information is valuable to have access to while selling. The format of these pages were fairly similar so I mostly experimented with different layouts.
On the products page, I tried two columns versus one column initially to make scanning the text easier. This didn't work when there was much larger pieces of text about the product that wouldn't cross over into the right column, leaving it with tons of white space under the image, so I returned back to one column.
Product Page Two Columns; Figma
Product Page One Column; Figma
The industries page originally had overview, mega-trends, and key challenges sections. With how long each of these pages could get, I wanted to help the user avoid excessive scrolling so I implemented tabs that could be clicked through in the design. In a later version, we included an RSS feed because my team found it would be helpful to users to see latest news stories relating to each industry.
Industries Page; Figma
Industries Page with RSS Feed; Figma
On the personas page, we decided to add some more information, including a photo, LinkedIn profile, and tips panel. With regards to the photo, I had concerns about it reinforcing gender/racial biases about who can succeed at a certain career, but decided if approached with care and through the lens of diversity, could instead challenge stereotypes. I also experimented with a different tab visual style, but decided to go back to the original design because the subtle text and stroke change fit the visual system better.
Personas Page V1; Figma
Personas Page V2; Figma
Campaigns: Depicting the hierarchy of priority
The campaigns page of this platform is where all the announcements and campaigns can be found. I thought of a few ways to categorize them and created 4 columns in which users would be able to view basic information about the campaigns so they can easily find what they're looking for. Additionally, each campaign is tagged with a priority level so SDRs can see which ones require more attention. Expired or outdated campaigns would have a grey priority.
Campaigns Page; Figma
To view the full campaign, the user would click an item from one of the columns and it would open as a pop-up. There really wouldn't be a situation in which they would have to view multiple campaign details at the same time, so it made the most sense to my team to structure it like this.
Campaigns Pop-up; Figma
Tips: Writing, reviewing, and reading user-generated tips
The tips page is where the opportunity for user-generated content on the platform comes in. SDRs can type up tips they've learned and want to share. As a reward, I designed this so that the most useful tips will receive upvotes from other users and the person who shared will gain more reputation and visibility with respect to their insights.
I created 2 panels for this page: one for viewing tips and one for viewing statistics about them. Users can access all written tips in "All Tips" as well as their own under "My Tips" and switch between "Individual" and "Overview" tabs when viewing tip stats. In addition, the "Write a Tip" button would redirect them to a flow to write/submit a tip. Because tips can span across various industries and personas, I designed a dropdown from which multiple tags can be selected and show up as easily deletable chips to conserve space while preserving information.
CALL NAVIGATOR
SDRs make between 50-100 calls a day
One of the most important features within the SIP platform is the call navigator, which is a guide for SDRs to use as they make sales calls and encounter various situations on the phone. Its purpose is to make it easier for newer sales hires to have successful dials more quickly than navigating these calls on their own. By utilizing a script in conjunction with other helpful figures, the idea is for the SDR to click through each section, apply what is useful to the call, and be prepared to answer different kinds of questions or objections.
The older version shown to me was set up in a flow sequence where the SDR would go through a sequence of scripts as they made their calls. I used this information architecture as a frame for the updated version.
Older version of Call Navigator
Scripts: For SDRs still figuring out how to make their case
Most of the call navigator is scripts for SDRs to refer to as they make their sales dials. To make it clear which part of the text was something they could read off, I made the background of all speakable text blue. In addition, I added a vertical menu to the side of the window for easier navigation and a next button so users are able to quickly click through the sequence.
Call Navigator, Open the Call; Figma
On some pages there is more information the SDR can refer to that is not necessarily something they need to say on the call. Here is what that would look like along with the script:
Call Navigator, Value Prop; Figma
Accordion Menus: No more scrolling
I also made use of accordion menus for a couple pages. For sections that had lots of items with two components (question and answer, objection and handler, etc.), it made sense to use a UI component that allowed SDRs to quickly identify a subject and see the associated response within the platform. This also conserved space and makes the visual content more digestible.
Call Navigator, FAQ; Figma
Tabs: Find what you need efficiently
Other pages had multiple items that corresponded to more than two values. For these, I made use of a second vertical menu with respect to the items and tabs with respect to the values. Because the SDR would need to be able to quickly pick out bits of information from these pages, this formatting makes it so that they wouldn't have to squint at a wall of text, but could instead easily scan the tabs and menus to select exactly what they need for their call.
Call Navigator, Competitors; Figma
