Global Metrics Case Study

notion image
 

Background

In the world of stock trading, financial professionals are often called upon to discover new stocks to invest in. This is called stock screening.
 
Finviz is one of the popular incumbents
Finviz is one of the popular incumbents
 
Current tools are expensive. Companies like Bloomberg charge a lot of money for their famous terminal, which cuts margins for smaller players such as hedge fund management companies. Most stock screening tools today are highly technical and only usable by expert users.
Since Global Metrics wants to open up the pro-sumer market, the challenge was to simplify the user interface without making the product simplistic.
As the lead designer on the project, I was in charge of the interaction design and the visual design. I also planned, supervised and analysed user testing, which was conducted by a junior researcher.

Preparing for a Complex Domain

We had previously tackled financial projects before, but we knew nothing about stock trading and this was our biggest challenge for this project. It’s a field that requires specific domain knowledge and we overcame that by immersing ourselves in a one week crash course of YouTube videos, Warren Buffet books and other online articles. Daily conversations with our client also helped a lot to understand a complex domain within a short period of time. We also interviewed a few hedge fund managers to get a feel of their pain points and what we could do to make their experience better.

Designing and Prototyping

When I had a better understanding of what we should be designing, I started by creating prototypes of certain features, beginning with the ones most valuable to the users. For example, in an early prototype I designed a filtering system meant to work well in a responsive web setting. I wanted to test whether users understood the mechanics of how it worked.
 
Video preview
This prototype was made using Sketch (wireframes), Invision and Quicktime.
 
Making the video helped to communicate the concept to our stakeholders, but to truly know whether the design is good or bad, I tested it with real users.

Usability Testing

We used Screenflow for Mac, which allows us to record both the screen and the user’s reactions.
We used Screenflow for Mac, which allows us to record both the screen and the user’s reactions.
We found out early on that our menu system wasn’t the most intuitive. Our users couldn’t find what they were looking for because too many menu items were hidden in one button. To account for this, I iterated and made the first-level actions more visible. I also used colour to make the primary action obvious.
By failing early on, I was able to come up with a much more intuitive final interface design.

Design Details

Icons sit inside a 24x24 box.
Icons sit inside a 24x24 box.
Keylines keep everything consistent and pleasing to the eye.
Keylines keep everything consistent and pleasing to the eye.
I adopted many cues from Material Design for this project. For example, I use an 8-point grid system (kudos to Brian Lovin, Bryn Jackson and Anthony Collurafici) with a 4-point baseline for type. Why 8-points? Well, most screen sizes are divisible by eight, so it makes sense to design in multiples of eight.
 
notion image
Did I also mention I’m really super organised with my layers? Keeping things organised makes it super easy to collaborate with other designers.
 
 
Global Metrics - Designs