"Re-imagining automated stock trading"

“Algorithmic trading made easy for everyone”

Since the New York stock exchange was founded in 1792, Traders, big and small alike, have consistently worked to discover methods of trading the markets that would optimize profits and minimize losses. Sometime in the 1980s, traders figured out that with algorithms they could trade the markets faster and better than ever before. This new ability to control, plan and execute trades at unbelievable speeds, absolutely redefined the markets. [Quick note: I will be referring to algorithms as “algos” throughout this case study.]

Now, while the advent of algorithms was a welcome development, regular traders began to point out some underlying issues restricting wide adoption. Some of these roadblocks included:

  • Inability to write code
  • The high cost of existing algorithms
  • Absence of financial resources needed to run algorithms around the clock
  • Difficulty in accessing already created algorithms
  • …and a lot more intricate roadblocks.

Algopear is a new startup that aims to solve all these by eliminating these barriers of entry into algorithmic trading. We aim to achieve this by providing a platform that would connect investors and traders to a library of ready-to-go algorithms that they could use to automate their trading activities. When I joined the folks at Algopear for this project, the app wasn’t called Algopear then.  It was not until some time afterward that the rebrand that renamed Pushstash to Algopear happened and we decided to revamp the app accordingly.

Some of the issues that prompted the redesign were:
  • Low user retention
  • Poor aesthetics
  • Inability to convince users to take action
  • Inability to meet the company’s financial goals
  • We also needed to efficiently incorporate the new features conceptualized to open new streams of revenue for the company

Below are some screens from the old version of the app:
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Click image to enlarge and zoom in

Problem statement

Besides Algopear there were other companies like C2 Collective, Robinhood, etc who were headed in similar directions and if Algopear was to dominate the industry and also stand the test of time as planned, then a solid design foundation was necessary.  The challenge was to come up with efficient scale-able solutions to the identified problems and then translate these solutions into exciting easy-to-use interfaces and experiences. I also needed to create a design system that was scale-able and would be capable of accommodating new features in the future.

My role

Solo product designer

The team

Me [Designer], Bennie [Head of marketing], Lakeisha [Lead dev who’s also the co-founder], Ronnie [Founder] and about four other developers.

Project begins 

For this project, I employed my four-step design process.

  • Understand
  • Design
  • Test
  • Iterate 

Tools used:

Figma, Miro, Photoshop, Adobe illustrator, Google docs,Overflow.io, Xmind, Raindrop.io.

Understand

“At the outset of the project, we didn’t really have a clear direection for the Algopear experience.”

In the old app, we simply sent users stock alerts on their preferred stocks and allowed them to monitor the performance of their favorite stocks. But in this new version, we wanted to do way more.

Instead of trying to figure out from the start what new features to add, I ensured we first answered questions like,

  • What we wanted users to achieve from interacting with our platform and
  • What emotions we wanted them to feel during and after the various experiences.

Hypothesis statements — I started by identifying all our hypothesis statements and assumptions. This was so I could work towards validating or invalidating them during research. Some of the hypothesis we held were:

  • Users would be less hesitant to enter the world of algorithmic trading if we provide safeguards that protect them.
  • Users would be more willing to try things out if we tailored the app’s experience to their trading style and risk appetite.
  • Even in the midst of automation, users would still like to feel in control of the process.
  • Users would like to see necessary financial stats in their money’s performance, quickly and effortlessly.
  • Users would like their own privately curated algorithm lists separate from the marketplace lists
  • Users would appreciate recommendations on algorithms that have performed well and are likely to perform well

Demographics — In collaboration with the marketing lead, I identified the three major demographic categories our existing and potential user base would fall under. I named them D1, D2, and D3.

D1: Investment savvy people, high-risk appetite, very financially capable and experienced folks. High risk – High rewards kind of traders. Risk value of 100k USD and above.

D2: Average experience with high financial capability. Averagely experienced with average financial capability. Mid risk – Mid rewards kind of trader. Average risk appetite too. Risk value of 50-100k USD

