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
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.
Stage 2: Define
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
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.
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.
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
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.
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.
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.
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.
Stage 4: Test
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.
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!