ZBorsa
Ziraat Bankası, the largest bank in the Turkish banking industry, sought the expertise of ForInvest (formerly known as Foreks Digital), a reputable software development company specializing in FinTech solutions, to revamp their stock trading app ZBorsa, Z for Ziraat and Borsa meaning exchange.
Client
Ziraat Yatırım, investment branch of Ziraat Bankası
Scope
Rebranding, total product revamp
Team
1 product designer, 1 product owner, 10+ developers
Timeline
January 2022 - June 2022
Previous Design
The motivation behind this collaboration stemmed from the fact that the existing ZBorsa app had an outdated interface and lacked several contemporary features that the client aimed to offer their valued customers.
Branding and Design System
I started working on the project with creating a branding that would not only reinforce brand recognition but also add a sense of cohesiveness across different applications they had.
Ziraat’s distinctive red was picked as the primary color. Using the color red as a primary color in user interface design is always challenging. While it is often associated with warning or negativity, in the context of financial markets, it also represents the action of selling. In order to strike a balance and avoid any confusion, the decision was made to utilize a single shade of red for both primary actions and sell actions within the app.
I have considered alternative color schemes utilized by similar products, such as pink and teal to represent sell and buy actions, but decided against it. This approach not only ensures consistency and clarity but also aligns with the client's vision of a more familiar and intuitive user experience.
In addition to the primary color, green as a secondary color and two shades of grey were included to offer versatility and flexibility in various design elements and user interactions.
Next step was creating a design system that featured both regular components that most products need, such as buttons, switches and dropdowns, and other components that are unique to the app’s needs. The primary objective was to create a visually appealing and intuitive interface that would resonate with the target audience.
In order to further reinforce the brand identity, and create visual consistency and a sense of familiarity for users, the logo of Ziraat Bankası, which features a minimalistic rendering of a single head of wheat symbolizing the meaning of the institution’s name, agriculture was used as a motif, and integrated throughout the app as a background pattern.
The selection of the font family played a crucial role in establishing a professional visual identity for the ZBorsa app. After careful consideration, the Gotham font family was picked. This font family gave off a sense of modernity and elegance, perfectly aligning with the client's vision for a sleek and contemporary user interface.
In order to further enhance the unique identity of the ZBorsa app, a set of custom icons was also carefully created. These icons were specifically designed to cater to the diverse range of functionalities and features offered by the application.
Product Revamp
One of the key objectives for the client was to prioritize the presentation of stock data and related news in a manner that is both clean and easily navigable. As a result, the home page of the app was designed to feature a comprehensive list of symbols, which serve as short names for various financial instruments such as stocks, futures, options, and foreign currencies. This list is personalized by the user and dynamically displays live data, providing real-time insights into the market.
The app also offers a grid view option in addition to the default list view. This feature allows users to seamlessly switch between different visual representations of their symbol list, and accommodates the unique needs and preferences of each individual user.
In addition to the live data, the home page incorporates a convenient bottom drawer that can be accessed with a simple swipe-up gesture. This drawer displays news articles that are directly relevant to the symbols included on the home page. By seamlessly integrating news articles into the user's stock trading experience, the app ensures that users are well-informed and equipped with the latest information that may impact their investment decisions.
Recognizing the importance of accessibility and ease of navigation, the symbol detail page underwent a significant redesign. The goal was to provide users with a more compact and user-friendly interface that allows for quick and efficient access to relevant data and tools.
To achieve this, all the data and tools were organised into four distinct tabs, ensuring ease of navigation and eliminating clutter. Additionally, a sticky bar at the top of the page prominently displays live price data, allowing users to stay updated on market fluctuations at all times.
ZBorsa doesn’t only provides the information an investor needs, but also allows them to use the app to directly buy and sell all kinds of investment instruments, offering different options, such as short selling, limit orders, conditional orders, etc.
Going to My Account section, users can effortlessly track their financial portfolios and access the latest data pertaining to the assets they own, and customize the app settings such as changing the theme and adding investment account details.
ZBorsa doesn’t only provides the information an investor needs, but also allows them to use the app to directly buy and sell all kinds of investment instruments, offering different options, such as short selling, limit orders, conditional orders, etc.
Going to My Account section, users can effortlessly track their financial portfolios and access the latest data pertaining to the assets they own, and customize the app settings such as changing the theme and adding investment account details.
In order to allow users learn about the markets they are interested in, the app also featured two separate sections to aggregate all the data they might need.
The News section provides a comprehensive collection of the latest news articles and a calendar that features releases of international statistics that may impact the market, such as unemployment rates and interest rate changes.
The Reports section showcases a curated list of financial reports by various financial institutions, with custom icons for each type of report, such as the rising sun icon for Morning Reports, for easy recognition and visual appeal.
After 6 months of product design and development period, the new ZBorsa was released on summer of 2022 with its vastly improved user interface and experience, and reached to more than 2 million users on both iOS and Android.
