Finance App
iStocke • Design / Development • 2015 - 2016
01 OVERVIEW
The project
iStocker is a finance application for Android, developed in Android Studio using Java and XML. The app provides useful information to inexperienced investors or people who want to stay up to date with the markets or news about the business world. This was my final year project for the computer science university degree. Having a computer science background proved incredibly useful when transitioning to the UX world. It provided me with an in depth behind-the-scenes look into how software is developed and having this knowledge helped me to understand what’s possible and what’s not when I design products.
My role
Since it was my own project, my role in this was pretty much everything, from project manager to designer and developer. Of course, to the dislike of my computer science professors, I probably focussed too much on the UI and user experience of the app instead of the complexity of the software behind the scenes 😂. Going a bit into the specifics, my role involved coming up with a viable idea and creating the requirements, then creating a plan. I started designing the interface first so I can visualise the end product, then I just worked in reverse and tried to make that into a workable app using Java and XML.
Results
Designed and developed a fully working Android app that can gather data in real time using the Yahoo API
Got a mark of 63 for the overall dissertation which could probably have been higher if I spent less time on crafting the interface and more time on building the software
02 PROCESS
Design process
Planning the whole project was done according to Agile methodology which was the first time I got exposure to it. This involved creating a product backlog which contained a number of five sprints. Each sprint was focused on the main features that were to be included into the app. The sprints were divided into smaller tasks which mostly represented the design, implementation and testing phases.
In the first phase, I outlined a set of requirements which I considered necessary to be included into iStocker. Then I started to learn more about the platform that I used for development which was Android Studio. After having the necessary knowledge, I started to work on the first sprint which was developing the interface of the app that included the main menu and choosing the colour scheme. Next step proved to be the most challenging and time-consuming which was the implementation of real-time data.
However, I eventually succeeded to develop this section with a little delay and move to the third phase. In this phase I worked on the Login/Sign-up system which also proved to be a challenge because I had to learn some PHP programming in order to communicate to the local database. After this sprint was done, I created the news section using the RSS feed, also learning how to decompose and manipulate an XML file. The final phase consisted in developing the resources section of the app where I included information for people that want to start learning about investing.
03 DESIGN
Interface design
Being a project mainly focussed on the development process, I can’t say there was much design to be done other than basic interactions. I just created the main screens I needed which involved a login and sign up process and internal workings of the app. Those were the display of real-time data for stocks, bonds and indices. Then the resource oriented pages which displayed news and different other investing resources. Once I had those basic designs, I started implementing them in Android Studio.
04 DEVELOPMENT
Real-time data
I’ll get a little bit technical to give you some rough idea on what I had here. If you want to torture yourself with the full details, please do reach out to me and I can send you a copy of my dissertation 😆. Everything below is for people that know some coding, so if this ain’t your thing, please skip this.
So the initial implementation phase, I discovered that Yahoo Finance API is generating a dictionary of data returned in jSON objects format, XML or CSV. In jSON objects, the dictionary had six keys, puts, calls, expiration, expiry, underlying\_id and underlying\_price which were the necessary pieces that iStocker needed.
I switched from getting data in difficult JSON format to easier CSV format. I created a Markets Activity with a Sliding tab menu to allow users to switch between Stocks, Forex and Commodities fragments. To implement the tabs, I used a ViewPager with getItem, getCount and getPageTitle methods. To ensure the tabs change with swipe gesture, I added a "for" loop inside onCreate method.
Then I created StocksFragment, ForexFragment and CommoditiesFragment with their own xml layout files and added ListView and progress bar for better user experience. Finally, I linked the fragments to the Markets Activity's ViewPager using a switch statement.
I would give you more details but you probably fell asleep by now so let’s just say that after all the programming done, I ended up with some juicy real-time data displayed into a simple interface which you can see below.
Login & sign-up system
I created a login/signup system for my application by using a local database and a cross-platform web server solution called XAMPP, which includes a phpMyAdmin option. I designed the database with five fields: user_id (primary key), name, username, email, and password, all stored as strings.
To handle the communication between the client and server, I created a ServerRequest class with two methods: storeUserDataInBackground for signing up and fetchUserDataInBackground for logging in. These methods use two PHP files, Signup.php and FetchUserData.php, respectively, to interact with the database and perform SQL commands.
Finally, I created a PortfolioActivity and linked it to the login/sign-up system as well as the main menu and navigation drawer. This allowed users to access their portfolios after logging in. Overall, creating this system required knowledge of databases, web servers, and programming languages like PHP, but it was a necessary and rewarding part of developing my application.
News & resources
Initially, it was challenging to find information on how to implement free news APIs, but I found a solution by using an RSS feed that generates an XML file. I started by designing the NewsFragment class, which includes the NewsAdapter and the layout for this class. Then, I designed the row model for the news, which included two TextViews and an ImageView.
Next, I moved on to the implementation phase, where I researched how to get the news data from the internet and display it in iStocker. I discovered that I could get an RSS feed from multiple websites, which provided the necessary information for the news section. To get the XML file, I used the address provided by Sky News and opened an HTTP connection between the app and the server. I then created the ReadRss class, which extends the AsyncTask class and stores the necessary elements in an ArrayList of strings to be accessed by the NewsAdapter.
To ensure that the data was displayed correctly, I had to find a solution to wait for the data to arrive from the server before being displayed using the adapter. After linking the news section to the MainActivity and Navigation Drawer, I tested the feature and found that it worked without any errors. Overall, the news section displays the most recent, top ten news from the business world every time the NewsFragment is created. Once I finished with the news section, I implemented the resources in a similar fashion.
Conclusion
Throughout this project, my goal was to create an Android application that would be both useful and engaging for users. Initially, I planned to develop a "Guide Dog" app, but ultimately decided to switch to a financial application because of my passion for finance and I thought it to be an interesting challenge . The development process was difficult, particularly when it came to implementing real-time data and the Login/Signup system, but I was able to learn the necessary skills and ultimately succeed in creating these features.
Although this wasn’t mainly UX based, it was probably the hardest project I ever worked on up to that point, but learning all those skills was really rewarding and gave me a great foundation for building high-quality products.