PrimaryBid
To provide a platform that gives everyone fair access to IPOs and public company fundraises, at the same time and price as institutional investors.
Ready to invest
Project
Senior product designer | June 2022 - presentTo provide a platform that gives everyone fair access to IPOs and public company fundraises, at the same time and price as institutional investors. PrimaryBid currently has an app that users can use to invest but the overwhelming concern is that when browsing the internet they wish to use a desktop version to apply for deals.
Welcome to your IPO investment platform.
Applying for deals on a larger device allows the user to view documentation easier and therefore make a more confident decision.
What our users want
Users prefer to do research and financial analysis on a larger screen such as a desktop, but are generally happy to transact on an app. Reviewing financial statements, charts and long documents such as pdf's is difficult on a small screen. Users with desk jobs like to do research while they’re at work, on their desktop or laptop.
We found that some users refused to use the app reasons being they felt that it was not as secure as their desktop when making transactions. Others found it difficult to read and were used to reading on larger devices wether it be on a tablet or larger resolution. Because of the demographic of our clientele, they would only use their mobile devices to make calls and send messages and not for anything else so a platform where they could participate in deals was more appealing to them.
Analytical data
A lot of users wanted to have a platform where they could do their investments but also read any articles or data which would give them the confidence to participate in any deals. Unfortunately what was the common consensus was that a lot of investors would invest in platforms where they felt they were educated about the deal. With data, we found a potential investor is 70% more likely to invest if they totally understood the investment in terms of the company and its insights into the future.
The pain points gathered by user research as to the main issue users face when using our services on a mobile application. This information was of utmost useful as it allowed me to process solutions based on this intel.
Our data showed a number of our users spread across 5 areas of a type of investor, those being a super spender with over 10 years of experience of the market and would invest large sums, a family provider.
Information architecture
You know one of the most important things to building a product is its infrastructure. Understanding the user journey before any design has kicked off is the key to building a good product. Only once this is in place we can then turn our attentions to research and other avenues such as creating low fidelity wireframes. In this design it shows off the journey a user will take when the sign up to the moment an order has been places which means going through a transaction. As a team working remotely we gathered together and worked online using Miro. This platform allowed us to work collaboratively and build upon ideas. It would also be used incase you wanted to go over any points in which could be challenged simply by leaving notes.
Design system
One of the most complex tasks a product designer can do is create and build a design system from scratch. When I first arrived there were a few design systems in place none of which were built to last and it created a lot of inconsistencies throughout design and the user experience which is never good. So my first task was to build a design system that could be used by everyone involved. Having extensive knowledge of design systems and creating components I presented master classes to my fellow designers on the best practices and ways to build a component.
Building a theme from atoms and molecules is just the beginning. You need to have an understanding of the company direction and brand so I first need to understand that before starting. Working on an 8-bit grid was standard practice and made it easy to build for both designers and developers.
Component library
Figma x Storybooks
I have always worked well with developers and maybe this comes from developing websites using dreamweaver when I first started my career in web design. It helped me better understand their struggles and how I can better assist them when building out user flows for customers. I like to keep the devs in touch with my vision and what currently is possible not from the front end but also the back end and what assisted us was Storybooks. This kept a detailed documented format which if any update or change to a component all relevant groups would be notified.
Discovery
Now having a full understanding of product requirements and knowledge of a user’s expectations I wanted to build a website with a dashboard approach. There are a lot of options a user has when landing on a deal and after reviewing other website/dashboard designs such as Trading212, Monday.com, and many more I felt that this was the best move.
Lo-fi, hi-fi
After drawing up a few wireframes there were a few decisions to be made one of which was the placing of the CTA. Because the main section of the design was to allow users to read articles before their participation in a deal it took up the largest area and rightly so. The problem with the initial CTA placement was that it decreased that space unnecessarily and I didn't want that to be a factor so placing the CTA (apply button) at the top where the information of the deal would always be fixed was the more obvious choice.
Another thing that had to be taken into account was the side-rail icon. Now there were a few people who felt that it wasn't needed but I disagreed and the reason was based on smaller devices than a desktop even though this was predominantly for desktop users being a responsive product I had to consider every typical user. This problem was that the side-rail and left column which contained all the deals available to a user were in a fixed width meaning the only scalable part of the website was the main section as this condensed I wanted to allow the user to generate more real estate and using the side-rail icon collapsed the left column which would allow the user to read more comfortably. Also, it made the user focus on the one deal they were interested in but clicking on the live icon would also open the left column so the option wasn't hidden.
Let’s go through
onboarding
There were a few obstacles when it came to the onboarding flow that I had to overcome mainly due to the legalities and what each scenario presented to a user. KYC (Know your customer) was a threshold in this process which enables us to show certain material to a user or not depending on information provided by the user. Based off this a user could experience a different type of onboarding compared to a different user even though they went through the same flow. And certain questions were thrown up like, If they failed KYC what would happen? if their account was waiting for approval what we then be able to show a user? The architecture diagram assisted me the different flows and I then had to tie it all together. Try onboarding below
Breakpoints
Make it stand out
Res
pon
sive
Check your order
Prototyping is a great way of putting your ideas across with minimal effort as the designs are there created they just need to be linked. What is great about this is that your prototypes can also be used for user testing. Platforms such as usertesting, maze to name a couple can include a link to your prototype and then when a test is run a user can experience the prototype and understand how a journey will look and feel which makes it great for capturing data upfront and can help with unforeseen pain points. The journey I wanted to take the user on was one that would fill them with complete confidence that their monies were safe and their transaction was being processed with a visual representation of that. So in the orders screen, I created a side modal which would slide out and present the user with the status of their participation in a deal. I didn't think this was necessary to be shown on orders as it would be an overload of information for a user to take. So a user would then view their order in a linear table format with the option to 'track order'.
How to
pay
We're just in the process of integrating the payment system Plaid and doing research on how their system would integrate with ours was the first step to understanding how to tackle this task. What they offer is instant bank transfers and we had to design the first two screens in the process which were the payment method and the bank selection.
Solving a problem
In finance I felt that were more problem solving to tackle than usually simply because of the legalities that come in the finance sector. Every design had to go through legal & compliance. Every user experience tested more ways than one and the back end engineers had a lot of building than what they're accustom to. This threw up issues for me to face and solve. Once of which was that when a deal was live a customer had a small window to participate in that deal. They would not simply purchase stock but apply for shares so time was against them but how do I demonstrate this to the user. Came up with a solution to add a panel that would sit at the bottom of the component card. By using the boolean the designer could simply activate this option. With the naming convention show/hide and simple edit copy within the timer itself I felt this was a great resolution. Once a deal then was viewed the timer would appear fixed to the top of the content so it was always visible.
Houston…you know what
Another major issue we faced was most users would be notified of a deal via email which would then link them directly to the offer detail screen of the deal. The reason that this caused n problem was that the offer screen did not contain the footer so there wasn't a clear way for the user to go to the homepage if needed or to view other live deals. Yes, I could've placed it in the menu but I don't like to hide important features at a critical step so doing some research I cam across the Nike website where as the user started to scroll the CTA button would appear at the baseline which was a very interesting concept one which I used here. Interestingly enough Revolut also had this feature and I felt it was the right place to introduce this concept to our users. It's clear, grabs the attention of the user and doesn't obscure from the information.
Learn: educate our users
Challenge
Studies show that people are more willing and have more confidence in investing if they are educated about not only the type of investment they are making but the information about the company they invest in. So how can we get our customers to invest in up and coming deals?
As an MVP the idea is to see if the users would actually read an article when investing before we go ahead and launch the full ‘Learn’ section. The idea I had was to present the user a card and a simple question, “Learn more about Primary Markets and IPOs” to see if a user would click to read. This would be placed before any deal order detail would be visible giving the user the opportunity to read more. IF they came directly from an email and the landed in the offer detail screen then the card would be presented at the section where a primer usually is located.
2. How it works
There is a significant amount of negative space to work with if a deal is not live. Unfortunately as an MVP product, the opportunities were limited in terms of what can be shown. So why would a user browse the website? because generally a user is notified via email when a deal goes live. A very small percentage of users would fall on this screen and to understand what to show those users here we needed to know why they would visit the website when there were no deals to invest in.
I have created a product for our users who specifically want to invest in deals on a laptop or larger but what happens when there are no deals?
Inspiration
A lot of inspiration came from modern approaches already in place that larger organisations were using such as Apple, Revolut, Unloan to name a few. Separating different segments of a page using cards was an interesting concept and one that suited this idea.
Approach
Typically a user would be looking for information. Who are PrimaryBid and how does a deal work? and so I put together three simple steps to educate the user of the process of a deal once they invest in a card design format. I took inspiration from Apple, Revolut just to name a couple and I really like that style of design and have been using it in my designs for quite a number of years now. For me they’re clean, modern and are being used in much more established companies such the ones I mentioned which gives confidence to the user.
Now I figured what to show the user, how will it work on mobile compared to desktop. Well the whole section is responsive that contain the cards. So reaching a certain breakpoints just re-arranges the cards into a stack vertical format. When the user begins to scroll to view deals the card in the index screen is hidden as at this stage the user is only interested in the live deals.
3. App reviews
Challenge
Following the release of the new app, we refreshed our app store rating. We should ask users to review the app after using it.
From Tadas (QA): When I was in Moonpig after implementing the review alert we got a 20% increase in 4-5* ratings, not too much but it seemed to work. Showing a ratings prompt on launch is 50 percent more likely to result in the app being closed than if it's shown at any other point in the app. Customers who are asked about their opinion of an app are unhappy are >400% more likely to return to the app than the average app customer.
Why are we doing this work?
Improve our app and play store ratings. Article on why this is important: App review article
4. Confirm broker details
Why are we doing this work?
One of the key customer issues that our customer support team is incorrect broker account numbers. By asking users to confirm their broker and account number before application, and giving them a way to change them if they are wrong, we hope to reduce the number of applications that fail to settle and require customer support intervention as 10% of users were entering incorrect broker details. The risk of adding this is that we create some friction and if someone spots that their account number is incorrect but doesn’t know the correct one, they may not continue with their application. We should consider how we can prompt users
What does success look like?
No increase in drop off
Reduction in the percentage of settlements that fail
Ask users to confirm their broker details when applying for shares (A/B test)
5. Drop offs
Challenge
Our data shows that currently, our users are dropping off before they have even logged in to the website or app. This is causing a significant rise in calls to our customer service teams which then resolve the issues which customers are facing which as not receiving their OTP code or not knowing how to use them
Check out the PrimaryBid transactional website which is now live.