Paszport do Wall Street

Bringing US stock market news to Polish investors

Paszport do Wall Street design

Project Overview

Paszport do Wall Street is a platform devoted to education and information related to the American stock exchange, created especially for Polish recipients. This project focused on the design and development of a mobile application for Android to accompany the existing web platform.

Orbis Systems, Inc. which operates Paszport also offers an electronic trading platform among other financial services, so the Paszport do Wall Street platform acts to add value to existing clients while also bringing in new users to the platform by distributing relevant stock market news.


My Role

In this project I worked as both designer and developer during two internships with Orbis Systems, Inc. The first between May-August 2015 encompassed the initial design and development of the app with a product manager, and the second in January 2016 focused on building out some additional features with another developer who joined the team.


Challenge

Design and develop an native Android application to bring the Paszport do Wall Street platform to mobile users. Core features to reach parity with the web version include displaying articles by category, bookmarking, sharing and search functionality.


Conceptualization

Starting from a rough idea in late May with the goal of publishing a market-ready app on the Google Play store by late August, my product manager and I knew we had to work fast.

Considering the limited time frame for this project, in the conceptualization stage we decided to evaluate our current web offering, examine our competitors and their mobile offerings, and look at current industry trends.

In bringing our current web offering to mobile, we wanted to share as much of the core feature set as possible. As Paszport do Wall Street serves mainly as a new reader application, the core feature set included presenting the user the top news articles of the day, giving the user the ability to bookmark any content to reference later, and incorporating native sharing of articles with others. As the writers and creators at Paszport do Wall Street offered a few different types of content including News & Commentary, Education and Video pieces we also wanted to offer that navigation from the home screen as well.

Taking a look at our competitors in the space, Yahoo Finance shared similar offerings when it came to US stock market news, and offered a native Android application of their own which shared a lot of the core features we wanted to implement for our users.

yahoo finance app 2015

Yahoo Finance’s Android application in 2015

In particular we felt the tabbed navigation bar could be used in our use case to surface related groups of content at the same level of hierarchy, separated by category of content produced by the Paszport writing and creative staff. Additionally inspired by Yahoo Finance, providing relevant stock information for companies discussed in the article appeared as a clear value add which we decided to include in our product as well.

Rather than simply implementing these ideas in our own application, we also wanted to expand on them in order to improve the overall user experience. For tabbed navigation, rather than only offering clickable tabs as in Yahoo Finance, we also felt we could implement swipeable tabs to provide multiple intuitive forms of interaction. In the case of surfacing particular stock data, we saw an opportunity to link stock tickers wherever a company was mentioned in an article. This clickable link could then be used to surface the stock price, change in price and % change along with additional performance metadata in a pop up component, the final implementation of which can be seen below:

related stocks stock info component

Final implementation of related stock ticker link (left) & stock info component (right)

With Google launching Material Design system less than a year before this project’s start, we had already begun to see widespread adoption of the system and its successes. Seeing this industry trend and the many detailed resources and documentation provided by Google for how to use and implement Material Design using the Android SDK, it was clear to us that this was our best path forward.

After a bit of brainstorming we decided to make use of cards to display a bit of information about each news article including a title, image, publish date and a short summary.

article card

An example article card

We also felt that the hamburger menu could be used to reveal our navigation drawer for easy access to secondary components of the application including accessing the user’s saved content, Paszport’s contest offerings, application & user settings, sign in/registration, and miscellaneous content.


Development

With a relatively clear idea in mind of what we wanted to ship, now it was time to build! This took up the majority of my time in the internship, and being new to Android development this included a lot of reading up on Google’s Android SDK (including understanding the activity lifecycle and callbacks, how fragments work, etc.) and Material Design documentation, reading blog posts detailing implementation for particular features and stack overflow troubleshooting.

The first step I took was to create a working application “shell” containing a blank view, hamburger menu, and navigation bar. I had also selected some potential UI assets to populate the nav bar and gave some sample categories for content types. This was done to start integrating with Paszport’s API early on so that we could quickly prototype and surface different types of content, passing different parameters to the API depending on which category was selected.

first container second attempt nav bar

A screen from an early “shell” application featuring the navigation bar (left). Fast followed improvements to highlight the currently selected nav bar item (right)


