At the time, our client had no mobile focused customers experience. They asked us to help them design a best-in-class iPhone app as the company's initial consumer-facing mobile channel.
Our app needed to stand out from the crowd, primarily on the experience it offered customers instead of features, since they were late to market.
The app also needed to highlight the company's banking abilities in addition to their portfolio management abilities. Only a small percentage of current customers knew about these additional banking services and the company felt the app would be a great place to highlight these services.
With so many different parties and stakeholders involved, we anticipated that decisions might be slow and that a good course of action would be to design an overall framework for the core functions of the app to get the various department teams excited and engaged.
Once we had the framework solidified and approved, we could then extend it to all of the other features and edge cases the app would need to handle.
Phase 1: Framework
Our first activities were to assess the features from a prior mobile web concepts and identify what the core features for the framework needed to be.
Initial navigation explorations
One of the biggest challenges on this project was navigation. We had to balance keeping the app straightforward, supporting the many internal departments with specific feature requests, as well as providing access to multiple accounts for a single customer.
As with any good concepting phase, we didn't hold back and some of our ideas were great and others a bit out there.
After going through many different navigation concepts, we settled on something slightly unconventional but it seemed to be a good fit for our challenge. We went with the standard iOS bottom tabs for their ability to clearly communicate the key areas of the app.
We then extended the typical pattern with an expanding sub-menu for each tab. So rather than hiding access to subsections within a page, we reveal those options to the user from anywhere.
You want to make a transfer, tap the transfer tab then select "make a transfer". To minimize any confusion, we made sure each tab had an submenu to provide consistent expectations.
Moving between different accounts
We discovered that a typical user had at least 5 separate accounts. So we needed to make sure there was an easy mechanism for seeing the current balance across all of those accounts, as well as an easy way to drill into any of them to find out more details.
An early concept was to have the accounts menu also serve as the place to check account balances - you can see this in the prototype.
This was too clever and having a dedicated Balances screen to start from was a better approach.
We felt the two standard options for a transaction form (step-by-step vs fullscreen back-and-forth) was a place where we could provide a greater native experience.
So we explored an idea that split the form to reveal the input method inline.
This interaction provided greater opportunity for handling lengthy lists and communicating any transactional restrictions to the customer during the input process to help minimize errors.
Phase 2: Extension
This phase of work defined the finer details of the app and various edge cases. We also continued refining the final visual design language.
Rethinking the main navigation
After a key stakeholders shake-up, we landed in a place where the framework navigation was simply too unconventional for some.
We also wondered if there was a navigation pattern that would be more consistent across iPhone and Android.
So we went back to sketching to see what some options were.
After refining the interaction patterns of the new navigation as well as defining a visual language for the app, we wanted to get in front of users to validate the feature set and discover any usability problems.
The client's development resources were tied up in other projects, so we built an HTML5 prototype to mimic the iPhone app to use for the testing.
I've embedded the HTML prototype in an iFrame here if you'd like to explore it. Simply type anything into the username and password fields to move beyond the login screen. You'll be able to navigate to a few primary sections, switch accounts, and complete a money transfer.
We ran multiple sessions across two days and they were all moderated by a third party. We had overall positive findings but there were a few things we needed to work on.
Refinement and edge cases
The remainder of the project was a collaborative effort amongst our team of designers to refine the interaction patterns and make sure we had accounted for all of the critical edge case variations.
We also continued to refine and apply the graphic design system across key screens for each of the main sections of the app.
Here is a sample of wireframes and system specifications I created during this step in the process.
In the end we delivered a comprehensive interaction and visual design system for an iPhone app that all key stakeholders were confident in.
The client was so happy with our results that they had our design team continue working on designs for the android and iPad apps.
The app launched around March 2014 and has received great reviews from the client and their customers.