FutureAdvisor

 
 
 

Making retirement investing accessible
to everyone


Client BlackRock/FutureAdvisor
Team Brittani Baxter, Nick McCurry, Dilip Patharachalam
Role Product Designer

 
 
 
 
 
faaah.jpg
 
 
 

C H A L L E N G E


BlackRock's FutureAdvisor mobile product helps people optimize their retirement investments by providing free financial advice and investment management using industry-leading algorithms. While the underlying tech has always been state-of-the-art, the app needed work. When using it, people missed opportunities to improve their investment portfolio, save time, and often struggled to pick the right product. Through user research, listening in on calls with our advisors, and interviewing our  users we discovered that there were 5 points that we could do a better job at helping them understand to improve the experience and drive conversion.

 
 
 
fagoals.jpg
 
 

G O A L S


How well users understood these 5 points became how we would measure the success of the redesign. Our business goal of driving premium conversion, aligned with our UX goal of helping people pick the best product for them—premium investment management outperforms human investors. We also had larger design goals which included creating FutureAdvisor's first visual system—sticker sheets, guidelines, and the beginning of a parametric system that adapts to the brand of our partners for our B2B2C mobile products.

 
 
fachris.png
 
 

D E S I G N I N G    F O R    C H R I S


To explore ways we could surface these 5 points throughout the product and user journey, I led ideation sessions with the FutureAdvisor founders, engineers, product, marketing, QA, financial advisors, and client op specialists. With hundreds of concepts in hand, I started designing the end-to-end product experience. To focus on our users and the product we were creating for them, rather than UI elements, Brittani, Nick, and I wrote drafts of the entire app as a conversation between FutureAdvisor and FutureAdvisor's persona, Chris.

 
faw.png
 

U I    F L O W S


The conversation became the outline of our UI flows, and I incorporated many of the ideas we came up with into wireframe sketches. From our discussions with Chris, we realized that we would need to replace the main “best practices” flow—which explained general investment theory and scored portfolios—with something that provided actionable insights on how to improve. I combined and narrowed down concepts to three proposals—a chatbot, an interactive video, and a task list flow. Working with FutureAdvisor's CEO, CPO, and head of product, we decided the task list flow best met the needs of the product, our B2B2C partners, and our end users. 

 
fawires-Recovered.png
 

V A L I D A T I N G    W I R E F R A M E S


To build the wireframes for the task list and auxiliary flows—onboarding and premium value props—I moved from sketching to Sketch. With the first sets of wireframes, I created an InVision prototype to share the vision for the new FutureAdvisor mobile flows. After a few tweaks based on internal feedback, we tested the prototype on usertesting.com. The task list and task card drill-ins were an instant hit. People especially enjoyed the little features, like shortcuts to add reminders in their calendar. We got a lot of feedback, and even better saw where they struggled most with the UI—they weren't sure if the picture up to the right was a chat or their profile, and had a difficult time with the horizontal scroll of the cards. In later tests, we found out that vertical scrolling cards were much better at conveying the feeling of points 1 and 2: “Wow, there's a lot of work to do, both now and in the future.”

 
 
 

B E H A V I O R A L    D E S I G N


When building UI, especially for a retirement investing app, cognitive biases embedded in the design influence every user decision. We wanted to be cognizant of these biases so that we could help people get the very best returns. Building on our attempts at behavioral design, Nick and I went on a deep dive at a workshop with Dan Ariely, the Center for Advanced Hindsight, and the Common Cents Lab. Some of the most significant outcomes included reframing our value proposition as preventing loss, implementing stronger defaults, and presenting effort by being radically transparent about the amount of work required and how we would do it. 

 
 
iphone-device-mockup-free-01.png
 
 

T A S K    L I S T


Replacing the previous "best practices" flow which explained general investment theory and scored portfolio, the task list provides actionable advice on how to improve. A portfolio projection and loss aversion value prop motivate people to act quickly. Every UI element addresses our success metrics and goals.

One time and recurring task cards help users understand how much work there is to do now and in the future. When users drill into the cards, step-by-step comparisons of DIY v. Managed approaches drive the point even further, while also explaining that FutureAdvisor can do the work for them. The sticky conversion CTA makes it clear. The prominent chat feature enables users to quickly discover that there are real people, including financial advisors they can contact. Lastly, when we tested the wireframes, we found trust became a non-issue with a consistent UI and appropriate branding—one participant said: “I trust the app, the design is legit and they're a BlackRock company.”

To encourage good investment habits, we omitted the current portfolio value from the task list and used the low discoverability of a hamburger menu as an advantage, minimizing opportunities for users to make bad decisions, switch risk preferences and/or investment strategies during market downturns and upturns.

 
 
risk.jpg
 
 

O N B O A R D I N G


After sign up, people find themselves on step 2/3 of the new onboarding. There is no step 1. We use a goal-gradient effect—a common design principle—in our progress indicator to motivate people to get through the flow quickly. In step 2, we ask for information to help us build their investment profile. As a federal fiduciary, FutureAdvisor must ask people to select a risk profile. Risk profiles protect consumers from predatory firms but often end up diminishing returns because they are difficult to explain and gauge on an individual basis. Previously FutureAdvisor's risk selector defaulted to a “moderate” risk profile and allowed users to switch to “aggressive” or “conservative.” Unsurprisingly, most users selected moderate. After all, moderate sounds like you are getting the best of both strategies. In reality, it's the worst option—you'll lose both more long-term portfolio value and more of your principal. An aggressive risk profile is almost always the best option for long-term investing, and a conservative risk profile can make sense for short-term goals.In the new risk selector, the default is “aggressive” and users can switch to the relabeled “mediocre” (previously moderate) risk profile or “conservative.” Animated projections and descriptions help users understand what each risk profile means. Step 3 is a cleaned up version of the previous aggregation flow.

 
 
vp.jpg
 
 

P R E M I U M    V A L U E    P R O P S


A simplified flow highlights the things that people love most about FutureAdvisor's premium investment management product. We introduce users to our team of licensed financial advisors available to them at no extra cost (non-monetary incentive). Animations then highlight 24/7 portfolio monitoring and management, low fees, and that their money stays in their control at a trusted custodian. 

 
 
brandsfa.jpg
 
 

V I S U A L    S Y S T E M


The app's new modular structure and visual language system makes it easy to change everything from color to text, to include and omit elements, and adapt to our B2B2C partners' brand parameters—I tested this with partner brand guidelines as well as hypothetical financial institutions based on consumer brands like the ones above. FutureAdvisor's visual language had grown organically, and an audit revealed that there were over 100 button styles live. To create brand continuity between the app and other products, I started refining the language into a visual system. Creating FutureAdvisor's first sticker sheet, and defining new elements including grids, spacing, colors, content, icons, illustrations, drop shadows, status indicators, animations, microinteractions, buttons, cards, forms, empty states, error states, lists, selectors, and tabs. 

 
 
fawire.jpg
 
 

O U T C O M E

After shipping the new flows premium conversion increased by 104%