Back to all projects

Ameriprise Mobile App

A new feature

As the lead designer on the mobile app team at Ameriprise, I was approached about the desire to bring trading functionality to the app. This is something that users have been asking for, and the business believed it was time to respond. I took up the role of UX researcher and UI designer in order to present an exceptional trading proof of concept.

Note: This project is still in progress.

My process 

Research everything

I am not at all familiar with investing or trading, so my first step was to dive into that area to learn more. I spent many hours doing competitive analysis and research on UX best practices for financial firms.

Brainstorm and ideate

One of the biggest assets for this project was my other teammates. With a variety of backgrounds, interests, and experience with trade, I was able to tap into their expertise while ideating.

Wireframe it in Sketch

I consolidated my team's ideas into a few versions of a trading app in Sketch.

Gain feedback

I took my Sketch wireframes to business stakeholders in order to obtain insights and suggestions for improvement.

Ideation Phase 1

After discussions with the mobile app product owner and various subject matter experts in the business, I was able to gather enough information and requirements for the expected trading experience to bring back to my team. I conducted a design workshop with the other product designers in order to define our guiding principles and get some rough sketches.

Note: Click to view larger.

sketch of stock trading mobile app ideassketch of stock trading mobile app ideassketch of stock trading mobile app ideassketch of stock trading mobile app ideas

Principles

During the design workshop that I ran with our design team, we came up with some principles that we wanted to make sure we followed before jumping into sketching. Here are a few:

Speed and quick access

  • Ability to schedule trades ahead of time
  • Saved trades that you can access without having to enter all the fields again
  • Quick trade, a feature to access trade from other pages within the app

Clarity and ease of use

  • Provide relevant help and tips throughout the page
  • Make the page informative as well as functional
  • Use contextual imagery/icons to help the user
  • Segment the order flow to avoid long and overwhelming forms

Personalization

  • Show information and options that are meaningful to the user
  • Show stocks similar to those already purchased
  • Ability to have preferences, such as "environmentally friendly companies"
  • Show stocks/funds recommended by Ameriprise adviser

Robust search

  • Search features should be highly functional, allowing the user to search by a variety of parameters
  • By symbol
  • By industry
  • By exchange

Assessing functionality

For an MVP, it is possible that we will need to start by providing only what is already available on the desktop site. I took a look at the current functionality in order to get a feel for what we were working with. I have heard that this portion of the site hasn't been updated in many years, so part of my task while designing the app is to think about how the new design could also influence or apply to a desktop site redesign.

Screenshot of Ameriprise trading webpage from 2018

Current Website

This is the trade section of the Ameriprise website as it stands today. I have heard that it hasn't been updated in many years.

Wireframing

With the brainstorm session complete and having assessed the functionalities that currently exist in Ameriprise's trading system, I designed three versions of a trading flow within the app. I presented these three versions to the PO and SME's to get feedback and continue to iterate.

Note: Click to view larger.

Wireframe of Ameriprise trading mobile app version 1Wireframe of Ameriprise trading mobile app version 2Wireframe of Ameriprise trading mobile app version 3

UX research & analytics

With stakeholder feedback, I approached a UX research duo (an analyst and a strategist) in order to gain more in-depth client knowledge. We worked together to conduct an analysis of client behavior on the website (e.g. successful trades made and percent of drop-off, time on site, other pages visited, types of trades enacted, number of repeat visitors, etc.) and to determine from those results the needs and desires of real trading clients.

Ideation Phase 2

Having collected a wealth of information from the product owner, SMEs, and real clients, I tossed out version 1 of the wireframes and updated versions 2 and 3, which I then brought to a second design brainstorm session that I conducted with the product design team. With all of this new information in mind, we were able to address client needs and come up with two workable low-fidelity prototypes to bring to testing.

Note: Click to view larger.

Wireframe details from version 3Wireframe details from version 3

Unfortunately, my time on this project was cut short, as I unexpectedly had to move to Austin, TX and therefore leave this position. In order to ensure that this project would not fall through the cracks after I left, I created two clickable prototypes in InVision which I handed off to the UX Research team to run A/B testing and user surveys. When research and testing is completed, the team will move on to high-fidelity mocks that can be handed off to the mobile app development team. Stay tuned!

Testimony

Aayla is a tremendous asset to any team looking to further their UI/UX journey. She is driven, organized and a strong communicator and thought leader. She truly thinks from a 'client first' perspective and can design with both mobile and desktop in mind. Most of all her creativity and ability to be agile makes her a great addition to a team.

— Katie Schumacher, Senior Digital Product Owner
Contact me