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.

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.

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.

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.

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.

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.

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.