Statsvestor Website

Designed a financial website to share statistical investment insights through clear data visualization
Statsvestor website
Skills
Web design
UX UI
Roles
Web developer
UX UI designer
Tools
HTML
Tailwind CSS
Javascript
Timeframe
4 months
(Jul 2024 - Oct 2024)

Introduction

The project involves designing a website that showcases the results of our trading model, aiming to assist users in making informed investment decisions. The website targets beginner and intermediate investors, featuring a clear and user-friendly interface for effective data presentation.

During the research stage, I conducted a competitor analysis of four competitors targeting both international and local markets.

Statsvestor's competitive analysis

Here are some insights regarding the design of our website:

  • User-friendly interface featuring essential trading information, tooltips, and tutorials
  • Provides forward testing to evaluate strategy performance in real-time conditions
  • Ranks top-performing stocks
  • Responsive design

I created personas representing two key target groups: Emily, an investment beginner, and James, an experienced trader. Emily’s main goal is to start trading without feeling overwhelmed by complex data, while James aims to use statistical data to identify optimal trading times for his investments. Both personas highlight the importance of accessible insights to navigate the stock market effectively .

Persona for investment beginner Persona for experience traders

Goal Statement

The website aims to deliver clear, actionable analysis, enhance visual appeal, and offer a user-friendly interface to support informed investment decisions.

The site map highlights the simple navigation of our website, featuring two main pages: Analysis and Learn. The focus is on providing essential information, with statistical analysis on the Analysis page and educational content on the Learn page, catering to both beginners and traders. To accelerate the development process, we prioritized the Analysis page for the Minimum Viable Product.

Information architecture for Statsvestor

Final Product

Here’s our final website—Statsvestor . The design caters to users 'needs by offering actionable analysis, visual appeal, and ease of use . Scroll down to explore the Statsvestor homepage 👇

Solution #1

Actionable Analysis

Statsvestor simplifies extensive investment information by highlighting the top 10% performing stocks for beginners and providing stock ratings to help traders make confident, informed decisions.

solution - actionable analysis
Solution #2

Visual Appeal

To improve data visualization, I established a clear information hierarchy by positioning two cards above the graph to display its results. I also minimized text and gridlines in the graphs to keep the audience’s focus on the results at the top. Hover over the image to view the "before "version of the website 👇

solution - visual appeal
Solution - visual appeal before image
Solution #3

Usability

To ensure a user-friendly interface, I incorporated simple navigation, tooltips for explaining financial terms, and a responsive design .

Responsive design - Laptop version Responsive design - Mobile version

Design System

To ensure design consistency and streamline future development, I documented our design system, covering typography, colours, and components.

Design system for Statsvestor

What 's Next

The next step is to create a "Learn "page that will feature a series of blog posts aimed at educating users. Once this page is established, it will guide beginners on how to effectively navigate the website and leverage the statistical data to make informed investment decisions. 

Following the launch of the "Learn "page, we will conduct usability tests to evaluate whether the provided instructions and overall website content are clear and comprehensible, ensuring users can successfully utilize our platform for their investment needs. 

Finally, as we work to increase our audience, we will implement tools such as Google Analytics and Search Console to identify any usability issues and continuously enhance the overall user experience.