Spectral Alpha
Helping new, experienced, and professional traders understand the benefits of a new algorithmic trading app
Helping new, experienced, and professional traders understand the benefits of a new algorithmic trading app
A primary challenge during the pre-launch phase of Spectral Alpha, a fintech app, was to optimise user interest and acquisition. Although the app's email capture page was live, it only provided minimal details and did't allow prospective users to try out the product for themselves. Unfortunately, this resulted in low subscription rates.
Further research revealed that potential users had distinct information preferences, requiring personalised solutions to cater to their specific needs.
It was clear Spectral Alpha's landing page needed to be revamped to not only establish itself in a competitive market, but also to create a captivating and informative user experience.
Spectral Alpha's responsive website caters to both novice and experienced traders. It effectively showcases personalised features, transparent pricing plans, and expedites access to the demo.
Project goals
Secondary research
Competitive analysis
Interviews
Personas
POV statements
HMW statement
User flows
Task flows
Sitemap
Wireframes
Visual design
Prototype
Usability tests
Iterations
Hand-off
Next steps
Spectral Alpha is a complete spectral algorithms powered trading system for trading signals and portfolio automation, for professional and retail traders.
The app's creator and developer, Alex, reached out to me to see if I could help him create a responsive website for the app. The email capture page he had set up, shown below, was experiencing low subscription rates, prompting the need for a more effective solution.
Wanting to know more, I met with Alex to learn about the app itself and discuss the project's constraints. Along with only being able to dedicate 80 hours to this project, I had to keep the following in mind:
Alex built Spectral Alpha using Tailwind CSS and had already established branding, typography, and a colour palette. To maintain consistency between the website and app, I adhered to his style guide while designing components.
My network comprised only a small group of individuals from the financial industry. This posed an interesting challenge as I had to explore alternative resources, such as Discord and social media, to effectively recruit research participants.
Considering that most traders employ multiple screens to execute trades, we agreed that Spectral Alpha's website should be desktop-first, while also ensuring responsiveness across different devices.
Alex provided me with an account of the usability issues potential users face on the email subscription page, as well as his goals for the responsive website. Together, we outlined the overarching research goal and research methods.
Gaining the trust of potential users is essential for encouraging subscriptions. In a saturated market, establishing credibility becomes vital to the success of Spectral Alpha.
Ensuring potential users grasp the value of Spectral Alpha, regardless of their trading experience, is crucial. Striking the right balance is essential, as excessive information may overwhelm new traders, while inadequate details could make experienced traders suspicious.
Utilise the insights gathered from primary and secondary research to develop a website that effectively drives user subscriptions.
We want to know what traders with varying amounts of experience value when deciding to sign up for a trading software so that we can design Spectral Alpha's website to encourage subscription.
With our goals in mind, I began spending time in forums dedicated to algorithmic trading (algo trading) with the aim to understand people's perceptions of this specific type of trading, as well as the kind of language they used to talk about it. I also kept an eye out for how and when people recommended it.
Below is a selection of screenshots I gathered and grouped from forums like Reddit, Elite Trader, and Trade2Win.
From spending time in the trading forums, I collected the following insights:
People were generally hesitant to begin algo trading, because it requires a lot of skill and upkeep if you want to use your own algorithms.
People were weary of algorithms written by others.
Although algo trading automates trades, they felt it had just as many problems as discretionary trading (trading that focuses on the trader's judgement).
Forum users tended to share their experiences about trading platforms, instead of recommending them.
However, some of the things they suggested looking out for in a trading platform were:
The main benefits commonly cited were:
The main disadvantages commonly cited were:
Next, my objective was to assess the strengths of some of Spectral Alpha's competitors to ensure that Spectral Alpha's website incorporated similar strengths while also identifying unique features that would set it apart from others in the market.
I then spoke with 2 novice, 2 experienced, and 1 professional trader via Zoom to find out first hand:
After conducting the interviews, I created an affinity map to identify patterns in the collected data. To enhance visualisation, I colour-coded the sticky notes, making it easier to identify overlapping motivations, needs, and desires among different types of traders.
Despite their varying levels of trading experience, novice, experienced, and professional traders expected to see similar things:
A clear explanation of what the product does and how it's competitive
UI that feels professional and trustworthy
A transparent pricing breakdown, including how the company is making money
Social proof
Approachable language
The ability to easily and quickly contact support
In this instance, I could only recruit male traders. In the future, I would make an effort to include female and non-binary traders to gain diverse perspectives.
I created two personas, Dave and Henry, based on the insights gathered from interviews. These personas helped guide decisions in the design phase.
Having a grasp of the users' needs, I developed a diagram outlining the business goals and technical constraints. It became evident that the website must establish clear pathways for new, experienced, and professional traders, enabling them to access relevant content and information and thus facilitating their journey to start algo trading on the Spectral Alpha app.
How might we help website visitors understand Spectral Alpha's benefits to encourage subscriptions?
Based on the research completed so far, we knew that prospective traders wanted to be connected to essential information about the product right away. Therefore, we prioritised features that would help establish credibility and grow visitor confidence.
Below is a feature exploration and roadmap, outlining the particular features addressed in this project under Priority 1. The remaining Priority 2 and 3 features are essential for the minimum viable product (MVP), but we plan to prioritise them in future iterations due to time and company constraints.
To ensure that potential users could discover the information they needed quickly, we kept the website's sitemap shallow.
Following lo-fi wireframing and discussions with Alex, we chose to remove the Sign Up page and instead redirect visitors to the app to explore the demo for themselves, which is reflected in the user flow further below.
I created a user flow to illustrate how visitors would navigate through the website during the sign-up process. This flow served as a constant reminder throughout the ideation phase of the importance of immediately capturing prospective users' attention. If they didn't find value within the first few clicks, the likelihood of them subscribing would decrease.
While designing for prospective users, I also sought Alex's input on the website's style. Throughout this project we used FigJam to discuss ideas and share updates. In the screen grab below, I collected some images for discussion and invited Alex to provide feedback.
We also collaborated on a mood board as a visual representation of branding, ideas, and preferences for the website.
Prior to making wireframes in Figma, I sketched out ideas for the home page. The sketches explored how we might incorporate short video clips of the app, as we believed they would be an effective way to illustrate Spectral Alpha's main features and benefits.
I then explored interactions and asked Alex for feedback. By creating and then discussing these lo-fi wireframes below, we were able to make decisions about the following:
I returned to the mood board and style discussion we had had prior and put together a style guide to reflect Spectral Alpha's branding.
Crafting the copy for Spectral Alpha's website proved to be a challenging endeavour. During the research phase, I invested effort in familiarising myself with technical language. Throughout the design process, I sought feedback from Alex to ensure the copy's accuracy and effectiveness.
Once the branding was added to the wireframes, Spectral Alpha was ready to be tested to ensure usability. Below are the 5 main screens of the flow.
I tested Spectral Alpha's website with 4 traders: 2 novice, 1 experienced, and 1 professional. The tests were conducted via Zoom so that I could witness participant's facial expressions, record their mouse movements, and ask follow-up questions.
The objective of this test was to ensure that visitors to Spectal Alpha's website could:
To measure success I established the following metrics in my research plan and used them against the test results:
Task 1: Locate Spectral Alpha's benefits and decide if the app is right for you
Task 2: Locate pricing and select a plan
Task 3: Arrive at the beginning of the app's onboarding
1 Participants quickly located the benefits, but spent the majority of the time discussing them out loud.
2 One user immediately clicked the CTA instead of locating the benefits.
Participants who were either new to trading or had some retail trading experience appreciated the:
They wanted:
The participant who was a professional trader felt the:
They wanted:
I presented the usability test findings to Alex and recommended priority iterations that would benefit the usability of Spectral Alpha's website. I used the impact vs. effort matrix below to support my suggestions. With Alex's approval, I began working on the iterations.
Participants wanted a clearer access point to the app and a demo. They felt the copy "Get started" wasn't immediately obvious and lacked incentive.
To ensure the functioning of the MVP, the copy on the button was updated to communicate that visitors could try out the app for free.
Participants expressed a desire for a clearer product description. After reading the description below they still lacked an understanding of what the app was.
To improve visitors' understanding of the product, I updated the copy to include a description of the app.
Participants who were new to trading wanted more information regarding brokerages and other technical terms they may not be familiar with yet.
To meet the needs of all visitors, link buttons were added to quickly connect new traders with essential information.
Explore the benefits of algo trading for yourself!
Expand the prototype to full screen using the arrows in the top righthand corner.
After finalising this round of iterations, the designs were ready to be handed off to Alex for development. I made sure that the component library was well-organised and I used the Figma plugin EightShapes Specs to provide detailed component design specifications. Throughout the development process, Alex and I plan to collaborate closely.
Working with a major stakeholder and developer for Spectral Alpha's responsive website taught me some invaluable lessons and strengthened my desire to pursue product design.
© 2023 Rachel Brenner
