top of page

Quantitative Finance Platform

Web design

Team:

Taveesin Sae Xu, Weihang Shao

Dili Song, Qingle Zhou

Shengguang Zhao, Niao Qing

Role:

UI designer, Programmer

Duration:

3 weeks

Tool:

Axure RP 10, Python

Platform

Web

01

Background

During my junior summer break, I participated in a research project. The goal was to design one particular module of a web-based quantitative finance platform for the Guolian Securities, a company that provides financial services in China. According to their user requirement, the platform should be link to a database provided by the Guolian, and be able to visualize the data after some algorithms (bara risk factor analysis) has been applied.

​

*Because the platform is for internal use only, so I will only be presenting the high-fidelity prototype that I created on Axure.

02

User requirment

We had 3 major meetings with Guolian.

In the first meeting, we discussed their requirements, and noted a meeting minute.

 

Afterward, I created a low fidelity sketch and an illustration of the essential task flow. During this process, we continuously communicated with a specialist from the Guolian, and modified the sketch and illustration.

record.png

Meeting minute

sketch3.jpg

Low fidelity sketch

sketch2.png

Illustration of the main task flow

In the second meeting, I demonstrated the prototype and explained my design concept to the Guolian.

 

Honestly speaking, they were very satisfied with the design, but they also had proposed a few additional requirements.

prototypet1.png

The first prototype

new-req.png

Meeting minute

In the third meeting, we demonstrated our new prototype. They were very satisfied with the design, thus we continued to finish up the platform

0.png

The new prototype

03

Mood board

Sample provided by the client

Sample.png

Logo

dbb44aed2e738bd4ce0c0ae9a68b87d6277ff93d.png

Reference 1

Screenshot_20220711_225043_com.ss.android.ugc.aweme.jpg
O_GAL95C[)ES[%W7OT(_0O4.png

K-line pattern

Fluctuation

cms.png

Reference 2

04

UI/UX design

"Good morning, ......": would change to "Good evening" or "Good afternoon" according to the time

When the mouse is hovering, it shows the description of the formula being used

1.png

An abstract illustration of the K-line, intended to add some spice to neutralize the seriousness of the quantitative platform

2.png

uses a color sequence to better distinguish between different groups of factors

These three buttons provide a quick travel to three different graphs

5.png

This button provides a quick travel back to the check box above

4.png
bottom of page