InvestEdge

AI that makes financial documents readable at a glance




Time
2 weeks classwork in group → 4 weeks of solo design

Class
Design of Artificial Intelligence Product and Services (05-317)
Later spun off into individual project

Skills
Visual + interaction design, prototyping, branding, 3D rendering


 
Problem: SEC-filed financial documents provide valuable insight into companies, but they’re hard to understand for everyone except the biggest investment firms.



Shown: 3 pages from NVIDIA’s 2022 annual 10-K filing. Imagine reading hundreds of these. For each company.



Opportunity: Use AI to bring only the most important information to investors.





Main app features



Home page feed


Users can read the latest and most critical news about their portfolio.

Reading an annual report


Annual reports are summarized into digestible insights for users to skim. In addition, users can dive into the original text in context.




Asking questions about a document


Users chat about insights from a document in a conversational UI.

Voice narration


For handsfree interactions, visual impairment, or anyone who just wants to listen.





Onboarding





Research

Designing for an emerging market of investors that do their research


$6B

Estimated size of portfolio management industry in the U.S.

115%

Increase in next year’s individual portfolio management time (source)

12M

Users of subreddits focused on individual stock picking

A recent Schwab study identifies a new cohort of investors after 2020 that are more sensitive to individual stocks and market volatility. Many of these investors carefully read about a company’s financial health and statements. Warren Buffett is famously known to read hundreds of pages of financial reports every day to learn more about his investments.




From conducting user research, I found that different investors had different categories that they paid more attention to than others. To serve these different kinds of investors, I create categories that each bit of information could be categorized and grouped into. 




Wireframe + information architecture


I grouped features into two main categories: browsing and reading. All features are found only one tap away from the home page.





Interaction & visual design

How I ended up on this design 


Iteration 1
When I was working with my team creating the initial concept, I started out with a techy feel, going for a visual direction for “people who want to use a bloomberg terminal”. This version of the product uses sentiment analysis, where AI would mark each statement as either positive or negative. 



Iteration 2
In my next iteration, I moved towards a more reliable-feeling, readable, less techy, and mobile-focused visual style. I drew inspiration from apps like Medium and Apple News to explore how reading content can be made for everyone.

I updated the visual style to use serifs, cool colors + cool greys, and a focus on comfort + readability. I wanted it to feel less “techy”, and more visually accessible to all investors. 

Previous mobile designs

Previous design system


Iteration 3
I made UI changes that improved upon human-AI interaction, chart visualization, information architecture, and accessibility. On top of that, I felt that the previous design looked serious and not friendly. To bring in more life into the product, I created a more cheerful and dynamic visual system.





UI decision example: how should I communicate article structure?



Single thread + scrubbing
Old design

This design had a couple problems:

  1. This only works with two levels of hierarchy, when in reality financial documents levels of subsections that can be multiple paragraphs each.
  2. It’s not clear to the user why the thread skips text. 
  3. Scrubbing through the document would mean that the section titles would move around to be read. It would also take a lot of precision to reach the right part.


Hierarchy + skip to section
New design

I looked at how other apps successfully display long hierarchal information. I took inspiration from Reddit’s comment section that faces a similar challenge.

In this version, each level of hierarchy is now communicated through indents and lines. Instead of skipping text, the app would show a more conventional summary of the text. At the top of the article and in the meatball menu, there’s now an option to open a seperate dropdown menu that lets you skip to a certain section. Combined with the chatbot feature, these clean up the reading experience.



Next steps and extension


There are a couple things to look into:
  1. A feature to compare different versions of annual 10-k filings. I think that it will be useful for investors to compare subtle changes in languages in things like corporate mission statements.
  2. Can we extend this to other things? 
  3. Improve wordmark + name
  4. Explore in-depth motion of some interactions, especially that of the reader.

For more AI-related projects, check out my AI college counselor client case study!