Victoria Kaufman: UI/UX Designer
TC banner (1).png

Trading Compare: Website, Finance

Desktop site to monitor stock investments with live charts and technical analysis

 
 

Client: Marketing66

My Role: UX Researcher, UI Designer, Product Lead

Background: TradingCompare is a desktop and mobile site for traders to use as a resource. They provide live price rates, charts, news, broker recommendations, and financial calendars.

Objective: The current website is outdated and has unnecessary features that are not essential to its operation, and they want a new sleek look. I need to strip down TradingCompare to only the most important features and revamp the UI to look more modern and up to date. The new website needs to be simple and easy to use while still providing all the data our users need.

 
 

 

Stage 1: Research

 

 
 

Competitive Analysis

I put together a list of competitors in the financial space that were doing similar things. I looked at how they tackled and solved the same problems I was looking to solve, such as having broker comparison lists, using a news API, and what extra features would be valuable to users.

 

Old Design

 

 

Stage 2: Define

 

 
 
 

Feature Breakdown

Using the results of our competitive analysis and data from the old website, I made a list of what features to keep, which to discard, and what new features should be added.

 
 
 
 
 
 

Inititial Site Map

I created a sitemap to show the relationship between content on the future site. The sitemap was extremely helpful to organize my thoughts and ideas, and helped me visualize what was only information and notes before. This sitemap for the new TradingCompare website includes all proposed screens and user flows. This can be used as a reference when creating the site to see what pages need to be made. 

 

Final User Flow

The user flow tracks the journey the user will take as they navigate the website. This allowed me to identify potential pain points for the user, and come up with every possible scenario of navigation before starting to make the UI.

 

Stage 3: Design


 
 

Design System and Branding

 

Final UI Screens

 

 

Stage 4: Test

 

 
 
 

 Prototype and Testing

I created a working prototype of my desktop site using the Figma prototyping feature. This model was then used to conduct internal user testing, the sessions were recorded and the test subjects were asked about specific pain points.

 

 
 
 

What's Next?

The team at Marketing66 has been working tirelessly on TradingCompare over the past few months. The new website design is live and already seeing results, and is helping thousands of people with their investments. You can see the live site by clicking the link below and start browsing today!