Investa Screener

Mobile

Investa Screener is an in-app tool of Investagrams that allows users to filter listed companies in the stock market using various trading strategies and parameters available. Since 2015, the screener was one of the first feature of the platform and continue, to this day, to prove relevant to the users.

The Challenge

The challenge was for us to design a mobile version of the existing web screener (as seen below). Evidently, a lot is happening in just one screen. It would be unwise if we try to simply put the same model for our mobile version. Our task is to make it more user friendly (in mobile) and help users be more confident in finding the right companies to trade or invest.

Screener web screenshot

The Role

Together with our mobile developer and CTO, we were tasked in producing the expected deliverable which is a mobile version of the screener. I was responsible to set the direction of the ideation of the product and build a functioning prototype ready for usability testing and development.

Ideate

Ideate

>

Prototype

Prototype

>

Test

Test

In stages of Design Thinking approach, my role was mainly in the area of Ideation, Prototyping, and Testing.

How might we simplify the process of filtering stocks in a mobile medium?

The web model involved only several steps to filter stocks. All indicators/parameters you need are laid out altogether with dropdown options to choose a specific parameter. And then click "Run" to show the results.

However if we apply the same model in our mobile platform, this would look chaotic and unusable given the screen size constraints.

Web flow:

screener webflow

The web model might look simple with just few steps, however all those items and dropdown options which are laid out are a bit daunting. In some cases users get confused of certain items they chose because they have to scroll up and down to see other items. This is of course a usability issue.

The Solution

In order to generate a solution, we need to think of another way to address the following (1) Screen size constraints, (2) Usability issue of overwhelming items to choose from, and (3) Design in such a way that users can navigate easily.

With a few brainstorming sessions with the small team, we came up with a solution that is intuitive and familiar — a Shopping Cart concept. The way the screener works is apparently similar to an online shopping cart. Shoppers are presented with number of items and then adding each items to the cart before they can checkout. Similar to a shopping cart, we wanted to create a pseudo parameter cart that users can store parameters they want before running the filter.

Here’s the new mobile flow:

screener mobile flow

In this new flow, now it was my job to create sketches needed to further visualize the idea.

Screener Sketches

High-fidelity wireframe:

High-fidelity Wireframes

The Reflection

The task was very daunting at first, when questions crossed my mind "how can we fit all these items in a mobile platform?" or "how can we make the experience less intimidating when the finance industry already is?" Admittedly, I was a bit stuck on the idea of "less is more". The old web flow was already with less steps and yet it would seem impossible to implement the same model for mobile.

We started progress only when we realized that we need to look to a different perspective — a mobile perspective. Web and mobile are two different mediums and they have different human-computer interactions. When designing a platform to both web and mobile, we need to always take these things in consideration. So we can truly cater the user's needs to both media.

The Next Steps

Next steps would be Iteration. To complete the Design Thinking approach, it is imperative to conduct usability testing and research to real users. Although we did conduct an internal usability test, but it can only be truly qualitative if we also include real users and gather important insights from them.