Drew Matthews

Home Portfolio SoFi Invest

Build your own watchlist

Sept 2019

Role & responsibilities

My role as a designer on the SoFi Invest team I worked closely with my PM partner and my engineers on iOS and Android to deliver a native mobile experience to our members. Responsibilities consisted of identifying the challenge, collaborative brainstorming, concept ideation and final screen design and delivery including assets and animations for developers.

Background & context

When SoFi Invest first launched each member got a pre-populated watchlist featuring popular stocks. While this was a great MVP approach our hypothesis was that members who curated their own watchlist would have more interest in returning to the invest tab in the SoFi app. Spend more time and invest more.

Build Your Own Watchlist iOS screen

Our goal

Give members a self serve way to curate their own watchlist. Let people pick and choose what they follow right from the beginning. Additionally, educate members on how to customize and use the watchlist with animated how to's as part of the flow.

Build Your Own Watchlist iOS screen

Feedback and hypothesis

Build your own watchlist or BYOW was an answer to feedback from our members that they weren't happy with the pre-populated watchlist you start with once you open a SoFi Invest account. Additionally our hypothesis was that members who curated their own watchlist would come back more often to the app and invest more over a period of time than members with a pre-populated watchlist.

Design process

I started by sketching out ideas for the flow of building your own watchlist. We wanted to give members a wide selection of popular stocks on the SoFi platform and at the same time give more advanced users the option to search for a specific security. It turned out that search was much more important than the "big long list" of companies. Members who knew what they wanted as part of their watchlist didn't know the respective ticker symbol but knew exactly the companies they wanted to follow.

Build Your Own Watchlist iOS screen
Quick sketches of the original flow and animation ideas.

Reviewing my progress with my Product Manager partner we made some final tweaks and moved to tightening up the screens. At this point I leaned in heavily to our established design patterns. In this case for how we selected individual stocks and our search pattern. If I had tried to invent something new it would have been much more costly in engineering time. A luxury you don't get too often.

Build Your Own Watchlist iOS screen
Tightened up screens with system components.

We knew that we wanted animation to be a part of the BYOW flow. It's something that we felt would help sell how to pick stocks for your watchlist. It also was something where we could quickly show how to use the different aspect of the watchlist without adding multiple extra screens to the flow. Creating a storyboard and getting people excited with animation tests meant people felt really invested in wanting to deliver on this new experience for our members.

What we launched

SoFi members who were net-new got a prompt to build their watchlist on the invest overview screen. Members who opened up an invest account and didn't have a populated watchlist were also prompted into the BYOW flow from account creation.

Build Your Own Watchlist iOS screen

Launching into the BYOW flow we used a simple animation to guide the users in what to do. A first for the invest team. Additionally, users could scroll and select individual securities and add them to a tray removing them from the list. Alternatively, users could search for individual companies or ETFs and Crypto currencies to add to their watchlist. At the end of the flow, users were shown some of the things they could do with their newly created watchlist. Like reorder it, swipe to buy or toggle the different types of data.

Results

When we first launched the BYOW we did so in a 50/50 split on new SoFi members. That means half of new users would get the old pre-populated watchlist and the other 50% would get the BYOW experience. We ran the test for 6-8 weeks. Interestingly we didn't see any drop off between the pre-populated vs BYOW watchlists. We did see an improvement in the total average number of members watchlists, people were following more stocks. Invest tab time spent was increased and members who curated their own watchlist were more likely to come back and start investing in the companies they chose.

Compliance was also really happy with the addition of the build your own watchlist to the invest product. Now that users were picking their own watchlist we didn't need to worry about a pre-populated list being misunderstood as stock recommendations.

What I learned

When you have a reduced timeline its good to remember to work smarter and not harder. Ultimately the successful launch of BYOW was partially based around our ability to take pre-existing design patterns and code and reassemble that into a new flow. This gave us time to put more time into the creation and delivery of the animated elements. Something that once we showed rough storyboards to people unfamiliar with the flow helped them understand what they were doing and provided a great visual prompt on how to use the watchlist once it had been curated.

More Sofi work

...

Design System

Building and maintaining component libraries to help the product design team move fast and build with consistency

View project
...

Illustrations

Friendly and colorful elements to brighten up stark white screens. With a pinch of SoFi attitude.

View project
...

Animation at SoFi

Bringing UI, illustrations and product demos to life.

View project

Browse more work

Fitbit
Flixel

©2020 Drew Matthews