Case study: Redesigning SGX stock screener and securities prices

I was asked to redesign 2 SGX webpages as part of a tech company’s hiring process. “As our business is fairly data, input and table heavy, a proxy is the SGX website.” It has been a month of silence since the submission, so I’m just gonna publish it here and hope to get feedback from you :)

Design Challenge: Re-design the SGX Website (2 pages)
Expectation: 2 prototypes with the same functionality and content as existing pages. And notes to help us understand your thought processes and choices
Format: Anything, can be a PDF, Invision, Figma….your choice
Design Style: Anything, your choice, even comic sans is fine

1. SGX Stock Screener

Stock Screener - Singapore Exchange (SGX)

First Impressions

• It is clear what this page does and what can be done on this page. The “711 stocks found out of 711 using 0 criteria”, the tooltips, and the table design support this.
• It is not cluttered.
• Visual identity: The pattern in the Header banner could be used to reinforce the brand identity more.
  ➡️ Redesign: Use something that repeats the motif in the SGX logo and the icon next to the Title — alternating green and blue.

Site Navigation

• Logical order of presentation. However, it was not clear how to get back to the Stock Screener page once I accessed the parent page — Securities via the breadcrumbs (Out of scope)

Information

• Icons are what are conventionally used except that the Download button could be more informative. Users would like to know what file format will be downloaded before actually downloading.
  ➡️ Redesign: Include CSV in the label or use a CSV icon
• When the column headers are customized to show only 1 column, the column width is stretched to occupy the entire table. This makes the column header which is left-aligned not next to the column values which are right-aligned. And the values are also far away from the other contents of the table. The table in Securities Prices however does this better.
  ➡️ Redesign: Make column width and alignment rules consistent across all tables.

Stock Screener table: Header is far away from the contents it describes.

Securities Prices table: Better rules for column width

Interaction

• In the Select Sector dropdown field, currently the cursor changes to 👆🏽 only when hovering on the 🔻, and changes to the I-beam pointer while hovering over the text placeholder in the field. But clicking on both the text and the 🔻 opens the dropdown menu.
  ➡️ Redesign: Standardise to 👆🏽 for the entire field. (Applies to all dropdown fields)
• Inconsistent use of colours. All interactive elements in the table use shades of teal except the sort icons in the table’s column headers which use a light green in its hover and active state. This light green is not very distinguishable from the grey used in its inactive state. It is hard to quickly see which is the currently active sort parameter.
  ➡️ Redesign: Use the bolder teal colour or a larger element to indicate current active sort parameter

• Hidden active filter. There can be scenarios where the user cant see what is the currently active filter which is hidden under Show more filters and specifying the Min and Max limits of the active filter criterion requires more effort too.
  ➡️Redesign: Active filters should get priority in the Selection Criteria box and be displayed starting from top left.

• Customize button modal window placement increases interaction effort by making users scroll below the current fold to access the action buttons (Update, Close). Clicking outside the modal to close it is also absent, though expected.
  ➡️Redesign: Place the Customize modal in such a way that the action buttons are in the same fold. Click outside modal overlay to close.

• If the aim is to help users easily compare items, then the card layout in mobile view doesn’t offer the same ease as the table rows in the desktop layout. It is optimized for mobile viewing but it doesn’t offer the same ease of functionality. (Not including in the redesign)

1. Desktop layout: table rows enable easy comparison, 2. Mobile layout: cards don’t offer the same ease

Search

• Could offer suggestions when entering wrong spellings instead of “Showing 0 results for …”
• It is not clear that the RIC and Trading Codes are included in the search. Include them in the Search tooltip along with Company Trading Name.

THE REDESIGN

1. Reinforced visual identity. (I tried :) I am sure there are better ways to do this but you get the drift.)
2. Clear icon indicating the download format.
3. Easier to see currently active filter and sort parameters — Changed colour of sort icon and introduced lines of the same colour to highlight active parameters.

4. Brought up the Customize modal window so users don’t have to scroll down to access the action buttons.

2. Securities Prices

Securities Prices - Singapore Exchange (SGX)

First Impressions

• Same as Stock Screener

Site Navigation

• Same as Stock Screener

Information

• Last updated time. Need data on user behaviour to see how crucial it is for users watching the prices but perhaps a better location for this info would be above the table on the top-left? Is it beneficial to see when the next update will be also? (Out of scope but just wondering)

Interaction

• Inconsistent use of colours. Same as Stock Screener. Additionally, the green used for the sort icon is also used to indicate positive change values.
• Customize button modal window. Same as Stock Screener
• Hidden filters & Lack of multi-select. Some filter elements in the top row require more interaction effort to be accessed and the user cant right away see what all options are available. Moreover, they don’t have the option of choosing more than one filter (e.g., Stocks & ETFs) at the same time.
  ➡️ Redesign: Present all options with checkboxes and without the need to scroll to access filter elements.

• Redundant functions & the Law of Locality. The Sort by row is redundant as the same functionality is available in the column headers in the table which is where the action is manifested. The Filter by (a-z, 0–9) doesn’t indicate whether it acts on the Trading Name or Trading Code. It can be replaced by an alphanumeric index in the table next to the Trading Name column which is where the action is manifested. As a rule of thumb, it is better to place action elements right where the action gets manifested.
  ➡️ Redesign: Remove the items in the second row. Introduce an alphanumeric index next to the table. Display the filter elements that were once hidden under Show more filters in the 2nd row instead.

Search

• Same as Stock Screener

THE REDESIGN

1. All filter options presented right away. Now it is possible to multi-select parameters also.
2. All options that used to be hidden under Show more filters are now visible right away.
3. Removed redundant sort options. Removed dropdown alphanumeric filter and introduced alphanumeric index next to the table itself.