Morgan Stanley Wealth Management / iPhone App

Launching a global financial institution's first consumer facing mobile app to help customers keep an eye on their investment portfolio.

Business Challenges

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.

Approach

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

Framework Process

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.

framework_0000_AppMap
Initial scope of the mobile app to define a framework on.

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.

sketch_0000
side drawer with a quick actions sheet
sketch_0001
dashboard with information snippets
sketch_0003
spinning dial menu
sketch_0004
tabs with custom pop-up menus

Framework Result

Main Navigation

Video prototype of custom tab menu

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.

framework_0002_MainNav
Our framework navigation used the standard iPhone tab navigation but extended it with a pop-up submenu.

Moving between different accounts

Video prototype of initial account switching idea

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.

framework_0001_AccountNav
Our users had at least 5 accounts, so the first screen in the app needed to display all of the accounts and their various balances to help them answer "How am I doing?".

Transactional forms

Video prototype of Transfer transaction flow

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.

framework_0004_Forms
We explored a different interaction pattern for the multi-step forms that took inspiration from the iOS7 expanding form inputs. This new pattern reveals the inputs controls through an accordion-like animation which puts sole focus on the specific input the user is completing.

Phase 2: Extension

Extension Process

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.

whiteboard_concept_vertical
Considered a launchpad navigation pattern that would work on either iphone or android.
whiteboard_concept_horizontal
Considered a horizontal 'card' dashboard for the home screen that would then allow the user to jump into any of these primary sections.
sketch_concept_SidebarRefined
We eventually settled on the side drawer navigation pattern because it allowed for easy access to all possible sections and would also be a consistent pattern across iOS and Android.

Usability Testing

Embedded HTML prototype used for usability testing — try it out yourself

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.

Usability Takeaways

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.

wireframeSpec_01
Specification of the transition needed to move from an form to an input screen.
wireframeSpec_02
Specification of the three different custom input types the app needed.
wireframeSpec_03
Wireframe for the account summary screen for all accounts
wireframeSpec_04
Wireframe for the account summary screen for just one account

Extension Result

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.


More Projects