Design Report

P a g e | 1
Yosef Gamble & Sean Mayo
4 June 2015
CS 446 – Dr. Holly Johnson
STOX: Rapid Stock Prediction Interface
Prospectus
The user interface that we are proposing is for a mobile financial stock options
application. The main user group will be finance students and professionals who wish to view
current stock prices, and use an algorithm that utilizes historical data to predict stock options for
up to two years.
The proposed user group is highly experienced with technology, and familiar with
finance websites such as Yahoo finance and applications such as Bloomberg, which includes
features stock pricing and visualization. We imagine that this application could be used in
financial districts across the globe, especially on Wall Street. With the development of the
program being done in an Academic environment, the prospective user group is comprised of
Junior and Senior year finance and supply chain management students from the College of
Business at Central Washington University. Also included in this group are finance professors,
and possibly the Chief Financial Officer for CWU, George Clark, in order to gather input from
professionals who have experience in the financial sector. The reason this user group was chosen
was because the curriculum states that it “prepares students for careers in corporate financial
management, investments, and financial institutions” [1]. This statement aligns with the user
group of finance professionals that will most likely use the application when it is released.
Reaching out to this user group also will include the use of Qualtrics surveys to gather
information.
In collaboration with our client, the primary needs of the user group is to have the ability
to instantly view the current stock price of any company in the two largest US Stock Markets
(NASDAQ and New York Stock Exchange). In order to accommodate the ability for a quick
search function, a search bar will be placed at the top of the application. Also included in the
search function is a predictive search feature that will allow the user to click the company that he

P a g e | 2
or she would like to view without typing the entire name. Upon clicking the stock chart the user
needs to be presented with the stock chart, as well as real time data of the current price, the open
and previous close prices, and other information that is vital for most financial websites. An
additional component that is vital to this program is the ability for a user to save bookmarked
stocks so that the user has the ability to quickly open the app and see the stocks they need to
view quickly without having to click to a different screen.
The interface will be used on mobile devices. Currently it is being developed in the
android environment, but the interface can also be translated into iPhone devices as well. This
app is meant to be used when a financial analyst or a finance student interested in the current
state of stock options outside of the classroom environment. Even though it could be utilized for
a university assignment that requires students to compare trends is not the primary goal of this
application. Since this application is expected to be developed beyond this course, the front-end
for an android phone will be expanded for tablets.
The list of features include, a main page showing trending stocks that other users are
watching the most, as well as stocks that are doing good and bad. If the user is logged in, they
will be presented with a view of bookmarked stock charts and information that can be clicked in
order to expand into the more detailed stock chart and supplemental information on a company’s
stock. The feature that separates this app from other websites and applications is the introduction
of a customized algorithm that will attempt to predict stock option trends based on historical
information. This will require an input from the user to calculate how far into the future the
algorithm will predict for, as well as an additional space that will include the numbers resulting
from the calculations. A swipe feature will be used to navigate the user from the main screen to
the currently viewed company stock chart.
The tools that will be used to design the front-end of the application will be built in Java
using the official android IDE, Android Studio. The proposed tool to pull financial data will be
yahoo finance API, or google finance API. The challenge with creating a financial application is
that it has to be near instantaneous. Since stock prices change by the second, finance
professionals need to have the ability to make quick decisions based on the most up to date
changes in those prices. If the prices featured in the app is not current instantaneously updated,

P a g e | 3
then the user group will be less likely to approve the overall application, including the prediction
feature.
Design Report
First Pillar of Design: User-interface Requirements
For the STOX application, the first step was to gather User Interface requirements, and
figure out what the user base of the application is. We decided that the primary user of this
application would be financial analysts and students who were studying and interested in
corporate finance. The user base was assumed, due to our client’s extensive interest in
forecasting stocks. In fact, the client was currently taking a course from the College of Business
at Central Washington University on forecasting, which was taught using the programming IDE,
R studio.
The first step that we made as a team was reach out to our prospective client, Nick Shuey,
a finance and economics double major at Central Washington Unviersity, to see what he would
like to see in an application of this type. He pointed out a few
existing websites that the application could be based off of. The
first he showed was Standard & Poors Net Advantage, which was
described as a resource for company stock information based that
was widely used for classes. The biggest advantage of the site was
the amount of information that was readily available for a user,
and that reports could easily be exported for an excel spreadsheet.
The problem with this website was the speed of the website, it
tended to be slow and not very straight forward. The ability to
export excel spreadsheets was clouded by the inability to find the
export button and that one set of information could be exported at
a time. The last quagmire that was pointed out to us was the
search function. There was a simple search feature (Figure 1), but
it provided multiple options for the user to search between Excel
analytics and financials, even though, both are easily a click away

