User Experience Design for a Stock Market Web Application

Stock market app ui design

Project Overview

Segal is an online trading platform for buying and selling stocks. It helps users carry out stock market transactions in a smart, user-friendly environment. The Dev team had already developed the backend and infrastructures and the design team was there to develop the suitable user interface for this application.

My Role: Senior Product Designer

Other team members: Arta Mokaberi (Design Ops)

Date: Sep-Dec 2019

UX Design Strategy

We met with product managers and the marketing team daily to extract customer needs and to understand what constitutes value for the customer. During these meetings, user needs were extracted and recorded as SRS documents.

User Research

Since this project was a MVP and the launch time was very close, it was not possible to conduct extensive user research and we were limited to the information that was collected by the marketing team and some interviews that we had with users who were using competitor platforms.

Competitor Analysis

The best commercial and practical qualities of each rival were assessed by developing UX measures. In these analyses, the findability, discoverability, and readability metrics in three Iranian brokerage platforms—Agah, Mofid and Farabixo— were measured in order to determine the optimal approach for creating this platform.

iran stocks market logos

Navigation System Analysis and Design

After examining the rivals, we reached two universal UI paradigms for these complex systems:

  • The Frames Model: is a user interface that features side-by-side boxes that may be moved about and arranged differently depending on the needs of the user.
  • The Pages Model: In this approach, every necessary user interface module is implemented on a different page, and it is not possible to change the layout of the pages (except in the viewer section).

We decided to proceed with the framing model because of the complexity of the platform we were working on and the requirement to let the user modify the environment. All subsequent works and user interface decisions would be impacted by this decision, and all additional pages should be created and implemented using this structure.

Multiple meetings with Segal’s front-end team were held to see whether the developers could implement this design.

Developing the Design System

The user interface design process in Figma started with the establishment of a Design System in accordance with the technical team’s requirement for an integrated system of elements and components.

Each UI element was designed separately in order to create the design system, and each element’s user guide documentation was shared with the other UX team members in a separate file in Figma.

Choosing the right color pallette

We looked at various international stock exchange platforms, including Ctrader and Bitfinex, to find the best colour scheme for this product. Finally, the current dark colour scheme was chosen in accordance with the project requirements, client consultation, and the desired graphic innovation for this product.
For this project, two other themes—light and dark—were also developed so that customers who are not accustomed to the default colour scheme can alter the theme of the user panel and make it more aesthetically pleasing to them.

Segal-ui-colors
segal UI icons and colors

Popup Boxes

Popup messages have two buttons for user decision. One button is primary and one button is secondary.

UI design confirmation popup

Toast Messages

A toast message, which shows up in the upper right corner of the screen, is a summary of the procedure.
Toast message notifications momentarily show on the screen. These notifications shouldn’t interfere with the user’s experience and after a brief period of time disappear without the user’s action.

• The toast message can only contain 50 Characters, including spaces. If more than 50 characters are needed to convey the message to the user, it must appear in another sort of notification message.
• A “close” button may be included on the toast notification. Users can click this button to instantly close the toast message.
• This message won’t close immediately if the user’s mouse pointer is over a toast notification.
After removing the mouse pointer from the toast notification’s area, the notification will be closed in 2 seconds.
• Only one toast message can be displayed at a time, and the next test message will appear on the screen after the current toast is disappeared.

ui design toast component

User Interface Design

We chose to use FIGMA to develop the UI after considering the project’s design requirements and the requirement to apply the system design. For the implementation of design system, this tool offers more comprehensive features than rivals. Additionally, because Figma is cloud-based, it is possible to design collaboratively (with two or more designers), which allowed our design team to work on this project’s layout at the same time.

This product was not just another UI design project, But it was a complex system that required designers to learn and know about how stock market works. To ensure that the final user experience could meet the user’s needs, several hours of meetings with the marketing team and developers were held.

The pages that were created for this product are displayed in the section below.

Segal Stock Viewer

Users should add their stocks to any viewer in this app, in order to view their stock changes in this platform, Users can personalize their stocks and viewers

Stock market app ui design

Search for a stock in a Viewer

Users can search for any stocks they have added to a viewer. Other Stocks are categorized by industry.

stock market app ui design
stock buy and sell app design

Sorting industrial Stocks and Searching

Users can search for a stock after choosing a category of stocks. They can also sort stocks by the rate (ascending or descending).
Users can add any stock to any viewer they have already created.

ui design for stocks market

Edit Stocks Viewer

Users can edit any Viewer they have already created. They can also change viewer icon and make it the default viewer

stocks ui design

Buy and Sell Stocks popup Window

Users can open the buy/sell stocks panel by clicking on the buy/sell button. Live data of each stock is shown and user can switch between buy and sell section by clicking the tab title.

Stocks popup design

User Profile Design

Users can access their profile information by clicking on their own photo icon at the top. They can change their password, set 2-step verification and see their login history in this section. They can also change the theme from dark mode to light mode.

design user profile page - ux design