Financial services mobile app
& other wireframes

Overview

During my time as a UI intern at The Wonderfactory, I had the opportunity to work on a number of really great projects. The most complex of these was a revamp of an iPad app for a financial services company.

I also worked on an advanced parametric search for a company with a massive online database of articles, and introduced a social aspect to a newsreader. To protect the companies, logos and identifying features are obscured.

Financial company iPad app

A major financial services company in NYC that specializes in online stock brokerage wanted a complete overhaul of its iPad app. The new app would display the user's accounts and portfolio. It also would provide a number of research tools and allow users to buy and sell stock.

I worked with the Senior UI Designer to develop wireframes for the app. Generally speaking, he did the information architecture and high-level structure wireframes, and I worked on detail screens and low-level complexities.

A comprehensive requirements doc was drawn up with the client before the initial wireframe stage. Early in the process, I listened to a number of customer interviews. I also did competitive research and an audit of both the previous app and an earlier in-house proposal (done before the client decided to reach out to an agency).

The final version of the product has recently been released into the iTunes App Store.

What follows is a small selection of wireframes I produced for the redesign. We used Illustrator as our wireframing tool, and Keynote for basic prototyping to demonstrate functionality to the client.

Research

In the Research part of the app, users can add stocks they wanted to track to lists called “watchlists.” Tapping a stock in the watchlist would reveal several tabs of information about the current value of that stock.

This wireframe shows the process of adding/deleting/rearranging watchlists and their contents:

Portfolio

In the Account part of the app, users can track details about their various accounts. Tapping an account on the left would reveal several tabs of information about it in the area to the right. This wireframe shows the Portfolio tab of a brokerage account:

This tab shows a historical account of a user's buy and sell orders:

Trade

The wireframe here shows one step in the process of buying a stock:

Add alert

These wireframes show the process of adding an alert. Users would be notified if a stock went over or under a specific price.

Help article page

Another sample wireframe:

Parametric search

This parametric search was designed for a website that provides a vast database of resources for business owners.

The goal was to simplify their filtering system without compromising its power.

Newsreader

I helped develop these wireframes for a generic newsreader app that needed a revision of its template structure to introduce social elements: