february - october 2019
full time @ BondLink, a startup in Boston at the intersection of finance, civil, and government tech
Investment research for muni bonds is tedious and expensive. There are many platforms for investors. However, most are not very user-friendly, overloaded with quantitative data of numbers and statistics in compact tables, and/or cost up to $24k/yearly.
To truly deliver on our “more Investor traffic to your bond sales” value proposition to Issuers, BondLink must cultivate an active and diverse ecosystem of municipal bond Investors.
We will cultivate a greater and more consistent share of Investor attention by giving Investors:
The municipal bond industry is convoluted, with antiquated processes and methods, resulting in inefficiency worth an estimated ~$3 billion in annual waste. This cost burden falls on the issuers, which in turn falls on the issuers' communities and constituencies via underfunded infrastructure and/or higher taxes for citizens.
An intuitive product suite with features and functionality that streamlines the process of muni bond issuance, and provides standalone value to the primary participants in that process.
When I arrived at BondLink, the product offerings were strong, but the features and designs were rudimentary. I was the second designer to be hired for the company, and our main focus for the first couple years was to redesign and beef up the two products BondLink already had: Issuer Sites and Investor Portal.
I led the charge for the Investor Portal.
"Investor" is the broadest category, and the reason why I use it frequently as a catchall. The people who use the Investor Portal include analysts, researchers, portfolio managers, wealth managers, and other buy-side market participants. Additionally, "Investors" may include some sell-side participants, such as bankers, advisors, underwriters who utilize the Investor Portal in ways the buy-side doesn't.
This product would be an enhancement of the current offering. We had just finished redesigning multiple parts of the business:
The design needed to leverage as many existing front-end components as possible and follow the visual design patterns of those new digital properties.
BondLink's main user group is Issuers, and our main value proposition is “more Investor traffic to your bond sales.” To do this, we must cultivate an active and diverse ecosystem of municipal bond Investors on our platform.
BondLink already had an Investor Portal that was a single landing page with a place to manage saved documents and notifications. The UX was terrible, and the features were the absolute minimum.
Infrastructure wise, this product would be connected to the other products, sharing the same database information and allowing users with the appropriate permissions to seamlessly navigate, but still live in its own system.
As a user, I need to be able to...
As a credit analyst at a major bank, I'm a regular Investor for a handful of Issuers. I need to surveil the Issuers behind my investments on a frequent basis in a way that is not time-consuming and cumbersome, so that I can make informed decisions when investing.
As a research analyst at a wealth management and financial planning firm, I work with portfolio managers to give clients customized planning and investment solutions. I need to quickly discover the most active Issuers with up-to-date information, so that we can identify new credits we've never evaluated.
As a portfolio manager at an investment bank and financial services company, I have multiple analysts on my team to do the thorough research. However, I still need to monitor my credits' activities at a high level, so I can keep tabs on my investments without the need to wade through all the other financial platforms to piece together a general overview.
As I mentioned, the Investor Portal as it stood was extremely bare bones, and if you looked at the user stats, you could even describe it as useless or abandoned. People would've rather gone to the Issuer Sites as anonymous visitors than create an account for the Investor Portal. Our product director came up with the above feature requirements and told me to run wild. Before I began putting pencil to paper, fingertip to trackpad, I needed to group the requirements into themes, find those themes' products, and look at how those products worked.
Trading platforms are all different, and yet all the same. They all have a "dashboard" or landing page of some sort with an overview of current holdings and provide ways for investors and traders to surveil their current assets and discover new financial instruments. That made them a good place to start for research.
The Investor Portal is a standalone product that talks to and interacts with our other products. We are building a BondLink ecosystem, one that is active with content, communication, and market updates, different from other financial platforms in the market. For research and inspiration, I looked at the most bustling, active--maybe even chaotic--platforms the world has ever seen: social media.
Finally, I looked at other big platforms in the muni industry: MSRB EMMA, Diver, IPREO/IHS, BondclIQ, and now-defunct Neighborly.
The Investor Portal had a very simple structure. A user logged in and landed on My BondLink. From there, they could go to four pages: Saved Documents, Notifications, Manage Subscriptions, and Account Settings. Each page had one feature (described in the dark boxes below).
We thought we would be able to fit the requirements on one page. We quickly figured out that would be impossible with the new concepts we wanted to introduce:
Bookmarking was a new concept. Its predecessor, subscriptions/notifications, was confusing and messy. We called it different things in different places, and it wasn't clear what being "subscribed" meant. Subscriptions were simply email updates, which we called "notifications," about an Issuer. If the Issuer updated their site, uploaded a document, issued a bond, etc., a subscriber would receive an email.
We decided to rename the concept to "Bookmarks" and add new capabilities. One of the new features from our redesigns of the Issuer Sites was the ability to "bookmark" individual bond issuance without having to bookmark the Issuer who issued it.
Since the original Investor Portal launched, we formed data partnerships that allowed us to build a hub of muni market news and statistics. We were in the process of building out that hub, called Market Insights, and though it wouldn't be available by the time of launch, we would still plan to add it later.
The first multi-page sitemap would have the Investor Portal live in the Issuer Portal under My BondLink but all the pages would be on the same level in the hierarchy.
After a few rounds of feedback with internal and external stakeholders, we tweaked the portal's structure and made some sacrifices for the MVP of the redesign. The Market Insights page still needed work and wouldn't be ready in time to launch. As a compromise, we would implement the lower priority pages for phase 2, and in the meantime, link to the older pages for now.
The white boxes are the pages we planned to launch for this phase. The lighter green boxes are pages either in progress or still part of the old portal to be moved over after launch: Market Insights, Account Settings, Help/FAQ, and Notifications. The darker green boxes are descriptions of the pages.
We did rounds of rapid iterations. The Dashboard was the most important part of the whole Investor Portal and where we spent the most time.
This would be the most important part of the portal, and we had to decide what the purpose of the Dashboard would be.
What part of what we offer is the most important to investors to put it front and center?
To help you make sense of my nonsense photos, I wrote a bunch of ideas down on a napkin and then transferred them to my sketch file by writing them over a photo of the Dashboard whiteboard sketch from the brainstorm session. I wanted to incorporate:
Before we started work, we assumed that the Investor Portal could be a one page app. We quickly realized that couldn't happen.
The first Investor Portal lacked color and engaging visuals, so we wanted to make sure that changed. The Issuer Portal was also being redesigned, and that had light colors. We experimented with both dark mode and light mode. Each example is the same components rearranged in the layout.
There were a few components we created that we knew we wanted on the Dashboard:
Everything that had a link would either open an external link or a modal or overlay.
It was obvious we needed to split up the content to let the Portal breathe. There were too many sections that would need pagination, too many possibilities for cluttering and performance issues. We moved to a multi-page solution.
.png)
Dark mode was axed. Before designing the rest of the portal, we needed to lock down the visuals. Color was a significant aspect of the redesign--but how? Though adding color is a huge improvement alone, we realized imagery would've been a nice add, so we took a look at the components to tweak, such as IOCs.
After deciding on light mode, we needed to determine the right accent colors. I went through our different company colors.
I used the good ol' find + replace Sketch function to see what a range of color palettes would look like. It became clear that some colors would make the Portal look very distracting at best, and completely inaccessible at worst.
On our corporate site, we use "BondLink Blue" #007fad as our primary color for things like links and borders. We use "BondLink Green" for accents and any secondary colors, however, we needed a darker color that looked better on web, so BondLink Teal #15625e was born.
At that point, this was called Your Issuers. It was a page that showed you the activity of all BondLink Issuers, with filters to be able to dig into the data, and a section of baseball cards from your bookmarked Issuers.
The two sections of the page could be teeming with content, requiring pagination or continuous/endless scroll. The first artboard is the regular state, second is the first exploration of filters, third is the second exploration of filters, and the fourth is the state with filtered results.
The first exploration filtered down to specific months and years using drop downs, and the second filtered down to quarters using checkboxes. Both had search boxes.
We were so close! But there were some things we needed to fix.
Most importantly, the concept of the page did not feel right. The two sections not only felt incongruent, but also they took up too much space on the same page, with the pagination for only Issuer Activity section and not the Bookmarks causing performance and implementation issues. Putting the Bookmarks at the top of the page and having it be static was a possibility, but if a user had more than 3 - 6 bookmarked Issuers, it became unwieldy.
The Bond Sale Calendar already existed on our corporate site, but with just a handful fewer features that we were incorporating in the portal behind a login. On the corporate site, users can see the highest level details, and if they click on the "view" link, they will go to that Issuer's site. The second row highlighted in blue is the hover state.
We experimented with colored cards on a pure white background, even though our standard was #f8f8f8 background. We put a star to make Bookmarked bond sales stand out.
There were 3 changes this iteration.
The layout slightly changed. Before determining to just take out the bookmarked Issuers, we experimented with putting the Issuer discovery search component in the middle of the two sections to break up the content.
It just didn't work. So we took it out, leaving only the activity feed and renamed the page Issuer Feed.
Though this probably should've been obvious from the start, we decided that the header section on the Dashboard can be the same on all pages, just with relevant copy for the subtitle.
The filters on the side made a lot more sense. Though there was a filter that allowed the user to see only bookmarked Issuers, we still needed a way to indicate that status on the update card. This iteration used text tags.
Though new cards were a bad choice, we still tried a card-based treatment for the bond sale calendar because the rest of the Portal used cards. The bookmarked bond sale within the calendar treatment was... all over the place.
It didn't make sense to deviate from our design system and create a new component for cards, nor did it make sense to introduce a page with a pure white background when we didn't use that color anywhere else. If content is king, consistency is queen.
Additionally, each bond sale listing needed to have the capacity to include:
The way we could do that was through a table. This page was a list of all upcoming issuances from BondLink Issuers, meaning it could be very long. So we encountered the same exact conflict we faced when showing bookmarked bond sales on the Dashboard, but in the opposite scenario. On the Dashboard, there would be a few bond sales in the section. On the Bond Sale Calendar, there would be a multitude. When trying to display many items with a lot of different data points, then a table is the smarter choice.
Flip through the slides to see each page in full, then read the breakdown behind those designs below.
If you remember, we had to decide what the Dashboard's purpose was--discovery, surveillance, personal activity, or market analysis. We decided to make it an overview of the whole platform's features, emphasis on Bookmarked content, with direct links to the rest of the platform.
The top section Your Issuers had two tabs, Recently Viewed and Bookmarked. Recently Viewed refreshes the user of their last visit to the platform by showing them the last three Issuers they were looking at via their Issuer Overview Cards (IOC). Bookmarked shows them the IOC of their bookmarked Issuers.
The second section Bookmarked Bond Sales has three tabs, Active, Recent, and Unscheduled. Each bond sale in this section is one that the user bookmarked. Active has cards with the information for issuances that are coming up or currently happening. Recent is bond sales from the last quarter. Unscheduled is bond sales without a set date.
The third and last section on Dashboard is Bookmarked Issuers' Activity. It was a timeline of BondLink-related activity from all the Issuers that the user bookmarked. The timeline is organized chronologically from the most recent activity to the oldest up to 10 updates, then at the bottom is a button that links to the Issuer Feed page.
The Issuer Feed is a page that I took inspiration from Twitter and e-commerce. The page can be dissected into two interdependent parts, content and its filters.
The content is broken down by activity type. The design is a more fleshed out version of the timeline on the Dashboard. There is still a line to denote continuity, to show that even though these are different Issuers, they're all part of the BondLink ecosystem and there is value being a part of it. Each update has its own card with the details and a link to the Issuer's site, and an icon on the line that shows what type of activity it is.
The white icon stands out to give attention to new BondLink Issuers. Those icons accompany the cards that host the content of the updates. Inside the card, we put the date and time, text description of the actual activity (e.g., Issuer A uploaded 3 documents, Issuer B added a new project, etc.), and a bookmark icon with functionality to bookmark/unbookmark the Issuer. The cards are set up with progressive disclosure, using accordions to hide the specific details of the activity for a couple of reasons.
The filters included the ability to search, choose the time frame of activity, choose the activity type, and toggle between all Issuers and just bookmarked Issuers. We also added a toggle to allow users to conveniently expand and collapse all the cards to open the accordions or close them at once.
.png)
Though we wanted to differentiate the calendar behind the login in the Investor Portal from the corp site's, we took some of the same styling. We kept it in a table. The calendar in the Investor Portal is very similar to the corporate site one. It has additional features: ability to download related documents, see the roadshow, and bookmark the sale. Additionally, to give the users' bookmarked sales a little extra emphasis, I added the Issuers' seals next to their bolded name.