P a g e | 4
if the user decided to simply default search for by the company name. This was thought of as an
unnecessary feature that was meant to give users the impression of more control, but ended up
causing cluttering the search space.
The second website that Nick showed us was Yahoo finance (Figure 2), a more user-
friendly website. The most noticeable feature was the search bar, which gave users the ability to
search for a company and rely on
predictive search (Figure 3) to finish
the user’s intended input. So if a user
only knew a company’s full name and
not the stock index, then the user
could still search by putting in a
partial company name, and the search
bar will show a number of companies
with the name and the stock index,
just to give the user the ability to
verify if it is the company that they want to look up. Other websites and applications that were
mentioned and considered include Market Watch and Bloomberg Business. In fact, the iPad
application for Bloomberg business was regarded as one of the best apps that our client has used,
as far as design and functions go.
Going through these websites, we then
proceeded to look at the commonalities of each
website and how they would be applicable to
an application setting. The first one was the
stock chart, which would normally feature the
current stock price and allow for the user to
look up the history of a stock price by a certain
increment of years. The second main feature
was the ability to look at the quantitative data
pertaining to the information in the charts, such as the open, close, and current stock prices, the
Figure 1: Standard & Poors Net
Advantage Search Feature
Figure 2 Yahoo Finance
Figure 3 Predictive search in Yahoo Finance

P a g e | 5
volume of a stock, earnings, etc. The scale of the stock chart would also need the ability to be
changed depending on if the user wants to view the past 1 year, or 10 years.
With this information, we created a sketch prototype that included some of these features
in an application form. In the main window of the application, there would be a section for a list
of stock charts and some information regarding the current price and the trend at which the stock
is headed. If the user was logged in, then the program would feature a list of favourite/watching
stocks so that the user can easily and quickly see their stocks without having to do extra
searching of At the top, we had the search bar, containing a magnifying glass to indicate that this
was a search function. Also featured, was a sidebar containing the ability to switch between the
main page, favourite stocks, stocks that other users are looking at and settings for the user
account.
According to our ideas (Figure
4), when the user clicks the summarized
stock chart and company name, they
would be navigated to an individual
page which contained more elaborate
information, similar to Yahoo finance.
One of the main features, not planned
for this course would be the ability to
forecast the stocks for any company
based on the historical information of
the stock and a formula provided by the
programmer. Since the forecasting
feature was outside of the scope of the
course, the plan was to create dummy data to be used for display, and an unusable and inaccurate
forecasting feature.
Based on the sketch and ideas from the initial meetings, Sean took the sketches and
created a digital layout in a program called paint.net, a freeware design program similar to
Photoshop. These sketches were presented to the client, to which the client agreed that the
program design was good.
Figure 4 User Control Diagram

P a g e | 6
As far as the application platform, it was decided to use Android due to the availability of
Android Studio for windows and the easiness of testing the application on our phones without
having to either jailbreak the phone, or exclusively use the Mac lab in Hebeler Hall for
development.
Also created was a survey in a program called Qualtrics, provided by the university, in which
the following questions were asked:
1. How important would it be for the app to contain User Login, Trending Stocks, and Stock
Prediction? (Scale from ‘This is essential’ to ‘I hate this’)
2. If you could only pick one
a. The app would be easy to learn.
b. The app would have many features
3. What would you use a stocks app for
a. Business
b. Personal
c. Educational
4. Which version of Android does your phone have?..
5. What websites of apps do you use for stock information?
a. Yahoo Finance
b. Google Finance
c. Market Watch
d. Bloomberg Business
e. Other
Each question also contained a comment box, allowing for user testers to be able to add
comments that were not covered by our answers or questions. Also, having comments gives

