When I first started working at Zacks.com in June 2016, they mentioned that they had a current mobile app available, but that it hadn’t been updated or maintained in quite a while. The app was meant as an extension of the website, giving users the opportunity to easily check stock quotes and their portfolios on the go. They were interested in revamping the UX and design of the app overall, but had no one that stepped up to take on the challenge. That’s where I came in.
The original app was mostly functional, but poorly designed, difficult to navigate, and had a very confusing login process, including the ability to sync a persons portfolio from Zacks.com. I worked with the Product Manager for Zacks.com, and we built out a proposal for the new app, based on research, statistics she pulled from the current app, and information on similar apps. After presenting it to the Executive President of Zacks.com, we got the green-light to begin rebuilding the mobile app.
My first initiative was to run user testing on the current app, to see what was working, and what could be improved. This proved to be useful, as there were a number of missing elements that users really wanted in the app that I wasn’t aware of, such as the ability to add stocks to multiple lists, as opposed to a single watch list/portfolio.
After this, I began sketching and wireframing, trying to come up with the best way for each element to operate in the app. Also, to come up with a much easier navigation system, that didn’t rely on back buttons, but rather a top level navigation that is always present.
In addition to reorganizing the existing elements, we brainstormed features that could be added in. Charts, the ability to have multiple lists, and in-app articles (the current app sent users to the website to read articles, which was a jarring change, and made it difficult to navigate back to the app) were a few ideas we worked on. We also wanted to find a way to utilize notification settings and in-app purchases, but were unsure how to proceed in the most profitable way. Another option was to include a section for the paid services Zacks.com offered. This was not in the old app. I felt that it would be beneficial to give users an easy way to check what stocks were being promoted via paid services, to save them the trouble of navigating the website, which has a massive amount of content to navigate through. It could also help to promote purchases of the paid services.
After wireframing and brainstorming, I built out the full designs for the app in Photoshop, as well as a digital prototype using Proto.io. Once all of the necessary elements were completed, Zacks.com programming team took over building the app in Ionic. The app is currently available for both Android and iPhone, with links for both below.
You can see some screenshots of the app in action below.