Victoria Kaufman
Victoria Kaufman
xosignals banner.png

XOSignals

Gamified mobile app for tracking trading instruments

xosignals banner big.png
 

Client: Marketing66

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

Background: XOSignals is a mobile application available for Android and iOS. It provides real-time updates on all major stocks and currencies as well as providing enthusiasts with an online community to share their thoughts on where the market might go next. Unfortunately competition is stiff and the bounce rate for their app is high.

Objective: I have been tasked with completely rethinking and redesigning this app. The company's CEO wants to "Gamify" the experience, meaning, by adding awards and game-like elements to the app, users will feel more involved and use the app more often. I need to balance the fun game element while still providing statistical and informative data about the major trading instruments.


Stage 1: Research


 

Competitive Analysis

Usually for a financial app I would look at other financial and trading apps like Etoro, Investing.com, and TradingView. Since I already have experience designing for financial apps the bigger challenge for me was learning to add gaming elements to an app with a practical use. For this part I looked at mainly 3 different apps: Duolingo, Words With Friends, and Habitica.

 
 
duolingo.png
wwf.png
habitica.png
 
 
 

 

Stage 2: Define

 

 
 
 

"Gamify" Solution

After looking at many other apps for resources, and using my own experience as a gamer, I came up with the following features to add a fun and game-like element to what would otherwise be an unengaging app:

-Awards badges for interacting with the app

-Each user starts at level 0 and must level up to gain new achievements

-Have leaderboards to show which users made the best virtual investments and used the app most often

 

Feature Matrix

I split my feature matrix into two parts for the two different sides of this app- for the data and information, as well as the gaming and reward system. 

 
 
Screen Shot 2018-07-11 at 5.13.09 PM.png
 
 
 

Application Map

 

I created an Application Map to show the relationships between content on the future App. A sitemap usually begins with the homepage, with collections of content branching out. I included all proposed screens in this site map. This can be used a reference when creating the site to see what pages need to be made.

 
 

User Flow

 
xo get badge.png

Looking at the Application Map, I wanted to identify the paths a user would take through the application to complete each task. So I created this user flow on Sketch to illustrate how a user could achieve a new badge or level up. This is a great way to simulate the path a real user would take so I can identify any roadblocks they might encounter along the way.

 

Stage 3: Design


 
 
 

Sketches

Sketching out ideas before taking them to the screen can be extremely helpful. I first sketched out my ideas for badges and rewards before starting to design them.

unnamed.jpg
 
 

Wireframes

I created my wireframes in Sketch and focused on designing rough chunks of how the app will look but leaving out extranneous details. The wireframes are good way to map out my ideas and start to make sense of what was previously just notes and rough sketches. The wireframes will also be the basis of my final UI designs.

 
 
 

Logo

For this logo I needed to present something fun and playful but still get across that the app is financial. A problem we had run into with the previous version of the app is that users would download it without knowing what it did. The final logo is a modern and colorful take on the candlestick style shown in financial charts.

logo final.png
 

Style Guide

Badges and Awards.png
dashboard Style guide.png
Live Feed Style Guide.png
 
 

High Fidelity UI Screens

Finally I was ready to make my hi-fidelity screens! I used bright colors to catch the users eye and presented the information in simple ways so trading enthusiasts could get what they needed while still having fun.

 
level up.png
 

 

Stage 4: Test

 

 
 
 

Prototyping

I created a prototype using InVision with the hi-fidelity UI Screens. With the prototype, one could successfully navigate all pages of the app.  This was extremely useful for testing and for the developers to understand the flow. I conducted moderated tests on volunteers to test the usability functions of my gaming features.

 

dashboard.png
 
 
 
 
xo Iphone X.jpg

What's Next?

After successfully designing, prototyping, and testing XOSignals, I worked closely with the mobile developers to make sure my designs and ideas were implemented correctly. After the release of XOSignals on Google Play and the App Store, we experienced a huge spike in downloads and user retention!