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
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.
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.
Stage 2: Define
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.
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.
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
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.
Final UI Screens (Web)
Final UI Screens (Tablet)
Stage 4: Test
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.
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.