Creating an Investment Matching Platform: A User Centered Approach to Retail Investing
Role: Research, UX Design, UI Design
Project Scope: 10 days
Tools: Pen & paper, Figma
Challenge: Build a hi-fi prototype of an investment matching platform for our stakeholder to present to his investors
Background: For my final project at Ironhack, my partner Emma Hartwig and I collaborated with Marius Wilsch. His startup, Oasis, is building an investment matching platform for young professionals with little to no investing experience. We got to build a prototype for Marius and help his vision come to fruition. Marius communicated to us a few issues he wished to focus on:
- Showcasing digestible yet essential stock data
- Social media financial content (like SeekingAlpha)
- Tools for users to develop their personal investing style
- A brand identity for Oasis
After a bit of preliminary research to better understand these issues, Emma and I decided to devote our time to building:
- The Oasis onboarding
- A “stock swipe” feature, similar to Tinder
- A more intuitive portfolio display
- Community & education pages
Buying stocks has a relatively low bar to entry. All you technically need is a broker and some spare change. Especially through apps like Robinhood and Interactive Brokers, your average retail investor’s first transaction is only a few clicks away. The larger barrier to entry in the investment world, however, is navigating the overwhelming amount of stock data and truly understanding what to buy and sell. In this sense, while ease of access may have increased dramatically in recent years, ease of use has a lot of catching up to do.
Investing may be a (multi) million dollar skill, yet through a tool with Oasis, we hope to make the basics a little easier.
Empathize & Research
Survey: To start off our project, Emma and I needed to put ourselves in the shoes of retail investors with little to no experience. While both Emma and I consider ourselves stock market beginners (even after my three years of working in the investment world), we wanted to understand the perspectives and pains of users other than ourselves.
Our survey aimed at understanding what users think about when buying a stock, especially those users with less than three years of investing experience (we therefore filtered out people with more than three years of experience from taking the survey).
The knowledge that users likely have a decent grasp of the various industries out there helped us determine the level of investment language to use when presenting company data. We could feel pretty confident that using words like “crypto” and “financials” would not go over our users heads.
We also wanted to get a feel for what types of companies our users would be interested in buying.
We found a higher interest in tech and crypto, as well as energy and healthcare (perhaps because of the pandemic?). With this in mind, it made sense for us to at least consider speaking the same UI language as other other tech companies, and to of course be certain that our users would have access to data on industries they are most interested in buying.
Something we discussed early on with Marius was including a question about how much of a return a person might expect to attain in the onboarding process. Such a question would ultimately help the investment matching algorithm present appropriate suggestions to our users that fit their personal investment style (if they are very risk averse, for instance, they might prefer to buy stocks that have historically performed under the wider market’s annual average return).
The survey revealed that most users expected to perform as well as or even better than the market average. I think the fact that most users were even able to answer this question again speaks to the level of investment content we could expect our users to understand. Nonetheless, Emma and I would decide to not include this question in the onboarding process, as there are a few different spins one could take on answering this question (don’t we all want high returns?).
We also found it important to understand the factors most important to a person when buying a stock. In other words, what kind of data should we present to our users as they swipe for stocks?
Here we came to understand that stock fundamentals like earnings per share, market cap, and other indicators of past performance are indeed of interest to users. Furthermore, qualitative data about a company’s business model as well as ethical practices are also essential. Such insights helped us realize that even though we are building a platform for investment newbies, quantitative data would still be of great importance. Interest in more qualitative data points would ultimately inform our decision to include a newsfeed and community section.
Interviews: To further understand our users, we conducted a series of interviews. We focused on talking with people from age 24–35 with less than three years of investing experience. A few quotes stood out as particularly revealing:
“The idea of looking for stocks makes me feel overwhelmed”
“I don’t really know what’s good”
“I gave up because it was still too confusing. The more I looked into it, the more I felt it was too confusing”
Numerous of our interviewees expressed confusion and overwhelm at the prospect of starting to look for stocks to buy. Thus, together with our survey findings, we felt we had developed a better understanding of our users painpoints and felt ready to move on and examine our competitors.
Competitor Analysis: We decided to look at Seeking Alpha, Getquin, and MarketWatch to better understand our competitors. Through our analysis, we found a nice niche in the market. While Seeking Alpha serves as a research and networking platform, Getquin really emphasizes the social network aspect and allows one to buy stocks directly via the platform. MarketWatch, on the other hand, is really just an online periodical.
Oasis might combine a modern, hip, and accessible UI with elements of social networking, user published research, as well as portfolio management capabilities. Furthermore, adding (after sufficient user testing, of course) Marius’ proposed stock-swipe feature could carve out a unique space for Oasis to occupy. Within this in mind, we continued on in our design process and set off to more clearly define our problem space.
Define
Affinity Diagram: Making an affinity diagram helped us to more clearly identify and categorize frustrations new stock buyers face — frustrations we hope to help remedy. We found that the barriers to entry are indeed very great when choosing and understanding which stocks to buy, an area of frustration that would serve as our focus throughout the remainder of the project.
We also came to understand that a company’s ethical practices are an essential factor our users consider when thinking about what they want to own. Thus, it would be important for Oasis to convey such information to help users align their ethics with the companies they own.
An ongoing theme throughout the interviews was overwhelm. The prevalence of this emotion would go on to influence many of our decisions regarding the UI, how we presented numerical data, and the stock swipe feature.
Problem & Hypothesis Statements:
We wrote a few problem statements in order to synthesize our users painpoints, and to remind us of the problem at stake throughout further work. We then wrote a series of hypothesis statements to help clarify how we can help our users. Together, we voted and selected the statements we felt best conveyed the emotions, feelings, frustrations, etc. of our users.
Ideate
User Persona: The next step was to create a user persona — a fictional though accurate representation of our users core needs. We would be designing with this persona, Connor, in mind throughout the remainder of the project.
Storyboard: I tried to imagine what a user like Connor might experience the first time he uses our app by creating a storyboard. In this scenario, we see Connor grappling with the fact that he knows he should invest in stocks, but feeling uncertain about which ones to buy. He does some Googling to see how to buy stocks, and even has a rough idea of a few companies he could buy, such as Tesla. He tries looking at Tesla’s company info and doesn’t understand what all of the numbers (stats like “PE Ratio”, “EPS”, and so on) mean. When he logs onto Oasis, however, the research process feels more accessible, and he his able to pick his first stock with a decreased sense of overwhelm.
This storyboard exercise also helped highlight the function of Oasis’s onboarding process. By answering questions about his personality, behaviors, interests, and expectations, we were able to narrow down the vast universe of publicly listed companies and provide Connor with the tools to start developing his own investing style.
Userflow: Before making our sitemap, we made a userflow to better understand how a user like Connor would navigate through Oasis when they first log on. We emphasized the onboarding process and the flow directly after onboarding. At this point, we decided that Oasis should have a “Learn” page with educational materials about investing basics. Should a user encounter a term, like EPS, they don’t understand, they can learn about it on the Oasis platform itself.
Sitemap: For the last step of the ideation phase, we created a sitemap of the Oasis platform. This helped us have a clear idea of the various frames and pages we would need to create for our prototype, and serve as the informational foundation of the Oasis website itself.
Prototype
Lo-Fidelity Prototype: Hashing out the lo-fi prototype helped to clarify a first level of detail about the different features we wished to include. Rough layouts of each screen were considered, and we were able to think more explicitly about the onboarding process (i.e. what questions to ask and what answers to provide as options). Here we decided that the user would go directly to the stock swipe feature after onboarding, with an option to click away to their portfolio (the home screen).
At this point, we also started to question and rename some of the nomenclature Marius initially came to us with. For example, he referred to the “portfolio” as the “block depot”. We decided to keep with the accepted terminology of “portfolio” to avoid confusing our users. Thus, the “Your Oasis” page has the subheading, “portfolio”.
Mid-Fidelity Wireframes: From the lo-fi, we constructed our mid-fi wireframes and continued to hash out the finer details of Oasis. The onboarding sequence, for example, took on it’s first form, as did the page layouts and how to approach the “swipe-ability” of the stock-swipe feature for desktop (we went with thumbs up or thumbs down buttons). We also could try out a first construction of the “block depot”, or portfolio section, using the sort of display Marius had suggested (using blocks to visually represent capital allocation rather than numbers alone). With the mid-fi complete, we could start user testing.
Usability Testing, Round 1: We conducted a remote usability test using Maze. The participants were asked to, 1) find stocks that match their personality, 2) find the financial details of the stock with their highest match percentage, 3) and find more detailed information about the company Moderna. Prompts one and two had a roughly 94% direct success rate, while prompt three performed with an only 71% direct success rate (and 21% indirect success rate).
This 21% indirect success rate suggested to us to make sure the “more details” button was more visible, as two test takers clicked away from the correct screen and had to repeat steps. Overall, we were quite happy with the apparent intuitiveness of Oasis at this phase.
Other important feedback we received highlighted the fact that the progress bar of the onboarding process looked like a series of buttons (confirmed by a click heatmap). We therefore altered the design of this progress to look less clickable.
Moodboards & Branding: We created three moodboards and tested each one against a list of brand attributes we felt should embody Oasis.
Our survey participants rated moodboards #1 and #2 as best representing our brand attributes. We moved forward with these boards to inform a styleguide and UI designs for Oasis.
Styleguide: Combining moodboards #1 and #2 helped us to craft a styleguide to dictate the UI for Oasis. We went for a softer blue, green, and red rather than the somewhat harsh and overly masculine color schemes finance related platforms use (like the organge of Seeking Alpha or bright red of Interactive Brokers). Again, we wanted our users to feel like investing their money is something they can in fact do with relative ease (though of course, not with out effort — Oasis is a tool, not to mistake it with a platform that does the research for you, which would get into the territory of paying someone else to manage your money). Overall, the styleguide showcases a UI that makes investing feel pretty straightforward — from the colors, to the typefaces, to the button designs and navigation.
Hi-Fidelity Wireframes: Simple, reliable, and supportive, the hi-fi wireframes showcase Oasis in its most final form yet. Emma created the logo, with a green arrow in the “O” to indicate the rising stock prices we hope for our users to buy from their Oasis supported research. On the “Matches” page, you can see how the onboarding process and matching algorithm produced a series of matches clearly displayed to our users. Thus, the overwhelming universe of publicly listed companies has been narrowed down to a page of companies tailored to our users personal needs, interests, and personality.
Hi-Fidelity Prototype: Emma and I created a high-fi prototype in Figma. While not a finished product, it is a prototype that Marius can bring to his potential investors. In this sense, they are able to try out a tangible version of the Oasis platform. We hope this prototype will help Marius as he pitches Oasis to investors and works to secure funding for his company.
For this final project at Ironhack, Emma and I were voted class finalists for the best project by our peers. Thus, we are very proud to present to you our hi-fi Oasis prototype:
You can view an interactive prototype here.
Summary
As I mentioned above, Emma and I were voted finalists for best project with our Oasis hi-fi. As a result, we were invited to present our project to all of Ironhack Berlin’s May 2021 cohorts, including to students and teachers outside of the UX/UI design bootcamp. Furthermore, Marius liked our prototype enough to present it to his potential investors as he works to secure funding for Oasis.
Learnings: Getting to work through the design process, from research all the way to a hi-fi prototype, of course taught me a thing or two, such as:
- Use components in Figma. Not doing so is just dumb.
- Writing good surveys is an art & a science in and of itself. I would definitely re-think our survey questions to get more at how the user thinks and feels as they do their stock research.
- Usability testing is really, really important. Users will teach you things about your product you didn’t even realize you needed to learn.
I think if Emma and I were to continue to work on this project, I would devote more time to testing the stock-swipe feature and block-depot display. Overall, it was a wonderful experience working together with Emma and Marius, and building out this first version of Oasis. I’m excited to see where Marius takes Oasis in the coming years.
