A case study in designing a complex web application
A tool for organizing and tracking your portfolio that would become integral in improving retention for every Motley Fool service.
The Motley Fool
1 Product Manager
1 Product Designer / Front End Coder (me)
2 Front-end Coders
4 Back-end Coders
Representatives from product, editorial and investing.
Product Design: Illustrator, Photoshop, Visio
Front-End Coding: HTML, SCSS/CSS, Bourbon framework, AngularJS
Product Management: Agile, Google Docs, Trello, Slack
Every week The Motley Fool is recommending new stocks to buy or sell or hold, but it was unclear how actively members were following the investing advice. The business wanted clarity if members were indeed purchasing the stocks that the company was recommending in its newsletter and online service, and which ones, and how soon after recommending.
The health of the investing advice business was directly connected to members taking action in a timely manner on the stocks recommendations, but the Fool did not have insight into if or how closely members portfolios match the advice provided.
Members had to track their stocks in their brokerages or on their own means through spreadsheets or other services. The Fool wanted to provide a tool so users could track their portfolios and in doing so could, anonymously, provide validity that the advice being presented was properly being acted on by the members.
I collaborated on the project strategy to understand the needs of the users and the business and designed the UX and the UI of this new application from the ground up. I led the team of designers and front-end developers to deliver the production-ready code that is live today. I also collaborated with the key stakeholders from Product, Investing, Tech and Marketing to socialize the value of the new tool and advocate for it to be as a featured tool integrated into every Motley Fool premium service.
User Research: What Members Want
Motley Fool had previously built a Watchlist tool that was on an antiquated system and needed to be folded into the new application. We started by reaching out to users of the Watchlist system to get a baseline of what features were key and were lacking and were table-stakes for not just watching but full-on tracking their portfolio performance going forward.
The user research uncovered that while members would be more likely to go directly to their brokerages for tracking, they often have accounts across multiple brokerages so there was an opportunity if it was possible to display and calculate the performance of complete portfolio.
Many of the most experienced investors had their own offline tracking approach they would prefer to maintain but would use the new application if it provided customizing and could make it easier to manage the data.
Members were split about the desire for the tool to sync up with their brokerages, some recognizing the convenience, but many still uneasy about the security.
Primary views they wanted to see was their performance overall but also individual performance today and related news to today’s top movers.
One of the Motley Fool’s primary tenants is that the individual investor can beat the market. So the members of our Premium Services wanted to know how they were performing against a benchmark like the S&P 500. A competitive analysis report we complied illustrated that it was indeed surprisingly rare to find performance versus benchmark for individual positions. We made this a tent-pole of the application.
User Experience Design: Standalone yet integrated
As the architecture of the application started to take shape it became clear that we had the opportunity to build a tool that could be all-encompassing. The application could pull in stock performance data, calculated a member’s portfolio performance, and pulled in latest news and articles all in one place, even to one dashboard. This provided a powerful new destination that could be integrated as a sub-section to the Motley Fool website and the premium service websites, but also could be its own destination and converted into a mobile application.
By integrating the new application into the Motley Fool systems, would provide opportunities to leverage pre-existing infrastructure for inputting and outputting the relevant information from Scorecards.
Inputs for adding a stock to the Scorecards system were integrated into the current Fool sites. Columns were added to stock tables and hover-state displaying over stocks listed in an article. In each case, a one-click experience could add that relevant stock to your Scorecards.
The primary output mechanism beyond the site itself was email. Having recently retired a daily stock news update, there was an opening for a new daily recap that was focused just on the stocks a user was following. By designing a system that would take the user, query their stocks, query and new content related to those stocks and send as an email we were able to have the convenience of the Scorecard customizable experience delivered to a members Inbox.
User Interface Design: A Flexible Application
The interface focused around customization. The members were provided the ability to import their Scorecards from a brokerage, a CSV or by hand.
The front page (after onboarding and importing) was a dashboard displaying overall performance vs benchmark prominently followed by a list of top movers for today and top news and advice related to those stocks.
The Scorecards pages allowed the user to create multiple Scorecards to mirror their brokerages accounts or align with different investing strategies. On each Scorecards, the user could set as a table and card views a select from robust list of data points to find the ones that matter most to them to match their way of investing. Each new member started by default with a Today view with columns highlighting a stocks daily performance and an Overall view with columns focusing on the portfolio size and position and performance vs the benchmark.
Not everything went according to plan.
- The first major issue was that despite whether users were up for the convenience of broker-sync or found the security concerning, the tech required was just daunting. The ability to successfully sync up with the provider we had (that was in the midst of being bought-out) proved prohibitively challenged to do effectively and the effort had to be shelved.
- Another unexpected complexity was that two audiences began to emerge and they didn’t like each other. There was a beginner user new to investing and interested in convenience and simplicity within the application, and then there was the advanced user looking for the complexity of knowing we provided all the bells and whistles in every other portfolio tracking application. These two were at odds and eventually led to splitting the application between Simple and Advanced Views
- Another limitation outside our control was getting back refined enough historical data to be able to automatically adjust for the nuances of investing such a dividends, splits, mergers, and the like. These features weren’t important t the Simple view user but were table-stakes for the Advanced View user and we were unable to provide them in a seamless way.
- Finally, one of the longer-term challenges was that the original archetects wanted to leverage the new Angular v1 code. Unfortunately the upgrade from Angular 1 to Angular 2 was exceptionally complicated and left the service pinned to v1 unable to get the prioritization to be upgraded. This led to less and less developers retaining the skills and knowledge to effectively continue to advance the application.
There were some great unintended wins
- The front-end interface framework and component library, Bourbon, became the primary design pattern that was scaled and cultivated and maintained for years to follow.
- Three of the interns brought on to work on this project were moved to full-time Fool developers and then into leadership positions at the company
- The Scorecards application was highly engaging. The dashboard quickly became of the the top five pages for every premium service it was integrated into.
- The new Scorecard email quickly became and maintains the distinction of the highest open rate for any Fool email.
The Motley Fool Scorecards application launched not as a standalone or as a mobile app, but as an integrated part of the premium service experience to about half a million members. The integration tools led to the addition of over 17,000 stocks into the Scorecard database, providing insight into how frequently members are taking The Motley Fool’s investing advice.
Not everything can make it into the release. Here were items on the roadmap for improving and evolving the Scorecard application.
- Make the Broker Sync work. It was complex and prohibitive, but the more users engaged manually with entering the data the clearer it has become this feature needs to be solved.
- Automate dividend and split adjustments. Similarly, the amount of upkeep put on the user to maintain the dividend and split adjustments is overwhelming. This should be provided to make the system automated and convenient.
- Develop methodology to request new stocks in the system. If a member owns a stock not in the library of stocks, they are unable to add it. There is not a means to request new stocks, not for the Fool necessarily to request the new stocks data.
- Add performance data to Scorecard emails. The Scorecard emails provide a detailed list of relevant articles for the stocks you watch, but doesn’t pull in closing price or a member’s total in the stock. These would help provide context as to the priority of reading each update for the member.
- Provide Scorecard Analysis. At the end of the day, the Scorecard system still requires the member to make sense of the data provided. Providing analytics on what this means and how well the member is performing could lead them to understanding what to do next.
- Convert to a mobile app. The Scorecard tool is a web-based applicatifon and robostly complete and contained. It was never transferred to an App Store based app despite that it is so well suited to be a standalone application.
A few key learnings that I took away from this project
- Having a feedback loop with the user is vital. The back-and-forth as the site is being designed and built out to understand what features matters, which do not, which are being executed in a useable way is essential.
- Working fast with the latest hotness can make maintenance a nightmare. Two big framework risks were taken with this project. While the Bourbon framework latest and became core code for years, the Angular code became forgotten making even the smallest bug fixes so much harder to complete.
- Collaboration is key. Engaging early and often with the representatives of Product, Marketing, Investing and DevOps was required communication to get everyone on the same page to produce such a new and complex application.