Home Screen Transformation
Problem: Cognitive overload from 9+ competing actions and lack of portfolio context
Solution: Created clear visual hierarchy with actionable insights
Before
Red header clashing with gray content
Portfolio balance without trend context
Icon-only quick actions (Deposit/Withdraw/Book)
"Activity" showing action buttons instead of transactions
Generic product cards with just logos
After
Unified header with personalized greeting and notifications
Portfolio card with prominent trend indicator
Labeled quick actions with clear iconography
Asset breakdown showing Mutual Funds vs Equity split
Product cards with live pricing and performance badges
Organized action grid with icons + labels
"Trending" section with real-time market movers showing
Impact
Users can now assess portfolio health in under 3 seconds and execute common actions with one tap.
Technical Consideration
As a designer who codes, I ensured the trend calculations and real-time updates were technically feasible with existing APIs, reducing implementation complexity.
Portfolio Performance Visualization
Problem: Empty states with 90% white space, no performance insights, minimal actionable data
Solution: Transformed portfolio view into performance dashboard with clear profit/loss indicators
Before
List of portfolios showing only name and current valuation
Massive empty space below (70%+ screen unused)
No visual differentiation between winning/losing positions
No quick view of performance metrics
After
Card-based layout with clear visual hierarchy
Performance badges showing % gains/losses
Profit/loss displayed prominently
Portfolio value + Profits shown in structured format
Color-coded visual feedback (green for gains, red for losses)
Consistent card design allowing quick scanning
Impact
Users instantly understand portfolio performance without calculations. Visual color coding provides immediate emotional feedback on investment health.
Streamlined Transaction Flow
Problem: Overwhelming financial jargon (NAV, Bid Price, Offer Price, Yield) presented simultaneously, creating decision paralysis
Solution: Progressive disclosure with contextual education
Before
All 6 pricing fields shown in gray box simultaneously
Equal visual weight to all data points
Form required all fields upfront
After
Cleaner form flow with placeholder text guidance
Information icon (ⓘ) for contextual help
Pricing details in organized card with visual hierarchy
NAV prominent, secondary pricing (Bid/Offer) in structured table
Terms link integrated naturally into flow
Reduced visual noise through better spacing and typography
Impact
Transaction completion rate likely improved by reducing intimidation factor for novice traders while maintaining access to detailed data for experts.
Technical Advantage
Understanding database structure allowed me to design the progressive disclosure knowing which data could be fetched on-demand vs upfront, optimizing performance.
Enhanced Stocklist Experience
Solution: Minimal data visualization, poor scannability, no performance indicators
Problem: Integrated header design with consistent visual language
Before
Simple list with company name + price only
No trend indicators or daily changes
Difficult to distinguish between items
No quick actions available
After
Integrated header with search, bookmark, and favorites
Consistent card design matching home screen aesthetic
Company logos for quick visual identification
Cleaner typography and spacing
Unified color scheme (maroon theme throughout)
Better touch targets for mobile interaction
Impact
Improved scannability and brand consistency across the app.
Note: While this version improved visual consistency, future iterations should add trend indicators, % change, and quick-action buttons directly in list items for power users.
Organized Profile & Settings
Problem: Previous version not captured, but typical issues include scattered settings and unclear hierarchy
Solution: Clear information architecture with grouped settings
After Design
User identity card at top with edit access
Primary actions in unified card (Trade Orders, Mutual Fund, Cash Statement, Purchase/Sell notes)
Secondary actions in list format (Invite Friend, Change Password, FAQ, Terms)
Prominent logout with distinct styling
Consistent iconography throughout
Reduced visual noise through better spacing and typography
Impact
Users can quickly find settings without hunting through nested menus.
What I'd Do Differently
Strategic Demo Approach
Creating a focused demo redesign allowed the parent company to make data-driven decisions without full product commitment. This approach reduced risk while showcasing transformation potential.
Technical Feasibility Focus
My development background enabled me to design solutions that were both user-friendly and technically achievable, reducing implementation friction.
Progressive Disclosure
Balancing novice and expert needs through layered complexity ensured the app could serve diverse user segments without fragmenting the experience.
Challenges & Solutions
Balancing Simplicity vs Data Richness
Trading apps need to show complex data without overwhelming users.
Solution
Used visual hierarchy, color coding, and progressive disclosure. Critical data prominent, detailed data accessible on-demand.
Maintaining Brand Identity While Modernizing
The maroon brand color needed to feel modern, not dated.
Solution
Paired brand color with clean typography, generous white space, and contemporary UI patterns. Used color strategically rather than everywhere.
Designing Without Live User Testing
Demo redesign timeframe didn't allow for user testing iterations.
Solution
Leveraged competitive analysis, heuristic evaluation, and design best practices. Built in flexibility for future A/B testing and optimization.
Future Enhancements
If I could take this project further
User Testing
Conduct usability testing with novice and expert traders to validate assumptions and identify friction points
Advanced Charts
Add interactive charts with zoom, pan, and timeframe selection for deeper portfolio analysis
Personalization
Smart home screen that adapts based on user behavior and preferences
Education Layer
Integrated tooltips, tutorials, and financial literacy content for novice traders
Social Features
Community insights and sentiment analysis for popular stocks (inspired by eToro)
What I Learned
About Trading Apps
Users need instant context. In high-stress trading situations, every second matters. Visual feedback (color, trends, badges) communicates faster than reading text.
About Demo Projects
Strategic demo redesigns can derisk major product decisions. By showing concrete improvements, I gave stakeholders confidence to invest in full development.
About My Process
My technical background is a strategic advantage. Designing with implementation in mind accelerates timelines and reduces back-and-forth with developers.
