"Re-imagining automated stock trading"

“Algorithmic trading made easy for everyone”

In the world of trading, Algorithms are computer programs that allow traders to execute trading activities automatically; i.e without the need for human interference. This attribute makes algorithms much faster in taking decisions and executing trades than the normal human ever could. [Pls note “algo” is just a shortened form of algorithms and I will be using algo throughout this casestudy]

Since the advent of trading algorithms in the 1980s, they have been a welcome development, but over the years traders began to point out some underlying issues restricting wide adoption. Some of these roadblocks include:

  • 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 startup dedicated to eliminating these and all the other unlisted barriers of entry into algorithmic trading. Algopear’s product is a platform that connects investors and traders to a library of ready-to-use algorithms that they could use to automate their trading activities.

When I joined the team at Algopear for this project, the company wasn’t called Algopear then. It was called Pushstash and the change of name to Algopear was a direct result of this massive overhaul I and the team executed and shipped over the course of approximately 6 months.

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 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 eight [8] 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, and quite a few others.

Understand

“At the outset of the project, we didn’t really have a clear direction 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 users themselves say they want from the platform
  • and How best we could evoke the correct emotions of safety, confidence, and trust throughout the experience.

Hypothesis statements — I started by working to identify all the things the team held as truths, especially the ones that hadn’t been confirmed through research. This was so I could work towards proving or disproving these opinions 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. 

D2: Average experience with high financial capability. Averagely experienced with average financial capability. Mid risk – Mid rewards kind of trader. Average risk appetite too.

D3: Low-risk appetite, little to no experience. Very unwilling to lose money. Not as financially capable as the other categories.

Business goals — From the meetings and discussions we had, I was also able to deduce some business goals. This part of the process is essential because keeping these in mind help inform certain decisions to be taken later on in the design process

Short-term:-

  • Secure another round of 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. Further discussions allowed me to uncover new insights and also invalidate some of 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 it. — *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 came up with a solution which was 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 but had differing opinions on what stats they paid attention to compared to what we thought they paid attention to
  • 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 but they wanted emphasis on certain metrics.

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 prioritize. 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 to 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,  etc. These are some of the factors I considered during the process of selecting fonts, icon styles, illustration styles, and colors to use. At the start of my consideration, I had a list of 10 fonts I was considering. After further consideration and also discussion 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. I used a few variations of the brand’s primary purple color throughout the interface.
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
Ok so first off these are the splash screens, you’re probably wondering why 4 of them, well in the app the screens smoothly dissolve into one another so we have this smooth blend of color animation.
Click image to enlarge and zoom in
Registration screens 
The first screen in this flow is the welcome screen. This screen has an illustration put there to represent the larger part of our target audience. Curious, young/middle-aged investors who are willing to involve technology in the financial parts of their lives without hesitation.  
 
The screens that come after, collect very vital and personal information, this is also where users choose which user category they fall into, Algo creator or Algo user. Users not in the countries we operate in also get a notification and aren’t allowed into the app. These screens had to be as clear as possible. In initial iterations, I grouped the fields on one screen but after testing I decided to give each field its own screen as I realized this was the best way to keep users focused on one thing at a time and eliminate any possibilities of errors.
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 the appropriate trading categories. The three categories are low risk-low rewards, mid-risk mid-rewards, and high-risk high rewards. Initial iterations of this screen had some fancy swipe designs I came up with, in the hope of making the process fun but after testing I realized that a simple design and shorter easier to understand questions were actually the winning combo and not necessarily a fun questionnaire design.
Click image to enlarge and zoom in
Algo trading process screens
I really enjoyed iterating on this, so if you notice the first screen in the flow has just a single button, it wasn’t that way initially, but after testing, I decided to absolutely declutter that screen to leave only what was important and in doing this I realized that instead of showing all the info I wanted to tell only on the first screen, I could break the flow into parts and show only the necessary information at every point, This also aligned with my initial finding that showing users the stages of things one at a time was our best bet at getting users through the flow and eliminating any possibility of confusion.
Click image to enlarge and zoom in
Home and to-dos
  1. User profile – dedicated to showing the picture of the active user and also acting as a button to jump into the profile settings of the app
  2. Timeframe switcher – This is an essential part of the home screen because all the information below it shows based on what timeframe the user is looking at
  3. User’s balance -This entire section shows how much the user has left and also shows the percentage increase or decrease within the selected timeframe above
  4. Graphical representation of money stats – This section shows with bar charts a visual representation of the amount of money spent by the algorithm and the amount of profit gained or loss incurred. I went with bar charts because this information is the kind where users need to quickly in one glance see what periods of the day/month/year the algorithm spent low amounts and high amounts
  5. Performance info – This is the infobox idea I talked about earlier, this design solution of mine is used throughout the app with the aid of color states to advise, warn or commend users.
  6. Recent algo activity – This section shows the two most recent algorithm activities with the option to jump into the specified algo page to see all of its activity in realtime
  7. Stats minimizer – As you can see this homepage is really long, from talking to users I realized that the users didn’t really dislike it but wanted it to be shorter if possible and without taking away anything from the homepage because they still wanted to see those stats, so my solution was another design solution that allowed users minimize sections of a page, so basically everything above that button is minimizable and then the home screen looks like the version beside it and of course the minimized version comes with the option to expand things back into the previous view.
  8. To-dos info – The to-dos screen is a compilation of tasks users need to take action on. It comes with clear explanatory text and the individual elements upon click initiate the process of completing the task.
  9. Recent Algo lists – From the marketplace users can save algorithms into lists of their own. I incorporated this feature for two reasons, First is based on my previous e-commerce experience, I know that when in a market place users like to collect things that interest them into a separate place that they can then review later and make their decision on which to purchase. Secondly, users explained during research that they would like to curate their own algorithm lists and share them with others, especially experts who had a following that most times consisted of less experienced traders who trusted their judgment.
Click image to enlarge and zoom in
Algo store screens
  1. Algorithm type switcher – This element is the highest level and most used filter option. This I discovered from users and testing. So I decided to reduce the number of clicks needed for this quick sorting by bringing out this section which was previously tucked away inside the filter screen and bring it out and make it prominent and much easier to reach. 
  2. Single algorithm  – This element represents a single algorithm on the market, According to users, I learned that when deciding which algorithms to even consider, that the two most useful stats they wanted to see were how old the algorithm was and how successful it was, so I attached these two pieces of information to individual algorithm elements so they could be easily seen without having to click inside each algorithm first.
  3. Featured algorithm _ This is a variation of an individual algorithm on the marketplace with a star on it to indicate that it’s being given prominence aka is being featured based on a consistently good performance.
  4. Quick add to list button – This is another solution that was born from testing insights. So like I said users wanted to be able to add algorithms to their own lists so they can go over them later, but simply giving them lists wasn’t enough, I needed to also incorporate a swift way of adding marketplace items to this list and that was how this idea came about, it’s a simple hold and swipe that reveals a plus button that can be used to quickly add an item to a list.
  5. Important algorithm stats – Inside an individual algos detail page, I sow the four most important stats users informed us they wanted to see, actually I was six stats that got mentioned the most but from talking some more with both the users and the founders we decided on four ut of the six that were of utmost importance and we went with those.
  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. If you’ve read the section above you would see instances of how rapid testing 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 93% of participants were able to effortlessly go from onboarding to activating an algo without any form of assistance. 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.