Envestnet

SaaS Dashboard Design
Dashboard overview

Overview

Overview

The Client

Envestnet, Inc. is a multi-billion dollar fintech company that develops and distributes wealth management technology and products to financial advisors and institutions. Their flagship product is an advisory platform that integrates the services and software used by financial advisors in wealth management.

The Challenge

Envestnet aimed to improve their legacy Proposal tool with their Next Generation Proposal tool to create an experience that is easy to use and delight users. This is a web application where an advisor can create a financial proposal to prospect clients.

The Process

I worked collaboratively with fellow designers, product managers, and developers in an agile development cycle. I rapidly prototyped designs in Figma using our design system and iterated based on feedback from stakeholders. I used project management tools such as Jira and Confluence to manage and track my design tasks and requirements.

Results

The Next Generation Proposal tool was launched to critical acclaim from financial advisors. It is now the go-to tool for advisors to create proposals for their clients.

Key Learnings
  • Collaboration is key: Working closely with stakeholders from different disciplines is essential to creating a successful product.
  • Iterate early and often: Getting feedback on designs early in the process helps to ensure that the product meets the needs of the users
  • Use a design system: A design system helps to create a consistent and cohesive user experience.
  • Use project management tools: Project management tools help to keep everyone on the same page and ensure that projects are completed on time and on budget.
Conclusion

I'm proud to have contributed to the Next Generation Proposal tool, a valuable resource for financial advisors that has improved the user experience for their clients. The lessons I learned from this experience will help me achieve similar results in the future.

Role

Product Designer, in collab with product managers, developers, and other designers

Programs Used
Figma logo
Figma
Jira logo
Jira
Confluence

New Progress Bar

New Progress Bar

I was tasked with designing a new progress bar for the Next Generation Proposal Tool. The goal was to create a progress bar that was both informative and easy to use. The progress bar needed to show users where they were in the process of creating a proposal and provide them with quick access to the tools they needed.

Solution

I designed a progress bar that is located at the top of the screen. The progress bar includes the following components:

  • Proposal name: The name of the proposal that the user is currently working on.
  • Proposal actions: A dropdown menu that allows the user to edit, copy, or delete the proposal.
  • View recent proposals: A link that allows the user to view a list of their recent proposals.
  • Steps in the tool: A horizontal bar that shows the user the steps involved in creating a proposal. The steps are color-coded to indicate their status (default, completed, or in progress).
Results

The new progress bar was a hit with users. It was easy to understand and use, and it helped them track their progress and complete tasks more efficiently. It also blended seamlessly with the existing user interface, thanks to its consistent design.

New progress bar

Import Holdings Project

Import Holdings Project

Button
Prototype

The Import Holdings Project Modal Popup is a feature in the Next Generation Proposal Tool that allows users to import accounts from Client Central. This feature is useful for advisors who want to create proposals for clients who already have accounts with Envestnet.

Challenge

The challenge was to design a modal popup that was both informative and easy to use. The popup needed to allow users to enter account numbers, search for accounts, and add accounts to their proposals. It also needed to be flexible enough to accommodate different scenarios, such as when no matches are found or when there are more than 10 accounts to choose from.

Solution

I designed a modal popup that includes the following components:

  • Account number field: A text field where users can enter an account number.
  • Search bar: A search bar where users can search for accounts by name or number.
  • Account list: A list of accounts that match the user's search criteria.
  • Add button: A button that allows users to add an account to their proposal.
  • Filters: Users can use filters to narrow down their search results.
Results

The Import Holdings Project Modal Popup has been well-received by users. They find it to be informative and easy to use. The popup helps users to quickly and easily add accounts to their proposals.

Key Learnings
  • When designing a modal popup, it is important to consider the needs of the users. What information do they need? What actions do they need to be able to perform?
  • Make sure that the modal popup is flexible enough to accommodate different scenarios. For example, you may need to consider what happens when the user enters an invalid account number or when there are no matches for the user's search query.
  • Use clear and concise language in the modal popup. Avoid using jargon or technical terms.
  • Use visual cues to help users understand the modal popup. For example, you can use color and iconography to indicate the different states of the popup.
