E*Trade
E*Trade
redesigned a financial trading platform to reduce cognitive load and speed up trades
Interactive Figma prototype
Timeline
1 week
Role
Full Stack Engineer Product Designer
Team
Failenn Aselta
Tools
Figma Photoshop Illustrator
The challenge
Redesign E*Trade for a swing trader while keeping the old edge.
PROJECT OVERVIEW
Design E*Trade to a modern standard with clean UI, lower cognitive load and an AI to help with behavioral errors.
E*Trade has constant complaints from users about site usability — many are now switching to more modern platforms like TradingView, Webull, and Interactive Brokers. Users cite a lack of control and an inability to see multiple data points at once. To retain and attract new clients, E*Trade needs to address these concerns while implementing tools that match modern trading workflows.
Current Site Feedback
Left: user feedback on E*Trade's interface · Right: solutions to user problems
Made with Napkin.ai and Figma
RESEARCH
70% of E*Trade users struggle with the site's UI.
22%
more likely to panic sell or revenge trade under high UI stress (Visual Voyage Study)
26%
increase in trader efficiency when display clutter is removed (Tufte's / NIH, 2023)
54%
more successful trades achieved with better UX design (The Design Index)
Participant
Hannah Goodman
28 Years Old
Retail Swing Trader · 100K–1M in Assets
Portrait generated with Gemini
Frustrations
- Misses critical trade windows — the cluttered UI is too slow to navigate.
- Can't compare stocks side by side; losing ground to cleaner platforms.
60%
faster execution speed. (Fitts's Law / Nielsen Norman Group)
Fitts's Law 44px hit-states, F-pattern sidebar, and visual hierarchy cut clicks to trade.
55%
faster reaction time. (Visual Finance SMU / The Design Index)
90% luminance contrast and a logic-anchored agent with confidence scores mitigate revenge trading.
15%
cortisol reduction from rounded geometry. (SMU / MIT AgeLab)
8–12px rounded edges lower stress; humanist tabular fonts cut glance time by 10.6%.
How Might We
Improve user retention by 40%?
By increasing a swing trader's success through speed, decisiveness, and cognitive clarity by at least 10%.
Site Walkthrough
Comments
E*Trade marked up with Figma
CASE STUDIES
Case Studies of Competitors
Images from TradingView, Webull and Interactive Brokers
THE SOLUTION
Low-Fi Wireframes
Key Learning — 01
Three wireframes were drawn to understand which layout would be the most beneficial — a great way to see what plan to undergo.
Key Learning — 02
The 3rd held closer to the traditional E*Trade layout, while the 2nd moved to modernize it a bit through rounded edges and less density. The 1st had the most breathing room, which research states is important for trading, plus a different nav bar side.
Key Learning — 03
In the end the 1st was chosen with a mix of the 2nd. The 3rd had the cleanest layout and most breathing room, but the sidebar felt cluttered going to the top, and a consistent trading button wasn't present in a desirable spot — so I mixed the two.
Hand-drawn sketches
Mid-fi wireframes
Key Learning — Wireframe baseline
The largest change was a simplified UI with less information present at any given moment — research shows that more than 8 data points on a page at once overwhelm a user and cause trading errors.
Key Learning — Reading pattern vs. trading reality
Research shows that users undergo an F-shaped scan of the page, so important and initial information should sit on the left-hand side of the page, not the right.
Key Learning — Icon rail placement
The icon bar was placed on the right-hand side of the page — research shows traders tend to "gaze lock" onto important information in the bottom-right when making a trading decision. Due to traders failing 20% of the time because of behavioral mishaps, the AI agent sits in the bottom-left to surface critical data while reminding them of their patterns.
Reasoning For Design
Mockups created with Figma
F-theory layout, humanist type, and an AI behavioral coach
F-Theory page logic
Critical info stays left/top so traders find data fast without hunting.
Humanist fonts cut glance time by 10.6%
Humanist sans reduces read-time per data point, improving reaction speed (MIT).
Rounded edges reduce cortisol by 15%
Soft geometry lowers stress response versus sharp corners under pressure (NIH).
Customization for individual strategies
Panels can be rearranged to match each trader’s workflow and reduce friction.
Trading is 80% behavioral
A visible AI coach surfaces patterns to counter impulse-driven mistakes.
Visual hierarchy, contrast, and stress-reduction by design
Visual hierarchy speeds traders up by 40%
Clear layering guides attention to what matters first, improving speed (Design Index).
Trading icon always in reach
Primary action stays persistent so traders don’t search mid-decision.
90% contrast on the buy button
High contrast reduces hesitation and improves precision under time pressure (JNeurosci).
Red reduces panic sales by 30%
Use red as intentional friction, not constant alarm, to slow impulsive sells (SMU).
Humanist fonts + tabular figures cut errors by 3.1%
Tabular numerals align data; paired with humanist type, errors drop (MIT).
Icons over text to reduce clutter
Icons communicate state/action quickly without adding wordy cognitive load.
High-stress UI raises revenge trading risk by 22%
Lower noise and calmer color reduce emotional re-entry trades (NIH).
Collapsible UI, color-first data, and eliminating fat-finger errors
Collapsible sidebar enables Gaze Lock — +12% speed
Collapsing chrome keeps focus on chart + core data, improving speed (eScholarship).
Easily accessible, live-updating information
Key metrics update in place so traders absorb changes without context switching.
Buttons larger than 44×44px eliminate fat-finger errors
44×44px+ targets make buy/sell/confirm accurate when stress is high.
Reduced clutter = 26% more trading efficiency
Fewer competing elements improves decision speed and quality (eTufts).
6 data elements per view = 20% better decisions
Limit visible data to avoid working-memory overload and boost accuracy.
Color processed faster than shape (SMU)
Use color as the primary signal for state, risk, and action (SMU).
Visual data mapping improves trading outcomes
Spatial/visual mapping helps pattern-match faster and act with confidence (Waterloo).
CONSIDERATIONS
In high-stakes dashboards, clinical research beats intuition — it changes outcomes.
Domain behavior can invert “standard” patterns (F-reading), so layout must follow reality.
Next iteration: prototype and measure speed + error rate, not vibes.
BIBLIOGRAPHY
Links
- Apple Inc. “Human Interface Guidelines: Buttons.” Accessed February 18, 2026. developer.apple.com.
- Bazley, William J., Henrik Cronqvist, and Milos Vulanovic. “Visual Finance: The Macroeconomics of Color.” Cox Today, December 9, 2020. smu.edu.
- Bortot, Danilo. “User Experience in Financial Trading: A Study on the Impact of UI Design on Trader Performance.” PhD diss., University of Waterloo. uwaterloo.ca.
- D'Acunto, Francesco, Alberto G. Rossi, and Michael Weber. “The Visual Finance Revolution.” UC Berkeley: eScholarship, 2023. escholarship.org.
- Dobres, Jonathan, Bryan Reimer, and Bruce Mehler. “Assessing the Impact of Typeface Design in a Text-Rich Automotive User Interface.” Ergonomics 59, no. 12 (2016). researchgate.net.
- Gupta, Anshul. “The Impact of UI/UX in CRMs and Financial Dashboards.” InsightsCRM Blog. insightscrm.com.
- National Institutes of Health. “Visual Search Efficiency and Display Disorder.” PubMed Central, 2023. pmc.ncbi.nlm.nih.gov.
- Nielsen, Jakob. “F-Shaped Pattern for Reading Web Content.” Nielsen Norman Group, 2006. nngroup.com.
- Prasad, S. “Neural Mechanisms of Color and Shape Processing.” The Journal of Neuroscience 33, no. 9 (2013): 4002–4015. jneurosci.org.
- Tufte, Edward R. The Visual Display of Quantitative Information.Cheshire, CT: Graphics Press, 2001. edwardtufte.com.
- Ullah, R. “The Effect of Chart Type on Financial Decision Making.” DiVA Portal, 2024. diva-portal.org.