Time Frame
1 month
Tools
xCode
Adobe XD
TL;DR
Ball is life.
OVERVIEW
NBA Fortune is an NBA stock trading game my classmates and I developed as a final project for my App Development class. The app allowed users to invest in NBA players by algorithmically generating stock values which changed in real-time depending on a player’s performance after every game. My role on the team was designing the UI as well as coding the buying and selling features of the game.
BACKSTORY
Everybody on our team were huge NBA fans so we knew from the start that we wanted to make a basketball-related app. The inspiration for the stock trading concept game from the explosion of sports betting worldwide in the last few years and the recent legalization of sports betting in the US. One of my groupmates interned in the NBA over the summer and shared some insider secrets that the NBA was interested in creating an app as an extension of basketball gambling. We figured that if our app was successful, we could pitch it to the league. So we thought, “Why not give it a shot?”
MY ROLE
I was in charge of creating the UI and creating design guidelines for how the visuals of the app. I also created wireframes to map out the flow of the app and how every tab should transition to the next. I was also involved on the coding front by coding the Buy and Sell functionality as well as the Detailed Player View, which showed the player’s seasonal stats and performance on the latest 5 games.
Design
DESIGN PRINCIPLES
1: Because the app was so data driven, I wanted to make sure that all the information on the screen was intentional and delivered in a clear, concise manner. Extraneous information would be taken out.
2: As for colors, I used the iconic red and blue duotone color scheme synonymous with the NBA. However, I added subtle gradients to the background, which I felt added an additional layer of depth and paired well with the information presented on top.
3: The font was Gill Sans, which is a humanistic sans-serif typeface developed by the famous British designer Eric Gill. It scaled well on mobile and its open counters and generally round letterforms made it easy on the eye.
WIREFRAMES
The wireframes were created in Adobe XD so they could be easily shared with the team. They were especially important when coding as a team due to the nature of Swift because each individual part had to be included in the beginning. Even adding a single change would alter the enire Storyboard structure of the app and disconnect the outlets.
WIREFRAMES
The wireframes were created in Adobe XD so they could be easily shared with the team. They were especially important when coding as a team due to the nature of Swift because each individual part had to be included in the beginning. Even adding a single change would alter the enire Storyboard structure of the app and disconnect the outlets.
FINAL DESIGN
The final designs for the app. Using the design principles I set for myself and the wireframes as a guide, I created a system to contain the app's four most important features: My Players, Trading Center, Stock Market, and Player Profile.
Coding
INITIAL CHALLENGES
The code was written in Swift, Apple’s programming language and developed in xCode. From the onset there were programming hurdles we had to overcome, and were things we have never attempted before. These included:
1: Constantly refreshing data for all 400+ NBA players.
2: Creating a search method that allowed users to find specific players they wanted to invest in.
3: Hosting a server that stored the information for all the users, which included their portfolio, in-game currency, login information, and allowed them to interact with other users.
4: Creating an equation to calculate the share price of these players based on their game stats.
API'S
We used an online sports data-gathering system called MySportsFeeds to pull daily statistics and game data for each player. The data was outputted in JSON and compiled through Swift. The daily news also functioned the same way by pulling information from NBA’s official RSS reader.
An overview of all the segues and how they are connected on xCode.
The code for pulling the player's most recent stats from the API. Each player is assigned an unique ID which is drawn from the database.
The code for pulling player data, such as their name, position, team, and a bunch of other stuff. It can get really specific.