Decode
Morning
Tradl AI
AI-first financial analyst for real-time stock screening, research, and market analysis
My Role:
Product Designer (Intern)
Team:
Senior Designer
A Developer
Time:
20 days
Shipped
Scope:
Web App
Why does product exist?
Tradl built Morning Decode to turn information overload into a clear market view.
Overview
Product was built entirely using AI
View Linkedin Post
To gather user data quickly, developers made the design using AI.
Hurdles found from Heuristic analysis:
Desktop first design, not optimised for mobile view
Multiple actions for the same flow create navigation ambiguity.
Users struggle to distinguish between clickable and non-clickable elements.
Information overload due to weak content hierarchy.
Research
Data validation became necessary for identified the problems
Even though we were quite stoked about all the ideas, it was crucial that the users also felt the same. Identified the trade-offs and rention rate using Mixpanel data. Additionally, polled on the Slack channel to gather what team says about the Morning decode.
Research identified 3 high-severity issues prioritized for redesign
Desktop first design, not optimised for mobile view
Team was unsure which action to use when multiple options lead to the same flow.
Information overload with less hierarchy in content placement
Defined the challenges that we aimed to address
01
How might we improve content density and navigation so users can scan daily insights without excessive scrolling?
02
How might we show essential morning decode features without cluttering the core analytical flow?
This started the loop of iterations-teating-interations for more than 12 days to bring the design that solve the problem in more impactful ways.
Testing helped in improving concepts
Below I showed how I improve the concept for making navigation with each testing.
Concept 1
Only two clicks needed to go on any sections
Concept 2
A bottom nav bar with three main categories
Concept 3
Combined both style with a promotional button.
Designed 3 Unique iterations in 6 days
Since the requirements of the product was quick I ideated and prototypied simulatenously, which came as impactful decision.
I used Claude Design for faster iterations
Whole iteration to prototype process felt like a design sprint.
Presenting
A more impactful moring decode
Web App Design
A single page to scan the overall market within 20 seconds
A non-distracting promotional button
Fixed space for Subscribe button in nav bar.
Listen the market summary anytime
No need for long reads, quick 4-5 mins audio episode.
Easier Navigation between the sections
Users can reach any section of the page in just two taps.
Drawers for frictionless user actions
Help in quick sharing, and form entries without losing the context.
Scan for Prototype
From AI to Human Centric Design
Before
After
Variations in the design occurred for two main reasons: multiple developers contributed to the interface, and a unified design system had not been established.
Learnings
Navigating these constraints provided valuable lessons in system architecture, cross-functional alignment, and designing for real-world user behavior.
Thank you for scrolling