According to the research team at MarketWatch, only 57% of adults in the U.S. are considered financially literate. This means that over 40% of adults don't know how to invest for their futures. To help combat this statistic, Belay is offering a new embedded API that sells stock insurance on stock trading platforms; think of it like flight insurance but for stocks.
Last summer, I served as a product design intern at Belay, where I closely collaborated with the Head of Product while under the mentorship of a volunteer Senior Product Designer. I was tasked with driving the front-end designs and user experience for Belay's upcoming integration launch. I designed interactive prototypes that were presented to potential platform partners: Invstr and Trove. The prototypes helped Belay secure 2 API partnerships and the API launched on the Trove app on fall 2023.
As you can imagine, tackling this project came with some major challenges:
As previous discussions revealed, prospective partners needed help to grasp how stock insurance would benefit their user base. Many found the product challenging to understand since it was the first to offer stock insurance. To address this confusion, I did the following:
Since Belay is an early-stage startup, I only had a few resources to work with and a limited amount of time. Belay's prospective partners were also new apps that lacked the resources that could be dedicated to integrating Belay. That's why I:
Working on an insurance product meant that there were a lot of legal guidelines. I had to communicate that Belay's stock insurance was a separate service and ensure that the user consented to the terms and conditions.
The Head of Product requested that I create a general user flow that could be applied to multiple apps. With that in mind, I broke down the policy purchase journey into three basic steps:
The user goes to the app's investment portfolio and chooses which stock to insure. I decided to display the most popular stocks.
The user then adjusts the policy duration and protection level. Duration options are determined by past user research.
After placing the order, the user will get the final confirmation for their policy purchase.
I started with creating a prototype for Invstr, an app for novice investors seeking trading lessons. Its users are typically risk-averse and newbies when it comes to safeguarding investments. Here are some of the design choices that I made:
Initially, I designed the screens assuming users could buy shares and choose an policy at the same time. However, the Head of Product required them to be separate processes due to legal and technological constraints. So I had to revise the screens and user flow to accommodate users who had already purchased shares.
I included the option for users to choose how many of their shares to insure since this was one of the requested features in past user research findings. I created the customization screen but realized that the screen got too crowded if I had 3 inputs. So I decided to separate the options and have the input for the number of shares come first.
.svg)
Before interning at Belay, I wasn’t aware of some investment terms and insurance policies. However, my lack of prior knowledge allowed me to empathize with beginner investors who were the target audience.
I added a "details" button on the top right that would take the user to a page that explained how the insurance policy works. I thought about all of the things that I was initially confused by and included easy-to-understand explanations.
The second app, Trove, marks Belay's initial launch integration. It's unique for enabling Nigerians to buy U.S. stocks without traditional brokers. Like Invstr, the app's user base primarily comprises young, beginner investors. I made several iterations of the Trove prototype and did the following:
My design mentor suggested exploring Apple's new TipKit for iOS 17, which simplifies the ability to integrate tutorials and explanations into apps. She emphasized that this approach is superior to popup dialogues, which can seem like a harsh warning to users. Popup dialogues also blocks important parts of the screen and can be intrusive.
When I used the Trove app, I noticed that Trove didn't require users to review their order details before completing a purchase request. This was a red flag for me since it would lead users to make unintentional mistakes.
I decided to have the total cost and the order details shown on one screen to ensure that users are completely aware of important information like the policy’s expiration date.
Another red flag that I noticed while using Trove was that some of the UI elements didn't meet the Web Content Accessibility Guidelines (WCAG 2.2) that are required for a website to comply with the Americans with Disabilities Act.
I discussed with the Head of Product at Belay that the colors used for the buttons didn't have enough color contrast for the visually impaired. I was able to convince him to bring up these concerns with the Trove developers.
The screen prototypes that I created during the internship were able to make a positive impact:
If I were to continue working on this project, I'd validate design decisions using metrics like revenue, API usage growth, and retention rates.
Designing prototypes for Belay was an invaluable opportunity for deepening my UX experience. I learned that the design process is ongoing and iterative, especially when handling new business and legal requirements. I also had to deal with Trove and Invstr constantly updating screens, alongside Apple's transition from iOS 16 to 17, necessitating continual updates to my prototypes.
