Stock Trading
Mobile App for Disnat

As a company, Disnat begun in the days, you need to call a broker on the floor to make a trade. So it is not a recent upstart app for the millennials (read Robinhood ↗︎ or Weathsimple ↗︎ here). Their customers are corporate businesses, financial advisors, day traders, and small investors who are doing it for families. And they had plenty of customers, close to a million !

When they launched their fist app, they decided to go native on both iOS and Android, taking full advantage of the built-in UI platform instead of trying to build something custom and unique. It paid off, as they launched a series of version quickly and promptly.

And now their customers were asking for even more.

The objectives

• Disnat had a very complete trading experience on desktop including watchlists, news, research reports, complex options trading and user preferences. They wanted to bring the lacking features to their mobile app, on both iOS and Android.

• The number of functionalities and the amount of information to display were a real challenge for the small screen. It needed to be integrated in a cohesive way to make sure we do not disrupt the actual flows how of the clients use the app.

• The apps were leveraging the native interface of each platform (UIKit on iOS and Material Design on Android) to lower the needs for custom layouts and interactions.

• The team were kept very small: a product owner, two mobile developers (one for each platform), one back-end developer and one infrastructure architect, me and UI designer on needed basis. This played to our advantages.

• It was clear from the start the aesthetic of the app is not its strong appeal, but it is necessary to understand that its customer base value way more its functionalities and ease of use more than anything else. Now was not the time to question this.

The process

• The first feature, the product owner, wanted us to tackle was the option trading, the most requested by its customers. It was also the most challenging one.

• I had not objection working on it first, but I needed a bird’s eye view first of what were all the desktop features his team wanted to add in the mobile app. So we sit together and look at the backlog. We grouped the features into groups and prioritized them.

Login

• First login and onboarding to let the new customer create a password, complete their profile and accept the terms of service.

• Retrieve lost password

• Reactive an inactive account

• Show when the platform is under maintenance

• Have a marketing space to promote new features and important news on the login page.

Account

• Present the account balance in both currency (CAD and USD).

• Present the buying power (margin) more evidently

• Add the activity history on the account

• Add the activity history on the orders

Markets

• Add the market news

• Ability to filter the news (stocks owned, watchlists, and other parameters)

• Add the research reports

• Ability to filter the reports (multiple parameters)

Trading

• Refine the trading screen

• Adding the option of after hour trading

• Show the options chain and let the customer initiate a transaction from it

Watchlist

• Add the possibility of creating stock watchlists

• Let add a stock to a watchlist from any screen.

• Refine the navigation with 5 tabs: Home (Account), Markets, Order, Watchlist, Profile

Profile

• Set the order default values

• Transfer funds (add, withdraw, transfer)

• Management of alerts (email, SMS, Push)

• Subscribe to real time quote

• Change contact info

• Change password

• Change security questions

• Language preferences (English or French)

• Consult the terms of use

Navigation

• Change the tab bar navigation to reflect the new main sections (Account, Markets, Order, Watchlist, Profile)

• Then I began to tackle the option chain. The challenge was how I would fit a huge table of call and put strikes into a size that small, while still keeping it understandable for customers used to seeing them like this for years.

• I look at other apps and peruse the Internet, but it was in vain. No app I could find were offering options trading, and I could not find any case studies.

• I explored possibilities by sketching. What if the table was not being able to be seen in totality, but you can scroll horizontally and vertically the calls and puts as they were locked together, while the strike column and navigation are fixed?

• After an initial design, I presented a prototype to the team, and they were wiling to give a shot to see if it was feasible and the interaction felt right in hand. Once implemented and some refinements, it was a winner.

• For the remaining of the features, it was easier to design the entire user journey and flows for each section of the app. From a first install to each addition in the main sections of the app, making sure the overall experience felt right. I succeeded checking each features down from our list in about 3 weeks, while keeping the overall experience recognizable for current customers and easy to use for the new ones.

The outcome

• During the next 6 months, we implemented the design directly in development, adjusting it to the last details and making sure it respects each individual platform patterns and UI. We tested with customers and refined the feature if there were issues, and released it to the public on both app stores: Apple App Store and Google Play. We did this for each release.

• Because the team was so small (just two developers, one for each platform), very few final mockups were needed. By simply sitting close to each other, overseeing each small demos, we were able to adjust everything on the fly. Nothing was ever formal, it was simply our way of working, day to day, until completion.

See more work.