P a g e | 7
users the chance to explain why they answered a question a certain way, which gives us the
opportunity to ultimately create a better user experience.
The questionnaire would be meant for a group of finance students from the College of
Business, as well as students who are a part of the supply-chain management club, due to their
interest in learning and perfecting their abilities to analyze issues regarding financial markets.
Additional people who would be interested in testing the application would be George Clark, the
Chief Financial Officer and Vice President of Central Washington University, since he has
extensive experience in the financial sector, and could bring a high level of professional
feedback for the application.
Additionally, the challenge with creating a financial application is that it has to be near
instantaneous. Since stock prices change by the second, finance professionals need to have the
ability to make quick decisions based on the most up to date changes in those prices. Speed is not
solely the responsibility of the internet connection on the mobile device, but also the speed of the
device itself, and the compactness of the application. If an application is too busy loading a large
number of icons and constantly trying to push and pull data, the speed of the application would
be gravely compromised. In order to keep that in mind, any information regarding the companies
in the stock market would be have to be held locally and not rely on the internet for unnecessary
tasks. Also to take into consideration is the ability for the application to perform well across
different devices, taking into account the amount of memory and processing power that can
greatly vary depending on which phone STOX is being used on.
Second Pillar: Guidelines Documents and Processes
One of the difficulties in the project was figuring out the terminology used in corporate
finance. By using the same terminology used in Yahoo finance and Standard & Poor’s Net
Advantage, we could simply grab the information and make it fit in our own application, even
having it in the same spot relative to the charts that are featured on those websites. Also, we’d
assume that terms shown below or next to stock charts were very important for the user, and that
by trial and error, users can determine if certain information needs to be moved elsewhere in the
application.

P a g e | 8
The design of the program was created under Google’s guide on Material design for
Android applications, which contains a suite of tips for Android developers to create application
layouts, animation, and components that would be the most beneficial for application users.
Google’s Material Design guide acts as a living document that creates a visual language for users
‘that synthesizes the classic principles of good design with the innovation and possibility of
technology and science.’ [2]
According to Google’s Material Design, menus are temporary, discrete, and not a
primary method for navigation within an app. This requires the use of icons for a user to press
that indicates an additional set of buttons for navigation. For example, the icon with three lines
indicates a main menu, while button with an icon of three dots, is known as an overflow menu,
and (hence the name) typically contain settings and controls that may not be regularly used in the
application. Once a menu icon is pressed, the menu is revealed over the current screen. For the
main menu, the animation reveals the menu by fluidly sliding the menu from the right, where as
the overflow menu is revealed by a gradually fading into visibility. [2]
The main part of the design process in this application was making sure that there was an
easy way for the user to differentiate between the main screen (watch list), the favorite stocks,
and other screens that show other market information. This was easily achieved by using icons
that would best represent finance terms. As shown in figure 5, icons such as a structure that looks
like a house indicates the home screen, or the default ‘Watch list’ of stocks for the user, and the
structure that contains pillars indicates the screen of popular stocks that other users are
Figure 5 from left to right, Main menu, Stocks list, and individual stocks page.

P a g e | 9
particularly watching. A simple up arrow was used to determine stocks that were trending
upwards, and a down arrow was used to determine the stocks where prices were falling.
Other icons include a chain to indicate bonds, a circle with a dollar sign for currencies, an oil
icon for commodities (such as oil, wheat, copper, etc.), and a piggy bank for mutual funds.
To emphasize the menu a little more, the navigation drawer feature was used to
implement the main menu. This type of menu, is compatible with any size screen, and enables
this app to also be easily used on large screen table devices without further optimization.
A unique characteristic in measurements for Android Studio includes the term dpi, or
Density-independent Pixels [3], which allows for developers to design applications with the
proper amount of spacing and scaling that is optimized for multiple screen sizes, unlike pixels
per inch, which are dependent on the screen. Also, the suggested vertical spacing measurements
of 48 dpi were used.
Due to development issues, the settings menu was moved away from the left user menu
and moved to its own button on the top-right hand side of the application.
Third Pillar: User-Interface Software Tools
The primary development tool for developing STOX is Android Studio, using Java
programming. As mentioned before, it would be the efficient way for us to develop since we
both have Windows computers. The caveat for working with Android Studio was that Sean had
more experience with Android development by taking mobile development with Dr. Jagodzinski.
The feature that most helps with prototyping in Android Studio is the ability to test the program
by emulating an Android phone within a computer. The emulation settings available in the IDE
also help with testing for multiple versions of Android. So far with the implementation, STOX
should be compatible with multiple versions of Android, namely Kit Kat and Lollipop. The
emulation confirms that this is true. But due to time constraint, development will mainly focused
on development on the older OS, Kit Kat, due to the stability and the amount of time that it has
been around and updated.
An additional tool that was used for development, but not implemented was SQLite. For
the searching function, it was thought of using a predictive search function to help the user easily