Additional Notes
  • Multiple versions of the popup were created before the team decided on this version.
  • I also added annotations to the project to make it easier for developers to know how the popup functions.
1
Search account number text field
Input full or partial account number here
2
Search Icon button
Search for the account and bring up the search dropdown
3
Add button
Inputting full account number and selecting Add will add the account number below
4
Account #s
This is some text inside of a div block.
5
Dropdowns
Dropdowns to filter your search request
6
Import
Import account numbers that are queued up in the modal for upload
6
Import account button
Imported account button is now available for selection
Happy path: Search sequence workflow
Import Accounts - happy path 1Import Accounts - happy path 2Import Accounts - happy path 3Import Accounts - happy path 4Import Accounts - happy path 5Import Accounts - happy path 6Import Accounts - happy path 7
Advisor inputs account number into the search box and selects "Add"
Advisor inputs account number into the search box and selects "Add" - 1Advisor inputs account number into the search box and selects "Add" - 2Advisor inputs account number into the search box and selects "Add" - 3
Advisor inputs multiple account numbers into the search box and hits "Add"
Advisor inputs multiple account numbers into the search box and hits "Add" - 1Advisor inputs multiple account numbers into the search box and hits "Add" - 2
No matches found
no matches found
When a user selects reset from the search popup
When a user selects reset from the seach popup - 1When a user selects reset from the seach popup - 2
When a user searches without any filter text inputted
When a user searches without any filter text inputted - 1When a user searches without any filter text inputted - 2
Account removed from the list of added accounts
Import Accounts - account removedAccount removed from the list of added accounts - 2
A scroll bar appears once 10 or more accounts listed
A scroll bar appears once 10 or more accounts listed - 1A scroll bar appears once 10 or more accounts listed - 2

IP Exceptions Project

IP Exceptions Project

Button
Prototype

The IP Exceptions Project is a feature in the Next Generation Proposal Tool that allows users to add, remove, and edit Security Concentration exceptions. This feature is useful for advisors who want to create proposals for clients with specific needs, such as those who want to exclude certain securities from their portfolios.

Challenge

The challenge was to design a user flow that was both informative and easy to use. The user flow needed to show users how to add, remove, and edit Security Concentration exceptions. It also needed to be flexible enough to accommodate different scenarios, such as when the user tries to add a security that is not already in the portfolio.

Solution

I designed a user flow that includes the following steps:

  1. The user opens the Security Concentration popup on the Fees page.
  2. The user clicks the "Add Exception" button.
  3. The user selects the security that they want to exclude from their portfolio.
  4. The user clicks the "Add" button.
  5. The security is added to the list of exceptions.
  6. The user can repeat steps 3-5 to add additional exceptions.

To remove an exception, the user simply clicks the "Remove" button next to the exception that they want to remove.

To edit an exception, the user clicks the "Edit" button next to the exception that they want to edit. The user can then change the security or the reason for the exception.

Key Learnings
  • When designing a user flow, it is important to consider the needs of the users. What tasks do they need to be able to complete? How can you make it easy for them to follow the steps involved?
  • Make sure that the user flow is flexible enough to accommodate different scenarios. For example, you may need to consider what happens when the user tries to add a security that is not already in the portfolio.
  • Use visual cues to help team members follow the user flow. For example, you can use arrows and icons to indicate the different steps involved.
Security Concentration - Added
Security Concentration - Added 1Security Concentration - Added 2Security Concentration - Added 3Security Concentration - Edit 3
Security Concentration - Removed
Security Concentration - Removed 3Security Concentration - Removed 2Security Concentration - Removed 3
Security Concentration - Edit
Security Concentration - Edit 1Security Concentration - Edit 2Security Concentration - Edit 3