Industry
Finance
Client
HSBC
Role
UI/UX Design
STB Stock Detail Page Redesign
Redesigning STB: Bridging Legacy Design with Modern User Needs
Stock Trading Browser (STB) is the desktop counterpart to Easy Invest. I initiated STB stock detail page UI redesign project in 2023 to enhance STB trading experience.
Redesigning STB: Bridging Legacy Design with Modern User Needs
Stock Trading Browser (STB) is the desktop counterpart to Easy Invest. I initiated STB stock detail page UI redesign project in 2023 to enhance STB trading experience.
Redesigning STB: Bridging Legacy Design with Modern User Needs
Stock Trading Browser (STB) is the desktop counterpart to Easy Invest. I initiated STB stock detail page UI redesign project in 2023 to enhance STB trading experience.
Research
Ignored Desktop Experience
1 in 4 users will open stock detail pages during their visits. Unlike its mobile version, STB offers the potential for more comprehensive stock information. However, STB is still using legacy design since 2018, which could not meet both user needs and global design guidelines. Recognizing this gap.
Research
Ignored Desktop Experience
1 in 4 users will open stock detail pages during their visits. Unlike its mobile version, STB offers the potential for more comprehensive stock information. However, STB is still using legacy design since 2018, which could not meet both user needs and global design guidelines. Recognizing this gap.
Research
Ignored Desktop Experience
1 in 4 users will open stock detail pages during their visits. Unlike its mobile version, STB offers the potential for more comprehensive stock information. However, STB is still using legacy design since 2018, which could not meet both user needs and global design guidelines. Recognizing this gap.
UI Design
Widget Layout
To improve information hierarchy and density, I introduced widget cards in the new design. These cards create clear boundaries and backgrounds, enabling users to focus on each section more effectively.
UI Design
Widget Layout
To improve information hierarchy and density, I introduced widget cards in the new design. These cards create clear boundaries and backgrounds, enabling users to focus on each section more effectively.
UI Design
Widget Layout
To improve information hierarchy and density, I introduced widget cards in the new design. These cards create clear boundaries and backgrounds, enabling users to focus on each section more effectively.
UI Design
Consistent Color Palette
Red and green are crucial colors in investment services. For the redesign, I conducted research on these colors in other HSBC products and competitors. Then I developed a new red/green palette for all components, and also unified other colors to ensure consistent and meaningful color usage.
UI Design
Consistent Color Palette
Red and green are crucial colors in investment services. For the redesign, I conducted research on these colors in other HSBC products and competitors. Then I developed a new red/green palette for all components, and also unified other colors to ensure consistent and meaningful color usage.
UI Design
Consistent Color Palette
Red and green are crucial colors in investment services. For the redesign, I conducted research on these colors in other HSBC products and competitors. Then I developed a new red/green palette for all components, and also unified other colors to ensure consistent and meaningful color usage.
UI Design
Enhanced Typography
STB’s interface features numerous tables and charts, where users rely on numerical data to make trading decisions. To improve readability and clarity, I refined the table layout and adjusted font sizes and weights, aligning them with the updated design.
UI Design
Enhanced Typography
STB’s interface features numerous tables and charts, where users rely on numerical data to make trading decisions. To improve readability and clarity, I refined the table layout and adjusted font sizes and weights, aligning them with the updated design.
UI Design
Enhanced Typography
STB’s interface features numerous tables and charts, where users rely on numerical data to make trading decisions. To improve readability and clarity, I refined the table layout and adjusted font sizes and weights, aligning them with the updated design.
Conclusion
Driving Impactful UI Redesign: Collaboration & Initiative
While UI redesigns are often a low-priority task in product development process, they may significantly enhance the user experience in. Beyond the design itself, I actively engaged with the product team and global design team to advocate for implementation. The product team approved the proposal, and it was added to the future development plan. This project taught me how to initiate and lead design improvements from a designer’s perspective: proactive communication and collaboration is always the key to success.
Conclusion
Driving Impactful UI Redesign: Collaboration & Initiative
While UI redesigns are often a low-priority task in product development process, they may significantly enhance the user experience in. Beyond the design itself, I actively engaged with the product team and global design team to advocate for implementation. The product team approved the proposal, and it was added to the future development plan. This project taught me how to initiate and lead design improvements from a designer’s perspective: proactive communication and collaboration is always the key to success.