As for surfacing article content, I implemented calls to Paszport’s existing API to request the data, read the result, and display selected fields in a ListView as an early prototype of our cards concept. The first iteration of this didn’t appear in the form of cards but rather was an attempt to successfully parse data from the API response and display it in a preliminary newsfeed, which allowed for a vertically scrollable collection of views in the form of news articles.

first attempt at cards fast following improvements to cards

Early prototype of the newsfeed using “cards” which would later be further realized by altering the styling on the elements of the list view (left). Fast following improvements on the formatting for cards (right)

Another major milestone was creating a view for and properly formatting and displaying the article’s content. As the response to the API contained HTML tags, these needed to be parsed and handled by the application in order to reflect styling like paragraphs, line breaks, links, italics, bold, etc. as these needed to be translated into another form which Android could understand.

formatting text

Development in progress - formatting article content. Here some tags like breaks, images, and paragraphs are handled, but links we’re still being troubleshooted at this point

One challenge I faced was in implementing support for notifications when new articles were published. I found that Android would periodically perform some automated cleanup of processes running in the background and so I needed to find a way to keep the process from being killed by the operating system in order to keep serving notifications even if the user had not used the app in a while.

Handling search functionality involved taking the input provided by the user, making a call to Paszport’s search endpoint and passing the input in the payload of the request, displaying a “searching..” message while processing the request, and surfacing the results in a view on top of the current view, or a “not found” message in case the query did not return any results.

Sharing and refreshing came out of the box relatively easily thanks to being handled natively using Android Sharesheet and Swipe-to-Refresh, augmenting our existing ListView with a parent SwipeRefreshLayout. This helped us two-fold in decreasing development time and using interactions which users of the OS were already familiar with.

native sharesheet native swipe-to-refresh

Android’s native Sharesheet (left) and Swipe-to-Refresh (right)

Bookmarks support involved using SQLite to store unique article metadata which we could use to retrieve all article information. The same could be done for favorite stocks using the ticker symbol.

In accounting for future product strategy, I also designed the application structure in such a way that supports multiple languages for expansion into other markets in the future. This was done by using xml files for all of the navigation text and all text fields stored locally on the application, as well as the device’s locale. For version 1.0 this supported both English and Polish, which is why the menu titles and navigation all appear in English on my device, while the application content is currently only available in Polish. If I had set my device’s locale to Poland, these values would appear using their Polish counterpart as shown below:

english locale polish locale

Application run with device set to English locale (left) vs Polish locale (right)


Solution

Once the core functionality of the application was built out, I focused on cleaning up the presentation and adding a layer of polish. The nav bar menu items were replaced with their appropriate content and screens built out, and the sorting of article content was moved to the tabbed menu navigation in the main view. Due to time constraints for the v1.0 launch, a WebView was initially used to handle sign in and registration, deferring to the mobile responsive web page, but containerized within the native application. Some additional screens were built out for the About Us and Contact pages, as well as a link to the privacy policy hosted on the Paszport website.

With this solution, our users could easily catch up on the latest stock market news, share articles with colleagues, save their favorite stories and stock tickers for later reading or tracking respectively, and search for any news content they wish.


article cards on home page final navigation drawer

Final ListView display with updated styling for article cards and using tabbed content sorting (left) and final implementation of navigation bar (right)


swipeable tabs

Animated gif displaying final implementation of swipeable tabs by content type


saved stocks saved articles

Displaying bookmarked stocks (left) and bookmarked articles (right)


search results

Displaying article search results


related stocks

Related stocks displayed in a list view at the bottom of an article

By my last day in the office in August I had published the finished product to the Google Play Store, ready to receive user feedback for us to iterate on. It is still live today many versions later, the latest of which can be found here.


Project Retrospective

This project was completed in my first internship as a software engineer in the technology industry, and although I walked in only having taken two computer science classes and no knowledge of Android development, I was able to walk away with many new skills and a project I’m still proud of to this day. This internship experience solidified the idea in my mind that I could learn so much on the fly and be able to apply that knowledge to solve interesting real world problems.

Of course as a version 1.0 product launch, there was still much work to be done and features to be added, and luckily I got the chance to do some of this feature development alongside another engineer who joined the team when I got invited back for a winter internship. Nonetheless being able to have a finished product for all (Android owning) my friends and family to download and install for themselves was an incredible feeling.. even if they didn’t quite understand Polish.


Thank you for reading!