D3: Low-risk appetite, little to no experience. Very unwilling to lose money. Not as financially capable as the other categories. Risk value of 20k USD and below.

Business goals — From the meetings and discussions we had, I was also able to deduce some business goals.

Short-term:-

  • Secure seed funding
  • Build an app that would give a solid experience all-round
  • Grow to first hundred thousand users
  • Begin the path to becoming a household name in the trading space
  • Communicate credibility and expertise in every interaction

Mid-term:-

  • Induce profits from algorithm sales and subscriptions

Long-term:-

  • Dominate the retail algorithm industry
  • Educate more people on trading and the markets and basically demystify the financial markets to more people

KPIs — The major KPI was an increase in user base on both the algo maker and trader side.

User research recruitment — For interviews, I was looking for people who fit our three different demographics. I sent out initial questions via a questionnaire and then I reached out to users with interesting responses to gain further insight. I also worked to validate or invalidate all the hypotheses we held.

User research findings — After hearing from and discussing with potential users, Some common themes began to emerge. While some of our hypotheses were confirmed, I also discovered many things we were missing.

  • New or Low experienced users agreed that they actually would like to start in a way that posed the least risk and work their way up from there.
  • Even though algorithms were automated and could pause transactions by themselves, users still wanted to be able to shut down things ASAP whenever they felt like. — *Now even though this isn’t an action we wanted users to always take as it could be done at wrong times, we decided we definitely needed to give them the feature. But to also satisfy what we felt was the right thing to do, I decided to provide, infobox UI elements where we would advise users on whether or not to take certain actions, but ultimately the decision still rested in their hands. 
  • Users agreed they would like to be able to compare and contrast the stats of different algorithms to decide which was best for them.
  • Experienced users also pointed out that they wanted to be able to analyze things quickly hence needed any stats page to be properly laid out.

My research also birthed some “How might we” statements like

  • How might we eliminate the resistance people have to anything involving trading
  • How might we make the experience engaging and pleasurable
  • How might we demonstrate our unique value proposition best
  • How might we ensure the entire experience is free of difficulty
  • How might we make the app’s experience easy for inexperienced traders
  • How might we bring users up-to-speed on difficult terms
Competitor analysis — I performed some analysis on the companies doing things closest to what we planned to achieve. The aim of this is to get a deeper understanding of what’s already out there and who and what we’ll need to outdo. It also helped me detect issues and mistakes potential competitors have made that we wouldn’t want to repeat.
*This is a snippet of this document. I’m not allowed to share it in its entirety.
Click image to enlarge and zoom in
Landscape documentation — I also performed a landscape analysis. This is the part where I look at apps and websites that have design patterns I think may be useful, or handle certain design problems that we’ll also face well, or exude a vibe that is similar to what I intend for our redesigned app to exude. The aim of this was to gather stuff that could serve as inspiration for both visual and experience design decisions.
*This is a snippet of this document. I’m not allowed to share it in its entirety.
Click image to enlarge and zoom in
User Personas
Here I made sure to only add information that would be directly useful in the project. I also stayed generalist for information where an in-depth answer wasn’t necessary. I put together this persona from all what we had learnt to help me always keep in mind the goals that mattered to our users.
*This is a snippet of this document. I’m not allowed to share it in its entirety.
Click image to enlarge and zoom in
At this point, we had a clear idea of what we wanted to build for our users so it was a matter of spelling out everything in detail and then prioritizate. I employed two methods namely the Moscow Framework and Feature prioritization matrix to spell out and prioritize all that we needed to build so that in the next stage I could swiftly ideate on how to build them.
 
Features matrix 
The intersection of what was important to both parties allowed me prioritize design tasks.
*This is a snippet of this document. I’m not allowed to share it in its entirety.
Click image to enlarge and zoom in
MOSCOW Framework
The must-haves, should-haves were the features that 100% had to be built, the could-haves were nice to haves and the wont-haves were for later versions
*This is a snippet of this document. I’m not allowed to share it in its entirety.
Click image to enlarge and zoom in
Proposed User journey
The goal of this, is to detect any undiscovered flaws in our plans, pain points that could arise, and opportunities for perfection we could act upon.
*This is just a snippet of the entire table because I’m not allowed to share it in its entirety.
Click image to enlarge and zoom in
User flow
This is a diagrammatic representation I made to depict how all the different parts of the app we’re connected and show at what points in the grand scheme of things they come up.
Click image to enlarge and zoom in

