Victoria Kaufman
Victoria Kaufman
xosignals web banner.png

XOSignals Web

End-to-end mobile app and desktop site to monitor forex investments, as well as social media hub for traders

xosignals web banner big.png
 
 

Client: Marketing66

My Role: UX Researcher, User Interface Designer, Product Manager

Background: XOSignals is a successful app for traders around the globe to get price updates, analyze charts, and chat with other traders. It’s an investment monitoring platform as well as social media app used by over 100,000 people.

Objective: The team at XOSignals wants a fully functional desktop site to go along with their widely used mobile application. They have tasked me with taking their great features and putting them on the big screen.

 
 

 

Stage 1: Research

 

 
 

Competitive Analysis

One of my favorite parts of any project and one that I make sure to devote a lot of time to. I focused my research on other forex sites that had social components, like following traders, live chat features, and more. I also looked at the top social media sites like facebook, instagram, and whatsapp, to see where they went right in their design.

finance logos.png

Findings

I found that these sites had happy, lively communities through the use of simple interfaces, allowing a multitude of areas for users to share their thoughts, and having customization options to make users feel like they were a unique part of the community.

social media logos.png
 
 

 

Stage 2: Define

 

 
 
 

Feature Matrix

I always make a list of prioritized product features and create a loose plan for product development before starting design on any major project. Since XOSignals already had a mobile app, I used this to mark off which features go on the desktop site and which go on the app. I will often refer back to this document when determining what features to implement and their level of importance.

 
 
Screen Shot 2019-03-31 at 16.24.18.png
 
 
 
 

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 text and notes before. This sitemap was divided into pages that needed the user to create an account to use, and pages that don’t. This is a great reference point to establish user flows.

xo web user flow.png

Onboarding Flow

Since there are a number of paths a user can take during the onboarding process, I wanted to illustrate all possibilities. Making a user flow is a great way to identify the paths a user might take, and to foresee any issues with the site.

 

Stage 3: Design


 

Responsive Wireframes 

After I had a plan in mind and a rough outline of what needed to be included, I set to work making wireframes for all the screens. I started with all the desktop screens and then once those were approved by the CEO I made the responsive tablet screens. We decided not to optimize the site for mobile in order to encourage users to download the mobile app.

 
dashboard.png
xosignals Desktop.png
BROKERS.png
education.png
packages.png
BROKER PARTNERS.png
 

Style Guide

styleguide1.png
styleguide2.png
 

Final UI Screens (Web)

about us.png
stocks.png
dashboard closed signals vip.png

Final UI Screens (Tablet)

stocks tablet.png
Leaderboard tablet.png
webinar tablet.png
 

 

Stage 4: Test

 

 
 
 

User Survey

After creating the site, and publishing it, we sent out a survey to all our users and asked for their feedback. We were able to gather over 50 responses and collected valuable data that we used to improve in the next version. Users loved the social features, and the combination of a place to check prices and information, as well as swap ideas with other traders.

 

xolaptop.png
 
 
 
xomockupweb.jpg

What's Next?

Reiterate, reiterate, reiterate! Now that the site is live and working, I am working closely with my developers to continue to improve XOSignals for our users. We use google analytics and other data collection services to look at quantitative data and user retention rates for both the mobile app and desktop site. The closer we can get to seamless interaction between computer and phone, the better.