P a g e | 10
find stock information on a company. A database was created with 20 companies, the table
consisted of the company name and the stock index. For instance, the company Yahoo would
contain the name ‘Yahoo’ and the stock index ‘YHOO’. In order to create the database, SQLite
Manage was installed into a local installation of Firefox. The creation of the database was made
to be implemented as a local file along with the application itself. An idea that was thought of,
but not implemented due to the scope of the course was the ability to use the database to call the
Yahoo finance API and retrieve data for STOX. Searching would consist of OR statements to
determine if a string entered into the search box fit the criteria of a company name or its stock
index. If implemented, the biggest challenge was how to implement the search function in
Android to create a new view, specific to the company, and populating the display with
information that is unique to the company that is being searched.
In order to create the layout of the application, Paint.net was primarily used. The
advantage of using Paint.net was the ability for us to organize our ideas on the application, as
well as easily give feedback to the client about the direction of the application and how exactly it
worked, without a working product.
Fourth Pillar: Usability Testing
Not very much was done as far as usability testing due to the project not being fully
completed. But as far if the application was completed, the plan would be to have a focus group
for testing, which would include the client. The reasoning behind including the client is because
there may be differences between what the focus group and the client wants. The priority is to
create what the client wants, but it is also the responsibility of the developer and test conductors
to inform the client about the feedback of additional users.
As far as the testing that was done in the scope of this course, we have used Android
Studio’s emulator, as well as testing it on an Android device to ensure that the features that were
implemented so far were working correctly.
In addition to the testing, the use of Qualtrics surveying also gives us the ability to export
results into charts and compare any interesting points and compile any striking differences
between users who would primarily try the app for educational versus professional purposes.

P a g e | 11
Another great feature is allowing for multiple users to be able to distribute the surveys and
putting the results all into one report.
Lessons Learned
During the scope of this course, the project was halted due to the end of the quarter fast
approaching. There were some milestones that were not fully accomplished due to the
complexity of the User Interface that was created on Thursday. Sean implemented the features of
a side menu of the program that did not work well initially due to an issue of layering, and the
program interface showing the stock data was also not implemented as well. The main part of
giving the user the ability to see what options that they have to navigate between the favorites,
trending stocks, and settings was about the most that was implemented.
Probably one of the biggest issues that caused delays in development was dedicating to
the Software Engineering project in CS 380. There were often weeks at a time where
development was halted due to the commitments of creating the game framework and making
sure to test the framework with other teams.
Other lessons to be learned from this experience is the ability to drawback on original
designs when the timetable runs short. Nearing the end of the quarter, a lot of work had to be
shaved off, such as the implementation of predictive search, and even a working search function
itself, because the menus were still being worked on, and because we had to change direction in
how the menus would actually be implemented. The first menu design required a complex set of
layers and it was a struggle to get it to work properly.
Additional factors contributing to the project not being finished was the lack of regular
meetings and the division of work. We had some meetings together as a team, but while Yosef
met with the client often, there was not a set meeting or project schedule to complete milestones
in project development. As a result, the client was not as involved in the creation of the
application as he probably should have, besides seeing some of the progress that was made so
far. As far as the division of the work, it might of slowed down progress since one person was
working on the application, while the other worked on documenting what was being done and
working on other features that may not have needed to be implemented during the scope of the
course.

P a g e | 12
For next time, ways to improve the development process would be to conduct regular
meetings with the client and the group, in order to create a sense of motivation for moving the
project forward. And despite the client not having Computer Science experience, his experience
with critical thinking and R Studio programming could serve as another voice on how
development can be improved.
Overall, the next step in this project is to continue as a summer programming project. The
plan is to take some of the principles that are taught in financial forecasting programmed in R
Studio and translating it into Python or Java. That way, it could easily be implemented into an
Android application without sacrificing a significant amount of speed. Another part of the plan is
to complete the concepts of the application that were not implemented in this current iteration
such as the search functionality, and the ability to create user accounts.

P a g e | 13
Works cited
1. Finance and Supply Chain Management. Central Washington University, n.d. Web. 15 Apr.
2015.
2. "Introduction - Material Design - Google Design Guidelines." Google Design Guidelines.
Google, n.d. Web. 27 May 2015.’
3. "Supporting Multiple Screens." Supporting Multiple Screens. N.p., n.d. Web. 28 May 2015.
<https://developer.android.com/guide/practices/screens_support.html>.

Design Report

More Related Content

Viewers also liked (18)

Similar to Design Report (20)

More from Yosef Gamble (8)

Design Report