As the UI/UX designer, I was responsible for:

User Research: Conducting user research to identify pain points and opportunities.

Design Creation: Designing wireframes, prototypes, and final UI assets for web.

Collaboration: Collaborating closely with the product team and developers to ensure designs were feasible and aligned with business goals.

Design System: Creating a consistent design system and component library for scalability.

Testing & Iteration: Conducting usability testing to validate design decisions and iterating on designs based on stakeholder feedback and analytics insights.

During the initial phase, several challenges were identified:

Complex Navigation: Users found it difficult to access trading functions quickly.

Overwhelming Interface: The dashboard was cluttered, with too much information displayed at once.

Poor Accessibility: Key actions were not intuitive for beginners.

Limited Real-time Data: Traders required a faster and more responsive interface.

Mobile-first Gaps: Web app lacked consistency with Rakuten Trade mobile app experience.

Our objectives were to:

Simplify Navigation: Simplify the navigation and enhance discoverability of key trading features.

Modern Interface: Create a clean, modern, and responsive interface for desktop users.

Improve Accessibility: Improve accessibility and usability for both beginner and advanced traders.

Real-time Data: Display real-time trading data efficiently, using intuitive charts and dashboards.

Platform Consistency: Ensure consistency between web and mobile platforms, leveraging design system components.

Our user base was diverse, including:

Beginner Retail Investors: Needed guided trading experience and educational support.

Experienced Retail Traders: Required quick access to analytics, watchlists, and trade execution.

Institutional Traders: Demanded high-performance tools for market monitoring and decision-making.

Tech-savvy Users: Expected seamless navigation, real-time updates, and advanced charting features.

We followed a structured design process:

1. Research & Discovery Conducted interviews and surveys with existing users.
Analyzed analytics and heatmaps to identify user drop-offs.
Competitor benchmarking of other trading platforms.
Defined user journeys and pain points.

2. Information Architecture & Wireframing Restructured the web app's navigation for easier access.
Created low-fidelity wireframes for core pages: Dashboard, Trade, Portfolio, Watchlist, Reports.
Conducted internal reviews to refine flow.

3. Prototyping & Interaction Design Built interactive mid-fidelity prototypes.
Designed responsive layouts for desktop, with future mobile adaptation.
Focused on micro-interactions for trade execution, notifications, and alerts.

4. UI Design & Branding Applied Rakuten Trade's brand guidelines: color palette, typography, and visual language.
Developed a design system with reusable components.
Ensured accessibility standards (WCAG compliance) for color contrast and text readability.

5. User Testing & Iteration Conducted usability testing with 15 users.
Identified friction points in trade execution and dashboard navigation.
Iterated on layouts, added tooltips, and optimized real-time data display.

Key design highlights of the Rakuten Trader Web App:

Dashboard: Modular widgets for portfolio, watchlist, market overview.

Trade Page: Simplified order execution with clear input fields and confirmation feedback.

Reports & Analytics: Real-time charts with advanced filters for different instruments.

Responsive Layouts: Desktop-first design with future mobile adaptation.

Design System: Consistent component library with Rakuten Trade brand guidelines.

Accessibility: WCAG compliance for color contrast and text readability.

Challenges encountered during the Rakuten Trader Web App redesign:

Balancing advanced features with simplicity for beginners.

Handling real-time data without cluttering the interface.

Maintaining cross-platform consistency (desktop vs mobile).

Aligning stakeholder expectations with design best practices.

Iterating quickly based on continuous feedback while adhering to strict timelines.

Key learnings from the Rakuten Trader Web App project:

Early user research significantly reduces redesign iterations.

Component-based design systems streamline development and ensure consistency.

Data visualization needs careful consideration to balance clarity and performance.

Collaboration with developers is key to feasibility, especially for real-time trading features.

Future improvements planned for the Rakuten Trader Web App:

Full mobile-first redesign for consistent user experience across devices.

AI-driven recommendations for trading and portfolio insights.

Enhanced notifications and alerts for user-specific triggers.

Personalized dashboard layouts based on user behavior.

Gamification and educational modules for beginner traders.

The Rakuten Trade Web App redesign demonstrates the impact of thoughtful UI/UX design in fintech.

By addressing user pain points, simplifying complex workflows, and improving real-time visibility, we enhanced both usability and engagement. This case study reflects the design journey, challenges, and outcomes, offering insights for future fintech projects.

→ Share your thoughts and feel free to get in touch.