Spover
Sales tool to analyze sales data and help customers close more deals
About Project
Problem
Spover presented me a version of their product that needed significant UX/UI improvements. Besides a need to modernize their software platform, the Spover sales platform needed to allow for more customizability features to meet their growing number of customers and improve its usability to become more useful for users.
Solution
Improve the user interface of Spover to make it more modern and match the competition in the industry. Provide product strategy and vision in how to allow for more customizability for users in the correct contexts where inefficiencies are present.
Challenges
• Data Density: Finding the right balance between showing the crucial pieces of data, while not overwhelming the user with a flood of information.
• Learning the sales domain so that no crucial piece of information is removed at the expense of simplifying the design.
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Original Design
Modernized UI
Working within the constraints of brand guidelines, I modernized the user interface using subtle blues, lighter weight typography, and increased spacing to make it easier on the eyes.
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Ideating & Iteration: Collapsing and Expanding Groups
Users needed a usable and clear way to collapse groups because the table list becomes too long and requires a lot of scrolling, which makes it difficult to see the other accounts.
Note: Moved down 'Group By' button next to the '+Filter' button because it worked as a filter. This enhances usability by grouping filters together.
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Ideating Process for 'Group By' Filter
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Proposed multiple ideas for how to collapse and expand groups (i.e., Owner). I tried different variations with icons, icon positioning, different interactions to select a group, and different interactions to select the expand/collapse option.
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Final Design for 'Group By' Filter
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
After receiving user feedback from users, the general consensus was that the toggle switch component was the most clear for displaying a more granular view by expanding and collapsing 'detail rows'.
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Continuing to Focus on Customizability for Usability
Column Management
Users needed the ability to choose which columns to display by default, and to modify over time. This required the need for hiding and adding columns of their choice.
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Initial Idea
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Use 'Columns' Filter
Downside: This design is showing a '+6' in the filter pill to show that 6 other columns are selected. Used '+6' to save real estate, but the user is unable to see all the selected columns.
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Final Design for Column Management
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Default View - Includes '+' icon in last column to add columns
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Hide Column - By clicking column header of each column
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Show Column / Hide Column - Drawer opens up when selecting '+' icon
My team and I created and vetted the user journey flow for the Agent, who submits applications for the insured, and the Underwriter, who reviews the submitted application. Creating the user journey flow helped me holistically see the decision points and effects of each action taken:
Understand the triggers and actions each user takes
Identify the pre-requisites that need to be completed before the Agent or Underwriter may move to the next step
Identify and understand the 2nd order / 3rd order effects of actions taken by the Agent and how it affects the underwriter and vice-versa.
Results
• Positive feedback from users on the new design aesthetics.
• Made continuous improvements by receiving rapid feedback from users and iterating quickly.
• Increased usability and customizability for the Spover platform.
Filter by Assigned Underwriter
• Underwriters are able to filter tasks by
selecting an underwriter.