Design

In this stage, I began to translate the features we had agreed on into functional interfaces.
 
Mood-board
I started by curating an inspiration board that included the websites and apps I analyzed in the landscape doc along with many other designs and images I felt would aid my creative process.
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Wireframes 
These are a few of the many rough initial wireframes I made that we had to go over  and iterate on till we were satisfied. 
Click image to enlarge and zoom in
Click image to enlarge and zoom in

High-FI Designs

Mood, Message, Versatility, Functionality, Readability, Style, Brand, Possible combinations, Largeness of font Families etc. These are some of the factors I considered during the process of selecting a font to use. At the start of my consideration I had a list of 10 fonts I was considering. After further consideration and also discussing with the team, I cut the list down to three fonts. Qanelas, Gilroy and Neutrif pro. I eventually selected Qanelas as the primary font and Neutrif as secondary because they both exuded the “modern and growth focused but fun” brand vibe we all wanted from the start. I also tried to keep my color palette very simple because I really wanted the app to attain recognizability fast.
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Click image to enlarge and zoom in
Splash screen sequence
Click image to enlarge and zoom in
Registration screens 
These screens collect necessary information and allow users to choose which user category they fall into. Users not in the countries we operate in also get a notification and aren’t allowed into the app.
Click image to enlarge and zoom in
Login and recovery screens
Click image to enlarge and zoom in
Profile questionnaire screens
These screens ask users questions which their answers help us place different users in appropriate investment categories. The three categories are low risk-low rewards, mid-risk mid-rewards, and high-risk high rewards.
Click image to enlarge and zoom in
Algo trading process screens
Arrows represent the process of activating algo.
Click image to enlarge and zoom in
Home and to-dos
  1. User profile
  2. Timeframe switcher
  3. User’s balance
  4. Graphical representation of money stats
  5. Performance info
  6. Recent algo activity
  7. Stats minimizer
  8. To-dos info
  9. Recent Algo lists
Click image to enlarge and zoom in
Algo store screens
  1. Algo type switcher
  2. Single algorithm
  3. Featured algorithm
  4. Quick add to list button
  5. Important algo stats
  6. Timeframe switcher
  7. Performance stats graph
Click image to enlarge and zoom in
Settings screens
Click image to enlarge and zoom in

ITERATE

Testing results 

I took two angles to my testing process, testing while still designing to influence certain decisions and testing after designing to make iterations. For example, some users found the initial version of the homepage to be very long and due to this complaint, I modified the layout to make some parts of the home collapsible and expandable, such that the most important things were given priority and additional info could be easily accessed if needed all while keeping things compact.
 
Testing was also how I learned that users really wanted the ability to quickly gather algorithms they liked somewhere and then look over them to make a decision. This was what influenced the addition of the “Quick add to list” button that’s visible by sliding an algo to the left. These and many more testing feedback influenced the multiple iterations of various screens I had to make.
 

Deliverables

Over 150 meticulously designed screens, a solid design language and system, and an efficiently organized Figma component library of the icons, assets, and color and typography styles are but a few of the deliverables and documentation that have been a result of this project. I also want to point out that this project is still ongoing as it is currently being developed. I worked to organize all the components and design-spec in a manner that would let me get as close as I could to eliminating any friction during the design<>dev hand-off process.  
 

Results & Impact

From my tests with the new version, About 89% of participants were able to effortlessly go from onboarding to activating an algo, which is the major action flow in the app. I also tested and compared flows in both the previous app and the redesigned version to get a feel of how much easier the redesign made things. Almost all the participants were impressed by the vast difference in things both visually and user experience-wise.