Select Page

Battlestocks

A virtual stock market competition in which friends play against each other to develop the best investment portfolios

Timeframe

1 semester (4 months), Fall 2013

Team

Miko Bautista, Ryan Kwok, Senna Parsa, and Emily Tsai

Website

For our capstone project as information systems students, we designed, developed, and launched Battlestocks.

Battlestocks is a Ruby on Rails web application where friends play against each other to develop the best investment portfolios on a simulated stock market.

My Contributions

As a UX Designer, I led the design of the user interface based on research insights to create a realistic stock brokerage experience and maximize the educational value. I designed community building aspects including a points feature that increases website stickiness. I wrote user stories and updated the database design to ensure that all user stories were possible.  As a developer, I programmed the Stock Research feature using Ruby on Rails, CSS, and web-scraping.


Many college students want to invest in the stock market but lack confidence

Surveys and interviews indicated that most college students wanted to invest and thought it was a smart way to manage their money. However, many people were afraid to get started in the stock market because the process seemed too complicated and foreign and they were not ready to commit their free time to learning a boring subject. We wanted to give people confidence by providing a way for them to familiarize themselves with investing. And, we wanted to make the learning process fun.

Professors and Finance Clubs host successful investment competitions

During our interviews, we found that novices had great experiences learning how to invest during stock market competitions. Students in Finance courses or in Finance Clubs competed against each other to make the best portfolios. It helped students learn how the stock market worked and it was fun. However, calculating results was done manually and that limited the number of competitions they had. With Battlestocks, we could make it very easy to host competitions and provide additional tools to enhance the educational experience.


Battlestocks is an online competition in which friends compete against each other to develop the best investment portfolios on a simulated stock market.

How Battlestocks Works

  1. A user creates a game and invites friends
  2. Over the course of the game, players can research companies and use their budget to buy and sell stock.
  3. At the end of the game, Battlestocks ranks the players by return on investment (ROI). Top players are awarded lifetime points (and bragging rights!).

Impact

  • An accurate, simulated environment using real NYSE and NASDAQ data allows players to explore the stock market without risk
  • A competitive environment motivates education and good investment strategies
  • The Stock Research feature trains players to rely on a variety of information sources
  • Automatic tracking of each player’s progress eliminates the burden of administration

What we made

Try it out: http://battlestocks.herokuapp.com/
Sample Use: In this example video, the player reviews the investments for their current game. When they find out that a stock value is plummeting, they sell it.

Dashboard

Add New Players

View Game Details and Buy or Sell Stock

Create a New Game

Research Stocks

View Current, Upcoming, and Past Games

16-week Process

Research


Survey demonstrates that a lack of confidence is the reason why most college students do not invest

We surveyed 71 college students to learn more about the reasons why they have or have not invested in the stock market. Most students do not own stock. Typically, those who do were encouraged by their parents who taught them the basics. Most participants lack confidence in their knowledge of the stock market and want to learn how to invest.

%

reported they currently own stock

%

ranked their knowledge of investing at less than 5/10

%

interested in learning more about investing


Interviews

We held interviews with a stockbroker, the president of a student finance club, a student in a university finance course, and 5 stock owners.

Findings

  • The biggest barrier to learning how to invest is the “boring” medium used for education.
  • There are different types of trading that Battlestocks could facilitate, such as day trading, position trading, and swing trading.
  • There is already appreciation for similar stock market competitions held by professors and finance clubs.
  • There is a heavy administrative burden to holding competitions.

Design Inspiration

In order to create a realistic experience, we drew inspiration form the interfaces of popular investment websites but simplified it for our players.

Buy Stock Page: E-Trade vs Battlestocks

To people just beginning to invest, E-Trade’s interface is overwhelming. Battlestocks simplifies the interface. For example, when buying stock, every order is accepted at the current rate so Price Type and Term are eliminated.

Research Stock Page: E-Trade vs Battlestocks

Similar to E-Trade, Battlestocks provides a wide-variety of information sources for research. We also used color to represent increases versus decreases and highs and lows for reference at a glance.

Prototyping


We designed three iterations of the user interface before implementing it.

Design Objectives

  • Provide a realistic but simplified environment that allows new players to walk up and use it.
  • Allow for different types of trading by offering flexibility in the length of games.
  • Encourage best practices for researching stocks.
  • Minimize the administrative burden.

Paper Prototype

During the first iteration, a team member and I created paper prototype sketches in parallel. We met to integrate the designs during a whiteboarding session.

Here’s my paper prototype for the dashboard. Ultimately, we simplified it by eliminating the stock information for each game. The player can find that information by clicking on the game.

Mid-Fidelity Prototype

Next, we made mid-fidelity mockups in Photoshop. The developers referenced these mockups when implementing the user interface. We showed this prototype to the interviewees for their feedback.

Design Decisions

We designed a Stock Quotes Widget so that players could easily monitor all of their current investments without visiting each individual game page. The widget helps the player identify which investments require immediate action.

Working Prototype

We built a Ruby on Rails application to create a working prototype. We used an Agile Development method, which meant that at all times, we had a working version. We conducted Think-Alouds in which professors and students tested the versions on their own devices by creating and playing games with each other. The prototype was limited based on the technical skills of our team and time constraints, but that forced us to prioritize the most important features.

Design Decisions

We added a way for people to research stock right off of the dashboard to encourage them to get into the habit of continually educating themselves on potential investments.

Development


We designed a Ruby on Rails app using an Agile Development Approach

We developed Battlestocks using Ruby on Rails. We took advantage of many Ruby Gems (or libraries) including the Yahoo! Stock gem that provided real NYSE and NASDAQ data. One challenge was computing summary statistics based on real stock data. Another challenge was setting up a timed event that would end a game by selling all players’ stock at the current market rate and ranking the players.

We launched our final prototype. Visit it at http://battlestocks.herokuapp.com/

I ensured that all user stories were possible with the database design

I helped design this database to be in third normal form (3NF). We had to pay special attention to what information we would store at a point in time because we were working with stock values that change. Another challenge was designing the database to allow for authorizations. For example, we had to track who created the game so that we could limit edit access to only that person.

Entity-Relationship Diagram

We used the Entity-Relationship Diagram (ERD) to check that each user story was possible with the database design. We iterated on the database 10 times before we started development.

The site map shows 24 views we designed and implemented

The Site Map really demonstrates how much work it took to create Battlestocks. We created 24 different views in total. We used the site map as a checklist of things we needed to create and to ensure we added the correct navigation.

I developed the Research Stocks feature

I helped to create the Stock Search and Research Stock page. It was the first time that I implemented a search and web-scraped data. I improved my CSS skills.