FoxRunner is a stock-market news aggregator that delivers real-time alerts and insights. The existing desktop platform is widely used by traders for monitoring stock updates.
About FoxRunner
Design a mobile app that brings the same power to traders on-the-go, ensuring speed, clarity, and usability.
Role
UI/UX Designer
Deliverables
Wireframes
High Feudality Design
Functional Prototype
Team
Goal
Product Manager
Mobile Developer
Current platform is desktop-only.
Traders need real-time alerts anywhere, not just at their desk.
Desktop UI is dense → challenge: simplify for smaller mobile screens without losing key functionality.
Problem Statement
Target Users
Key Needs
Pain Points
Active traders
Investors
Financial analysts
Instant news alerts on mobile.
Quick search & filtering by keywords
Easy watchlist management.
Too much info at once → need a cleaner hierarchy.
Not optimized for touch → need larger tap targets.
Mobile requires faster access → shortcuts & notifications.
Research & Insights
Create a familiar yet simplified navigation.
Maintain visual consistency with the FoxRunner brand.
Make alerts & watchlists the center of the experience.
Design Goals
Screens
To keep the user experience clear and easy to follow, I mapped out the full structure of Rentastic Pay—from setup to invoice management. This helped organize screens, user flows, and actions in a way that supports smooth navigation and future scalability.
We transformed FoxRunner’s complex desktop news feed into a clean, scrollable mobile layout. Each card shows a title, summary, and timestamp for quick scanning, with built-in filters and a Top Gainers & Losers section to keep essential market updates just a tap away.
All News
Simplified for Mobile Insight
We converted the desktop’s detailed news window into a sliding panel for mobile, giving users instant access to in-depth stats like change rate, float, volume, and flow without leaving the main feed. This keeps the experience focused, fast, and information-rich.
News Details
Context at a Glance
We reimagined the desktop’s complex filtering system into a simple star-based filter for mobile. Users can sort news by importance — from 1-star to 4-star, plus an unrated category — helping them focus only on the most impactful market updates with minimal effort.
News Filter
User's first interaction with Grace
We adapted FoxRunner’s dense desktop alerts into a clean notification list optimized for mobile. Each alert is neatly grouped with key info and timestamps, allowing traders to quickly review market updates without overwhelming the screen.
Notifications
Stay Instantly Informed
We transformed the desktop’s cluttered alert settings into an intuitive mobile-friendly control panel. Users can easily customize alert types, set priority levels, and manage frequency — all within a clear, organized layout built for quick adjustments on the go.
Notifications Settings
Full Control, Simplified
We redesigned the desktop’s extensive navigation into a streamlined side menu for mobile. It neatly houses all major features and sections, giving users quick, organized access to the full FoxRunner ecosystem without crowding the main interface.
Side Menu
Compact Access to Everything
Final Thoughts
Designing the FoxRunner mobile app taught me how to balance information density with usability. Translating a data-heavy desktop experience into a compact mobile interface required constant trade-offs between detail and clarity. I learned the importance of hierarchy, context, and interaction flow—how subtle design decisions, like sliding panels or simplified filters, can make complex information feel effortless. This project deepened my understanding of mobile UX for data-drive