LINE FX
Jun. 2020 – Sep. 2022
LINE FX
Jun. 2020 – Sep. 2022
EN
LINE FX is a 24-hour forex margin trading service operated by LINE Securities. It provides an easy-to-use platform with advanced charts, economic indicators, and market trends, making forex trading accessible for both beginners and experienced traders. Integrated with the LINE messenger app, it offers real-time forex price updates and market forecasts, helping users trade at optimal times. LINE FX also features competitive spreads on major currency pairs and operates under the strict regulation of Japan's Financial Services Agency (FSA), ensuring a secure trading environment.
JP
LINE FXは、日本のLINE証券が運営する24時間対応の外国為替証拠金取引サービスです。高度なチャート、経済指標、市場動向などを簡単に理解できるように提供し、主要通貨ペアに対して競争力のあるスプレッドをサポートしています。LINEメッセンジャーと連動し、リアルタイムの為替レート変動や市場予測情報を素早く受け取ることができ、最適なタイミングで取引を行うことができます。初心者でも簡単にアクセスできるように設計されており、日本の金融庁(FSA)の規制に準拠し、安定性を保証します。
KR
LINE FX는 일본의 LINE 증권에서 운영하는 24시간 외환 마진 거래 서비스입니다. 고급 차트, 경제 지표, 시장 동향 등을 쉽게 이해할 수 있도록 제공하며, 주요 통화 쌍에 대해 경쟁력 있는 스프레드를 지원합니다. LINE 메신저와 연동되어 실시간 환율 변동과 시장 예측 정보를 빠르게 받아볼 수 있어, 최적의 시점에 거래할 수 있도록 돕습니다. 초보자도 쉽게 접근할 수 있도록 설계되어 있으며, 일본의 금융청(FSA) 규제를 준수해 안정성을 보장합니다.
Role
As a UX/UI designer on the Financial Design Team at LINE Creative Center in Tokyo, I worked on LINE FX Pro a desktop web application that complements LINE’s mobile-first trading service. My main responsibilities included designing responsive interfaces and building a scalable system design tailored for the desktop environment. I also took charge of organizing content and defining the visual hierarchy, translating this into a clear information design that supports quick decision-making.
EN
LINE FX is a 24-hour forex margin trading service operated by LINE Securities. It provides an easy-to-use platform with advanced charts, economic indicators, and market trends, making forex trading accessible for both beginners and experienced traders. Integrated with the LINE messenger app, it offers real-time forex price updates and market forecasts, helping users trade at optimal times. LINE FX also features competitive spreads on major currency pairs and operates under the strict regulation of Japan's Financial Services Agency (FSA), ensuring a secure trading environment.
JP
LINE FXは、日本のLINE証券が運営する24時間対応の外国為替証拠金取引サービスです。高度なチャート、経済指標、市場動向などを簡単に理解できるように提供し、主要通貨ペアに対して競争力のあるスプレッドをサポートしています。LINEメッセンジャーと連動し、リアルタイムの為替レート変動や市場予測情報を素早く受け取ることができ、最適なタイミングで取引を行うことができます。初心者でも簡単にアクセスできるように設計されており、日本の金融庁(FSA)の規制に準拠し、安定性を保証します。
KR
LINE FX는 일본의 LINE 증권에서 운영하는 24시간 외환 마진 거래 서비스입니다. 고급 차트, 경제 지표, 시장 동향 등을 쉽게 이해할 수 있도록 제공하며, 주요 통화 쌍에 대해 경쟁력 있는 스프레드를 지원합니다. LINE 메신저와 연동되어 실시간 환율 변동과 시장 예측 정보를 빠르게 받아볼 수 있어, 최적의 시점에 거래할 수 있도록 돕습니다. 초보자도 쉽게 접근할 수 있도록 설계되어 있으며, 일본의 금융청(FSA) 규제를 준수해 안정성을 보장합니다.
Role
As a UX/UI designer on the Financial Design Team at LINE Creative Center in Tokyo, I worked on LINE FX Pro a desktop web application that complements LINE’s mobile-first trading service. My main responsibilities included designing responsive interfaces and building a scalable system design tailored for the desktop environment. I also took charge of organizing content and defining the visual hierarchy, translating this into a clear information design that supports quick decision-making.
EN
LINE FX is a 24-hour forex margin trading service operated by LINE Securities. It provides an easy-to-use platform with advanced charts, economic indicators, and market trends, making forex trading accessible for both beginners and experienced traders. Integrated with the LINE messenger app, it offers real-time forex price updates and market forecasts, helping users trade at optimal times. LINE FX also features competitive spreads on major currency pairs and operates under the strict regulation of Japan's Financial Services Agency (FSA), ensuring a secure trading environment.
JP
LINE FXは、日本のLINE証券が運営する24時間対応の外国為替証拠金取引サービスです。高度なチャート、経済指標、市場動向などを簡単に理解できるように提供し、主要通貨ペアに対して競争力のあるスプレッドをサポートしています。LINEメッセンジャーと連動し、リアルタイムの為替レート変動や市場予測情報を素早く受け取ることができ、最適なタイミングで取引を行うことができます。初心者でも簡単にアクセスできるように設計されており、日本の金融庁(FSA)の規制に準拠し、安定性を保証します。
KR
LINE FX는 일본의 LINE 증권에서 운영하는 24시간 외환 마진 거래 서비스입니다. 고급 차트, 경제 지표, 시장 동향 등을 쉽게 이해할 수 있도록 제공하며, 주요 통화 쌍에 대해 경쟁력 있는 스프레드를 지원합니다. LINE 메신저와 연동되어 실시간 환율 변동과 시장 예측 정보를 빠르게 받아볼 수 있어, 최적의 시점에 거래할 수 있도록 돕습니다. 초보자도 쉽게 접근할 수 있도록 설계되어 있으며, 일본의 금융청(FSA) 규제를 준수해 안정성을 보장합니다.
Role
As a UX/UI designer on the Financial Design Team at LINE Creative Center in Tokyo, I worked on LINE FX Pro a desktop web application that complements LINE’s mobile-first trading service. My main responsibilities included designing responsive interfaces and building a scalable system design tailored for the desktop environment. I also took charge of organizing content and defining the visual hierarchy, translating this into a clear information design that supports quick decision-making.
LINE
LINE
LINE was launched as a messaging app in June 2011 to connect people with friends and family. It rapidly expanded its mobile-first services to include lifestyle, fintech, content, e-commerce, entertainment, AI, and more. Today, LINE is the No. 1 messaging app in Japan, Taiwan, and Thailand, and is beloved by users worldwide.
LINE was launched as a messaging app in June 2011 to connect people with friends and family. It rapidly expanded its mobile-first services to include lifestyle, fintech, content, e-commerce, entertainment, AI, and more. Today, LINE is the No. 1 messaging app in Japan, Taiwan, and Thailand, and is beloved by users worldwide.
LINE FX
LINE FX
LINE FX is the service to be launched from LINE Securities in response to user demand for more variety in the range of financial products that can be traded. LINE FX Pro is a Full-fledged, highly functional PC version of trading tools focused on ease of use. It can be used by both beginners and advanced forex users alike.
LINE FX is the service to be launched from LINE Securities in response to user demand for more variety in the range of financial products that can be traded. LINE FX Pro is a Full-fledged, highly functional PC version of trading tools focused on ease of use. It can be used by both beginners and advanced forex users alike.
User Needs
User Needs
Users of the LINE FX mobile app wanted a more advanced and feature-rich trading tool. While the original app was optimized for beginners, there was growing demand for a platform that could also meet the needs of experienced forex traders. This led to the development of FX Pro—a desktop solution designed for both entry-level and expert users.
Users of the LINE FX mobile app wanted a more advanced and feature-rich trading tool. While the original app was optimized for beginners, there was growing demand for a platform that could also meet the needs of experienced forex traders. This led to the development of FX Pro—a desktop solution designed for both entry-level and expert users.
Design Challenges
Design Challenges
Originally available only on mobile, LINE FX needed to scale to desktop while maintaining a seamless experience across devices. As the service expanded, it also became essential to build a unified design system that could support consistent UX and streamline development across platforms.
Originally available only on mobile, LINE FX needed to scale to desktop while maintaining a seamless experience across devices. As the service expanded, it also became essential to build a unified design system that could support consistent UX and streamline development across platforms.
Design Solution
Design Solution
To support more sophisticated trading, the desktop version introduced customizable features and a more flexible interface. At the same time, the design team developed an internal design system to ensure visual consistency and improve design efficiency, enabling faster iterations and feature updates.
To support more sophisticated trading, the desktop version introduced customizable features and a more flexible interface. At the same time, the design team developed an internal design system to ensure visual consistency and improve design efficiency, enabling faster iterations and feature updates.
01
Customizable Interface
Advanced features, responsive layout, theme settings, and more
LINE FX Pro was designed to support a broad user base from beginners to experienced forex traders. To accommodate varying needs, the PC interface offers detailed controls and flexible layout options. One key feature is the ability to freely arrange multiple panels within a single screen. Users can customize their workspace by dragging and dropping charts, tools, and data views according to their preferences. Most panels are operable with a single click, enabling quick reactions, essential for a fast-paced FX trading environment.
01
Customizable Interface
Advanced features, responsive layout, theme settings, and more
LINE FX Pro was designed to support a broad user base from beginners to experienced forex traders. To accommodate varying needs, the PC interface offers detailed controls and flexible layout options. One key feature is the ability to freely arrange multiple panels within a single screen. Users can customize their workspace by dragging and dropping charts, tools, and data views according to their preferences. Most panels are operable with a single click, enabling quick reactions, essential for a fast-paced FX trading environment.
01
Customizable Interface
Advanced features, responsive layout, theme settings, and more
LINE FX Pro was designed to support a broad user base from beginners to experienced forex traders. To accommodate varying needs, the PC interface offers detailed controls and flexible layout options. One key feature is the ability to freely arrange multiple panels within a single screen. Users can customize their workspace by dragging and dropping charts, tools, and data views according to their preferences. Most panels are operable with a single click, enabling quick reactions, essential for a fast-paced FX trading environment.
A
B
C
D
E
F
G
H
A
Drawings
B
Auxiliary lines
C
Granular settings
D
Responsive dashboards
E
Trading panels
F
Customizable candlestick charts
G
Selectable themes
H
Light theme
02
Scalable Design System
Typography, color, icons, buttons, and beyond
To ensure consistency across platforms and enhance scalability, a robust design system was created for the PC service. The system includes everything from small UI components to full-screen layouts and interaction patterns. This foundation supported consistent user experiences while improving collaboration across design, development, and business teams.
02
Scalable Design System
Typography, color, icons, buttons, and beyond
To ensure consistency across platforms and enhance scalability, a robust design system was created for the PC service. The system includes everything from small UI components to full-screen layouts and interaction patterns. This foundation supported consistent user experiences while improving collaboration across design, development, and business teams.
02
Scalable Design System
Typography, color, icons, buttons, and beyond
To ensure consistency across platforms and enhance scalability, a robust design system was created for the PC service. The system includes everything from small UI components to full-screen layouts and interaction patterns. This foundation supported consistent user experiences while improving collaboration across design, development, and business teams.
A
B
C
D
A
Typography
B
Icons
C
Colors
D
Buttons
A
B
C
D
A
Typography
B
Icons
C
Colors
D
Buttons
Information Design for Data-Heavy Interfaces
Evolving Design Workflow with Figma
Forex trading interfaces handle large volumes of data, making typographic clarity essential. In this project, we applied different text alignments based on data type, for instance, right-aligning numerical values like prices to aid quick comparison. These choices were informed by best practices from sources such as The Wall Street Journal's approach to information graphics. Thoughtful typographic design played a key role in helping users interpret data more intuitively and efficiently.
Forex trading interfaces handle large volumes of data, making typographic clarity essential. In this project, we applied different text alignments based on data type, for instance, right-aligning numerical values like prices to aid quick comparison. These choices were informed by best practices from sources such as The Wall Street Journal's approach to information graphics. Thoughtful typographic design played a key role in helping users interpret data more intuitively and efficiently.
Utilizing effective typography to communicate data
and information.
Utilizing effective typography to communicate data and information.
The transition to Figma marked one of the first company-wide shifts in design tools at LINE FX. Previously, Sketch and Zeplin were used in parallel, but consolidating into Figma improved collaboration and design consistency. Migrating assets initially posed challenges, but Figma’s component libraries and features like Auto Layout helped streamline the workflow. I personally committed to mastering these tools through OKRs, studying new features and sharing insights with the team—laying the foundation for a more scalable and maintainable design process.
The transition to Figma marked one of the first company-wide shifts in design tools at LINE FX. Previously, Sketch and Zeplin were used in parallel, but consolidating into Figma improved collaboration and design consistency. Migrating assets initially posed challenges, but Figma’s component libraries and features like Auto Layout helped streamline the workflow. I personally committed to mastering these tools through OKRs, studying new features and sharing insights with the team—laying the foundation for a more scalable and maintainable design process.
Needs for a system and effective tools for reliable maintenance of the service.
Needs for a system and effective tools for reliable maintenance of the service.
Information Design for Data-Heavy Interfaces
Evolving Design Workflow with Figma
Forex trading interfaces handle large volumes of data, making typographic clarity essential. In this project, we applied different text alignments based on data type, for instance, right-aligning numerical values like prices to aid quick comparison. These choices were informed by best practices from sources such as The Wall Street Journal's approach to information graphics. Thoughtful typographic design played a key role in helping users interpret data more intuitively and efficiently.
Utilizing effective typography to communicate data
and information.
The transition to Figma marked one of the first company-wide shifts in design tools at LINE FX. Previously, Sketch and Zeplin were used in parallel, but consolidating into Figma improved collaboration and design consistency. Migrating assets initially posed challenges, but Figma’s component libraries and features like Auto Layout helped streamline the workflow. I personally committed to mastering these tools through OKRs, studying new features and sharing insights with the team—laying the foundation for a more scalable and maintainable design process.
Needs for a system and effective tools for reliable maintenance of the service.
Selected images sourced from:
Selected images sourced from:
