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.
Two Opportunities
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
- A user creates a game and invites friends
- Over the course of the game, players can research companies and use their budget to buy and sell stock.
- 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.
16-week Process
Research
Weeks 1-2
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
Prototyping
Weeks 3-7
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
Weeks 8-16
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.
